How can a complex energy self-service portal become simpler and more accessible?
Energy customers use self-service portals to manage contracts, billing, and personal data.
The existing portal was functional but difficult to navigate and not fully accessible.
In my master’s thesis, I redesigned the portal to improve clarity, accessibility, compliance, and scalability for multiple energy providers.
Role: UX/UI Designer, UX Researcher
Type: Self Service Portal (Website)
Date: 2025
What were the main challenges of the existing portal?
Unclear hierarchy, information overload, and weak navigation created a disorienting experience for users.
Accessibility standards were not fully embedded, creating structural barriers rather than inclusive interactions.
The system was not built for multi-brand scalability, limiting flexibility across different energy providers.
Real user analytics data was not accessible due to security and data protection restrictions.
I combined Heuristic Evaluation , Accessibility audits, and User behaviour analysis. This allowed me to identify structural weaknesses in navigation, hierarchy, and compliance with WCAG and BFSG standards. The analysis revealed a consistent pattern: users were not blocked by missing features, but by cognitive overload and unclear structure.
Users need stronger orientation and progressive disclosure.
Too much information increases cognitive stress.
Accessibility improvements benefit all users, not only specific groups.
Consistency across interaction patterns increases trust.
These insights directly shaped the redesign principles.
Before moving to visuals, I focused on structure.
I redesigned:
Information architecture
Navigation hierarchy
Task flows
Dashboard prioritization
Low-fidelity wireframes helped validate structure without being distracted by visual details.
This allowed fast iteration and structural improvements early on.
After validating the structure, I developed iterative high-fidelity prototypes in Figma.
The focus was on:
Clear visual hierarchy
Improved contrast and accessibility
Simplified dashboard layout
Consistent interaction components
After redesigning the portal, I reassessed my prototype using the same heuristic and accessibility criteria applied in the initial analysis. This ensured that improvements were measurable and not purely aesthetic. While navigation clarity and structure improved significantly, the evaluation revealed the need for further refinements in visual prioritization and interaction feedback. These insights guided the final iteration of the design.
After validating the structure, I developed two iterative high-fidelity prototypes in Figma.
The focus was on:
Clear visual hierarchy
Improved contrast and accessibility
Simplified dashboard layout
Consistent interaction components
I found a solution!
The portal needed to support multiple energy providers while maintaining a consistent user experience.
Instead of designing separate versions for each brand, I developed a flexible white-label structure based on reusable components, modular layouts, and brand-independent interaction logic.
Design tokens for colors and typography allowed visual customization without affecting usability or accessibility standards.
This approach ensured scalability, reduced future redesign effort, and maintained a coherent experience across different brand identities.
To validate the design, I conducted moderated usability interviews to evaluate how users interact with the redesigned portal. The results showed generally positive usability, while also revealing areas that required further improvement.
11 participants in moderated usability interviews
3 key tasks tested (meter reading, bill simulation, address change)
Average SEQ score
UMUX-Lite score
This project taught me how to work with limited data and still derive meaningful insights for design decisions. It also helped me understand how to balance personalization, accessibility (BFSG/WCAG), and system consistency when redesigning a large-scale platform.
How to conduct a realistic UX analysis even without direct access to analytics data
How to approach the redesign of a complex system and collaborate with different stakeholders and teams
How to design a personalizable system that remains accessible and compliant with BFSG and WCAG standards
©2026 by PH. All rights reserved.