The goal
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
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
Competitor audit
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.
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.
UX audit & design
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.
User Testing
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.
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.
Research & ideation
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.
One additional area we looked at was creating a modular upsell & explainer template that can be used on any feature within MyO2. As an example above, Multisave was a feature that was lacking a detailed explainer of the feature and customers were entirely missing this prominent area. We used this as a way to ideate and design our modular template to see how it looks and performs on the product. The O2 design system also had interaction tokens and an animation style guide, we took advantage of this to add interactive elements to the experience.
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.
One additional area we looked at was creating a modular upsell & explainer template that can be used on any feature within MyO2. As an example above, Multisave was a feature that was lacking a detailed explainer of the feature and customers were entirely missing this prominent area. We used this as a way to ideate and design our modular template to see how it looks and performs on the product. The O2 design system also had interaction tokens and an animation style guide, we took advantage of this to add interactive elements to the experience.
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 made sure all library releases took advantage of changelogs and versioning so these last fundamental pieces were included in our final design system documentation.
We also fully accessibility tested and documented everything including anatomy of components and their component base, how to use and component variants.
We made sure all library releases took advantage of changelogs and versioning so these last fundamental pieces were included in our final design system documentation.
Conclusion & 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.