NextEnergy Enrollment flow

UX/UI Design

This four-step sign-up flow was crafted with clarity, trust, and conversion in mind—striking the balance between persuasive content, accessibility, and user control.

As the UI designer for this project, I focused on creating a progressive and frictionless path from user interest to commitment, based on research-backed patterns in form usability, cognitive load reduction, and mobile-first design.

A clean, mobile-first enrollment experience designed to turn interest into commitment in under 2 minutes—maximizing usability while maintaining trust and transparency.

Services

End-to-end UI design

In collaboration with

Digital Sparks

Enrollment Structure

The enrollment journey is segmented into four progressive stages:

  1. Step 1 – Offer Calculation

  2. Step 2 – Personalized Offer Overview

  3. Step 3 – User & Payment Details

  4. Step 4 – Confirmation & Summary

Each step is optimized for simplicity, user confidence, and momentum. Below, I break down the core UX decisions for each stage.

Step 1: Bereken je Aanbod (Calculate Your Offer)

Step 1 - Calculate your offer
Progressive Disclosure

The flow begins with a single input field—postcode + house number—minimizing initial friction and immediately guiding users into the process.

Focused Interaction

The absence of navigation distractions reinforces a single goal and heightens user attention.

Trust Anchors

Government-related phrasing (“inclusief overheidskorting”) builds confidence from the first screen.

Microinteractions

Input fields are optimized for autofill and auto-focus, reducing effort and increasing speed on both desktop and mobile.

Rationale

This step reflects UX best practices by reducing cognitive load and employing a “foot-in-the-door” technique, where minimal initial interaction increases the likelihood of completion. Starting with low effort inputs builds user momentum and trust quickly.

Step 2: Je Aanbod (Your Personalized Offer)

Step 2 - Your Personalized Offer
Side-by-Side Comparison

Users are presented with fixed vs dynamic energy plans, with clearly visualized cost benefits.

Persuasive Hierarchy

Data-backed claims (e.g. “34% goedkoper”) and star-rated reviews from TrustPilot boost the credibility and appeal of the dynamic offer.

Clear CTA

The next step button is visually prominent and contextually placed, allowing users to continue without confusion.

Color Psychology

Carefully selected contrasting accents emphasize price advantages and build visual continuity with brand identity.

Rationale

This screen blends emotional reassurance (through testimonials) with rational incentives (through comparative pricing), applying dual-system thinking to support decision-making. The layout guides the eye from headline to value proposition to action, in line with the F-shaped reading pattern.

Step 3: Gegevens en Betaling (Details & Payment)

Step 3 - Details & Payment
Single-Column Structure

The entire form is built vertically to optimize for mobile, ensuring readability and smooth thumb interactions.

Logical Field Grouping

Inputs are categorized into personal information, contract preferences, and billing, reducing perceived complexity.

Inline Labels & Feedback

Microcopy supports users as they fill in fields, and real-time validation improves accuracy and confidence.

Data Clarity

Input masks (e.g. IBAN format) simplify financial entry and reduce input error.

Rationale

This screen exemplifies best-in-class form UX by prioritizing mental chunking, validation, and readability. The decision to separate this into its own step helps maintain momentum and prevents form fatigue.

Step 4: Bevestigen (Confirmation)

Step 4 - Confirmation
Full Data Review:

A clean summary view of all previously entered details enables users to verify inputs without scrolling.

Transparent Commitment

Key terms (e.g. dynamic contract details, cancellation policies) are repeated clearly to affirm trust.

CTA Closure

The final action is paired with visual feedback and a reassuring label (“Altijd opzegbaar”) to reduce any lingering hesitation.

Rationale

This confirmation step follows UX best practices by providing final clarity and control, while reinforcing a sense of completion. The repetition of trust messages and the absence of friction ensure conversion is a natural next step, not a forced decision.

System-wide Design Considerations

Mobile-First & Responsive Design

Each step was designed with responsive layouts in mind, particularly favoring vertical flow and large tap targets for mobile users. Performance, readability, and accessibility were considered across all devices.

Progress Indicators

A consistent progress bar (“1 • 2 • 3 • 4”) gives users orientation and agency throughout, subtly motivating them by showing how close they are to completion.

Visual Consistency & Branding

Brand colors (deep purple, energetic orange) are used to distinguish primary actions from secondary elements. Typography and iconography follow a system that is modern, clear, and universally readable.

Accessibility & Clarity

Form fields have strong color contrast and proper label pairing to support screen readers and comply with WCAG 2.1 AA standards. Text is concise and actionable across all steps.

Design Principles in Action

  • Simplicity: Each screen is focused on one core action to avoid decision fatigue.

  • Trust & Transparency: Upfront clarity on pricing and cancellation supports user autonomy.

  • Momentum: Thoughtful micro-interactions and feedback loops keep the user progressing without hesitation.

  • Visual Hierarchy: Typography, spacing, and color draw the eye to what matters most, helping users prioritize naturally.

Takeaway

This enrollment flow is a textbook example of user-centered design at work. By prioritizing usability, clarity, and motivation across the funnel, the experience successfully transforms a high-consideration product into a low-friction journey.

Previous
Next