Coolblue
From an energy account overview to a clear checkout. Five projects focused on energy, insight and self-service.
- Role
- Interaction & Visual Designer
- Focus
- Digital products & self-service
- Selection
- Original designs from my project archive
Figma · Sketch
Energy Portal 2.0
An overview of energy usage, instalments, invoices and contract details. The customer portal combines the essential account tasks with clear navigation.
Dynamic pricing
Hourly energy prices shown in a line chart. The design includes electricity and gas selection, period controls and an hourly price tooltip.
Checkout
Two mobile delivery-step designs: start as soon as possible or select a specific date. The progress indicator, contextual fields and order summary support the decision.
Charging & Cards
A business dashboard for card requests, with summary figures, filters, request status and pagination. The two screens show collapsed and expanded filtering.
Coolblue Energy homepage
Desktop and mobile designs bringing electricity, gas, solar panels and charging stations together, supported by customer reviews and product information.
From design to code.
My Design-to-Code approach connects user needs with technical implementation. I define interactions, components, responsive behaviour and visual details so developers can translate designs into consistent, functional interfaces. Clear specifications, reusable patterns and collaboration between design and development are central to this process.
Design approach and reflection
The challenge, design decisions and next step for Coolblue.
Challenge
Energy management, ordering and business charging-card requests each need a clear interface within a consistent brand experience.
Analysis
The screens show instalments, consumption, hourly prices, delivery choices and charging-card statuses. The information varies with each task.
Design decisions
Key information comes first. Period controls, progress and filters sit alongside the information they affect.
Solution
Five design projects cover an energy portal, dynamic tariffs, mobile checkout, charging-card management and a responsive energy homepage.
Validation and outcome
Original desktop and mobile designs and interaction states are available. This case provides no verified usability findings or measured impact.
Reflection
Reviewing these tasks together highlights the importance of consistent hierarchy and controls. A next evaluation could examine whether customers can complete their energy-related tasks independently.
Let’s create something great together.
Have a project, design question or idea? I’d love to think along with you.
Get in touch