Objective
Working with VCCP, for client O2, I was tasked with two objectives. The first being leading design on overhauling the user experience within the My Account area and second was building & documenting a new agnostic design system in Figma.
Research methods
Competitor audit, Personas, A/B testing, Accessibility audit, Documenting & Design Systems
The Team
Design Director, Project Manager, Product Owner and 2 Designers
How I helped
I conceptualised and refined how a modern look and feel can benefit the My O2 portal and it's customers whilst creating new solutions for pain points. Eventually leading to a production build and a shiny new fully agnostic design system.
We continuously worked in collaboration to research, ideate and validate improvements as well as input new ideas
The first task we set out in the project was performing a competitor audit to see how we can improve the overall user experience on my account, as well as establish a starting foundation in integrating new & innovative ideas. We heavily researched and documented not just the telecoms sector but also other sectors and then pulled in journeys and visual data into a group ideation board which we thought would be insightful for us.
We continuously researched and ideated better and simpler ways to use the product. Working always as a team we took part in audit workshops, created moodboards, UX audit boards and kept updating our competitor analysis & testing results board, always adding comments as a group as we went along.
UX Optimisation & Kicking off The Design Phase
The account area in MyO2 is quite overwhelming, with many areas and sections covering many types of customers and scenarios. The challenge was definitely there, but ultimately we knew that the first priority would be to audit the experience to have consistent UI that is always recognisable and accessible no matter where you are in the journeys.
Majority of the product runs on a card and container atomic design system, improving the way these 2 elements look and behave across mobile and desktop allowed us begin creating a simple & improved user experience across all areas.
Majority of the product runs on a card and container atomic design system, improving the way these 2 elements look and behave across mobile and desktop allowed us begin creating a simple & improved user experience across all areas.
Taking advantage of Quantitive User Testing to get rapid results in validating our design decisions
To make sure that our new user experience propositions will perform as we intend, we thoroughly tested using unmoderated user testing all of our design routes. This includes full pages, cards & content, interaction styles and more.
The above example demonstrates how we face an experience issue where users were not interacting with the mobile component of tabs. So to solve this problem we design multiple solutions to fix this issue and then tested them with users to see how they performed. We continued to perform similar tests for many design iterations to ultimately improve the user experience of the product.
The above example demonstrates how we face an experience issue where users were not interacting with the mobile component of tabs. So to solve this problem we design multiple solutions to fix this issue and then tested them with users to see how they performed. We continued to perform similar tests for many design iterations to ultimately improve the user experience of the product.
The main flaw with MyO2 was being very inconsistent, which in turn caused confusion with customers when navigating the experience.
During the design phase our primary goal was breaking down all areas and introducing recognisable components.
During the design phase our primary goal was breaking down all areas and introducing recognisable components.
Building
the Design System
the Design System
The last phase of the work involved a full UX overhaul of components and port of the Oxygen design system into Figma. Being part of a 4 person squad with one being a lead, we created an agnostic and boolean based atomic system in which all future users of it can create, branch and iterate components as they create pages and content. The components were all derived from tokens which attained all styles including colours, text, radiuses, elevation and more.
We also fully accessibility tested and documented everything including anatomy of components and their component base, how to use and component variants.
We also fully accessibility tested and documented everything including anatomy of components and their component base, how to use and component variants.
Conclusion & Project Handoff
In conclusion, this project was one of the largest and most intense as it delved into almost every element of UXUI design from research, ideation, accessibility to full design system creation and design documentation.
The project was very rewarding knowing we've heavily improved the user experience on a product that lives in a sector that can be notorious for customer facing issues. The goal here was to create a simple, recognisable & accessible experience which I believe we successfully done so due to an incredibly friendly, positive minded & professional team.
The project was very rewarding knowing we've heavily improved the user experience on a product that lives in a sector that can be notorious for customer facing issues. The goal here was to create a simple, recognisable & accessible experience which I believe we successfully done so due to an incredibly friendly, positive minded & professional team.
The Results
✓ The O2 Design System has been deployed and has sped up new product creation
✓ Increased engagement in account & billing
✓ Accessibility improvements throughout the product
✓ The O2 Design System has been deployed and has sped up new product creation
✓ Increased engagement in account & billing
✓ Accessibility improvements throughout the product