Coolblue
Van een overzichtelijk energieportaal tot een helder bestelproces. Vijf projecten rond energie, inzicht en zelfstandig regelen.
- Rol
- Interaction & Visual Designer
- Focus
- Digitale producten & self-service
- Selectie
- Originele ontwerpen uit mijn projectarchief
Figma · Sketch
Energiezaken in één overzicht.
Context
Het klantportaal brengt het termijnbedrag, energieverbruik, facturen en contractgegevens samen. De vaste navigatie maakt de verschillende onderdelen direct bereikbaar.
Wat je in het ontwerp ziet
Een duidelijke informatiehiërarchie: eerst het huidige termijnbedrag en inzicht in verbruik, daarna facturen en contractdetails. Aanvullende uitleg en veelgestelde vragen staan op dezelfde pagina.
Dynamische tarieven begrijpelijk maken.
Context
De inzichtenpagina toont hoe de energieprijs gedurende de dag verandert. Klanten kunnen schakelen tussen elektriciteit en gas, een periode selecteren en een contract kiezen.
Wat je in het ontwerp ziet
Een oranje prijslijn maakt het dagverloop zichtbaar. De aanwijzer geeft een specifieke uurprijs weer. De bediening voor dag, maand en jaar staat direct naast de grafiek.
Een energiebestelling stap voor stap.
Context
Deze mobiele schermen tonen de leveringsstap van het bestelproces. De klant controleert het leveringsadres, kiest de woonsituatie en bepaalt de gewenste startdatum.
Wat je in het ontwerp ziet
De keuze tussen zo snel mogelijk en een bepaalde dag toont alleen de bijbehorende uitleg of datumvelden. De voortgangsindicator geeft de positie in het proces aan; de bestelsamenvatting houdt contract en maandbedrag in beeld.
Grip op laadpasaanvragen.
Context
Het zakelijke dashboard bundelt laadpasaanvragen in een tabel met naam, organisatie, ontvangstdatum, status en kaartnummer. Samenvattende cijfers bieden context boven de lijst.
Wat je in het ontwerp ziet
Filters en paginering helpen bij het doorzoeken van veel aanvragen. De twee ontwerpen tonen de ingeklapte en uitgeklapte filterbalk binnen dezelfde schermstructuur.
Van oriëntatie naar productkeuze.
Context
De homepage brengt stroom en gas, zonnepanelen en laadpalen samen in één herkenbare Coolblue-omgeving. Productkaarten, klantbeoordelingen en uitleg ondersteunen de oriëntatie.
Wat je in het ontwerp ziet
Op desktop krijgen productcategorieën ruimte naast elkaar. De mobiele variant zet inhoud onder elkaar en houdt acties, productvoordelen en sociale bewijskracht herkenbaar.
Van design naar code.
In mijn Design-to-Code-werkwijze vormt het ontwerp de brug tussen gebruikersbehoeften en technische realisatie. Ik werk interacties, componenten, responsive gedrag en visuele details zorgvuldig uit, zodat developers de ontwerpen consistent kunnen vertalen naar werkende interfaces. Daarbij zijn heldere specificaties, herbruikbare patronen en afstemming tussen design en development belangrijk.
Ontwerpaanpak en reflectie
De uitdaging, ontwerpkeuzes en volgende stap voor Coolblue.
Uitdaging
Energiezaken, bestellen en zakelijke laadpasaanvragen vragen ieder om een overzichtelijke interface binnen dezelfde merkervaring.
Analyse
De getoonde schermen brengen termijnbedragen, verbruik, uurprijzen, leveringskeuzes en laadpasstatussen in beeld. De informatie verschilt per taak.
Ontwerpkeuzes
De belangrijkste gegevens krijgen voorrang. Periodekeuze, voortgang en filters staan bij de informatie waarop ze betrekking hebben.
Oplossing
Vijf ontwerptrajecten tonen een energieportaal, dynamische tarieven, een mobiele checkout, laadpasbeheer en een responsive energiehomepage.
Toetsing en resultaat
De originele desktop- en mobiele ontwerpen en interactiestaten zijn beschikbaar. Deze case bevat geen geverifieerde gebruikerstestresultaten of effectmetingen.
Reflectie
Het naast elkaar bekijken van deze taken maakt consistentie in hiërarchie en bediening belangrijk. Een volgende toets kan onderzoeken of klanten hun energievraag zelfstandig kunnen afronden.
Samen iets moois maken?
Heb je een project, ontwerpvraag of idee? Ik denk graag met je mee.
Neem contact op