Back to projects pageBack to Projects
UX Audit & UI Implementation

Improving an energy provider’s online help center

Focus
UX/UI Design
Project type
Website
Year
2024

Introduction

Due to an NDA, I am unable to share specifics, but the project’s aim was to enhance the energy provider's online help center, reduce call center overload and improve online reviews.

The Problem: a Vicious Cycle

Users can’t find answers to their questions on the website
Overrun call center
Negative online reviews

Context

Key Facts

Project Type

Client UX/UI Project

Duration

3 Months / 2024

Roles / Responsibilities

I was the UX lead on this project, which included an in-depth UX audit (compiled with a colleague), numerous client presentations as well as the final UI implementation.

This project was developed while working at the agency, be water, my friend.

Toolkit

Desk research
Desk research
Hotjar, user research tool
Hotjar
Heuristic evaluation
Heuristic Evaluation
Figma and Figjam programs
Figjam & Figma

The Process

  1. Competitive Benchmarking
  2. Website Analysis (using Hotjar)
  3. Heuristic Evaluation
  4. Wireframes (mid fidelity)
  5. Final UI Designs
  6. Interactive Prototype (mid fidelity)

Deliverables

Arrow bullet point

UX Audit

Arrow bullet point

Wireframes (Help Center & FAQs)

Arrow bullet point

Final UI Designs & Prototype

Arrow bullet point

Developer Handoff

Understanding the problem

Competitive Benchmarking

Analyzing competitors’ and industry leaders’ websites, focusing on their FAQ pages and help centers, was really important in order to present the client with best practices.

UX Audit / Heuristic Evaluation

We analyzed the UX design of the energy provider’s current website, for both mobile and desktop, and covered topics like accessibility (using the tool AccessiWay), UX writing, navigation (using our findings from Hotjar) and coherent visual design.

Some heuristics I found very helpful in this process:

Arrow bullet point

Match between system & real world

Arrow bullet point

Consistency and standards

Arrow bullet point

Aesthetic and minimalistic design

Arrow bullet point

Help users recognize, diagnose, and recover from errors

Arrow bullet point

Help and documentation

Topics covered in the audit

Accessibility

Information Architecture

Navigation

UX Writing

SEO

Visual Design

Excerpt from the AccessiWay accessibility analysis

Results from an accessibility analysis, the categories that have been analyzed are 'Readability' and 'Graphics'. Both categories have very poor scores.

The Solution: reworked FAQs and help center

Screen Design & Prototyping

The final screen designs were the result of numerous feedback loops and discussions with the company’s marketing team, CEO and developers.

The screens were incorporated into a mid fidelity prototype in Figma that allowed for key interactions, such as dropdowns, accordions and hover states. The output was optimized to respect the client’s budget and to match the company’s design guidelines.

Arrow bullet pointArrow bullet point

Due to an NDA, I am unable to share the designs.

Key Elements of the Design

🎯 Design Details

Strong visual hierarchies

Clear navigation structure

Coherent categories

Search function

📂 FAQ Structure

The FAQs were reworked by the company based on feedback from the employees in their call centers; the design includes a search function and is focused on ease of use.

👋 Accessibility

Accessibility improvements were incorporated into the design wherever possible, unfortunately our efforts were limited by the company’s current brand guidelines.

📱 Mobile-First

All screens were designed with a mobile-first mindset, since our initial research (unsurprisingly) showed that a majority of users accessed the site via their mobiles.

Outcomes & lessons learned ✨

Results

The outcome of this project will be measurable through improved review scores on Google and TrustPilot.

We also recommended implementing a Net Promoter Score (NPS) strategy to measure design effectiveness, enabling the company to continuously enhance its service.

Balancing diverse stakeholders

One of my favorite aspects of this project was presenting our work to the client. Balancing diverse agendas of various stakeholders (company marketing team, CEO, developers, agency strategy lead) during these meetings and feedback loops was challenging, yet when maneuvered successfully, very rewarding.

The value of heuristics

Since unfortunately, incorporating user research was not an option for this project, I conducted a heuristic evaluation of the current website for the UX audit.

Heuristics provided invaluable guidance during this initial phase of the project, as well as for assessing the proposed solutions.

Accessibility guidelines

I also deepened my knowledge of best practices for accessibility and of the European Accessibility Act, which is coming into effect in 2025. This aspect of the project inspired me to prepare an ‘Accessibility in UX’ presentation for my team.

Continue exploring

Check out the next project