UX Research  ·  UI Design  ·  Design System

ZEN Energy Case Study

Redesign to optimise current user experience and empower future business opportunities.

Published on 27 Nov 2021   ·   6 mins reading
Agency THE DISTILLERY   ·   Client ZEN ENERGY (All rights reserved)

TEAM
Product Manager x1
Project Coordinator x1
UX/UI Designer x1 (my role)
Engineers x 4
DELIVERABLES
Strategy
User research report
Persona
User flow
Information architecture
Wireframes
Interactive prototypes
UI library
TOOLS
Miro, Figma
HTML, CSS, JS

Project Overview

ZEN Energy in a renewable energy systems supplier in Australia.
‍

Challenges

1. Discover pain points for current website and redesign to improve user experience.
2. Redefine new user groups as the need of business growth and provide solutions for their journeys.

Process

For the initial user research, I conducted usability testing to understand the pain points of current experience.
For the new user groups, I used persona and user acquisition map to frame the design goals.

Then, I generated sitemap to understand where the user can go, crafted design hypnosis with wireframes, created clickable prototype for intuitive user experience.

At the end, I was able to validate with user to confirm the pain points are solved as well as validate with stakeholders to ensure the design goals are accomplished.

Now let's go deeper into each step!

Understand Problems & Frame Goals
UX Audit

Start by existing users, services and feedback.
As discovered, the existing website is a typical business website that features products and company information.

Pain point 1 - Complex actions
  • While comparing 2 products: at least scroll 3 times + 4 clicks.
  • While comparing 3 products: at least scroll 3 times + 6 clicks.
  • Need to click 'return' in each product comparison.
Pain point 2 - Non-hierarchical web content
  • Information hierarchy
  • Visual hierarchy
Questions:
Is the information interesting, easy to understand?
How does it guide user's attention?
How to define the importance and sequence of elements within a page/composition?
💊
3 key usability pain points were discovered
1

Find desired information over 6 clicks.

2

High frequency in clicking 'return'.

3

Overwhelming information

Clustering User Groups

Archetype users' characteristics and goals to represent the needs.

Through persona, we found some user groups have similar goals
👇
cluster 5 user groups into 3
🏠

Residential &
SMEs customers

💰

AXS 200 Leasers
& Investors

💼

Future Employees

How users complete each step of a user journey to reach an overall goal?
‍
Awareness  >  Consideration  >  Conversion  >  Loyalty
‍

Shape UX Strategy

3 key usability pain points were discovered and
3 user types are identified from the persona.

🎯 Frame Design Goals

Align with the established business goals, thinking with flexibility and sustainability for future business growth.

1

User interface optimisation

2

Storytelling

3

Showcase products and brand values

Design Thinking & Crafting
Shape the Sitemap
MVP by wireframing with hypothesis

Creating viable, functional, production-ready products that serve user needs at a minimum investment.

Feasibility study

Before heading into granular design solutions, reach out to developers factoring in technical constraints.

Design Testing & Iterations

Keep users front and centre to receive useful feedback.

💬 User Testing Feedback

The deeper we visit in usability testing, the more confidence we have in the final design.

Voice 1
‍
"On my mobile device, it is hard to navigate products on the product index page."
Voice 2

"It takes a while to find pages about company values."
Final deliverables after iterations

1.
The finial design achieves design goals in UI, storytelling and brand values across different devices.

Desktop Prototype >
Mobile Prototype >

2.
Compare to the old use case,
the new design optimises the user experience in learning products and the brand
and creates a better opportunity in business conversion.

^ Old use case

^ Final design

UI library

Established UI patterns & support the development of the design system and style guide.

Bridge the gap between design and development

Working with engineer team to develop UI, providing relevant source codes, animation effects, and code chops.

Problem-solving Values

How design makes contributions to driving product & business velocity.

< 6 clicks

Achieve User Goals Within 6 Clicks

Make the touch-points more accessible by optimising the user journey.

30% +

Increase 30% Users

Leverage the brand values to meet business growth.

0 ~ 1

Define Reusable Interaction Standard

Enhance brand recognition and team collaboration through the Design System.

Design Reflection

Contemplating on how to reach this point paves the way for future success.

😊
Liked
  • Collaborative and supportive team members and stakeholders.
  • Informative problems discovery.
  • My programming knowledge facilitates the design feasibility.
  • Design goals align with business expansion needs.
🌿
Learned
  • Qualitative analysis and knowledge share among stakeholders.
  • Think at scale while brainstorming.
  • Industry standards (such as WCAG 2.0) are applied.
🤔
Lacked
  • WHY analysis of each user process. It would be ideal if more the team members could reach a consensus on the result of WHY.
  • Gather more information from quantitative interviews (at least 6 interviews and 2 interviewers).
  • Insufficient UI validation and iteration.
👀
Longed for
  • Have another user feedback channel for the design analysis.
  • Optimisation between designers and engineers for UI validation.
  • Get more users testing for design iterations.