Process
Problem
The portal, built in 2015, can't catch up with the company’s rapid growth in 2019 and 2020 and results in customer complaints related to various UX issues, such as accessibility and content comprehension.
Goal
- Improve user experience about key features, e.g. submit reading online.
- Build a design library. (click here to see the Storybook)
Team
The team includes a Product Manager and 4 front-end engineers. I work with another Product Designer to build the design system.
Challenges
- Legacy tech architecture
- Lack of a central component library
- New brand style
Work with engineers
To kick off the project, I have a workshop with the front-end engineers and the product manager. We decide the best way to tackle this project is to rebuild the whole portal. I work with the engineer manager to present the case to the senior stakeholders and get their support.
Discovery & ideation
After we're aligned with the strategy, I use in-depth interviews, customer feedback analysis, Google Analytics, and Hotjar, to conduct research. Then I organise workshops to explore solutions.
UI design and component library
One of the main goals is to make the product future-prof. To achieve it, we need to create a centralised library. I use this project to test the application of the new brand style to components and templates.
We tackle the issues of inconsistency, accessibility and information architecture. The old account section is transformed into a new product with better usability and a clean look and feel.
The images below show comparisons between the old (left) and the new design (right). From top to bottom, these product features are:
Meter readings screen
The new design:
- Improves accessibility.
- Provides clear, well-structured information to prevent errors.
Renewal screen
The new design
- Creates clear hierarchy and local navigation for a large amount of content. It is because, based on the research, our customers prefer seeing all the information on one page.
- Introduces a new card component which displays the information more efficiently and elegantly.
- Allows adding more products.
Result
Impact
- A new portal enables the customer to manage their account, e.g. submit readings, make payments, set up Direct Debit, etc. It reduces time spent on customer service and operational costs.
- The successful first step to building future products with a centralised library (Storybook).
