top of page
O2 | Billing flow
2018-2019
Brief
Create an interactive experience that gives customers a seamless entry point into O2 service (via My O2), providing new and returning users with the essential information they need, at a glance, and adapting to their needs throughout their relationship with O2.
​
The brief developed to take into account a holistic view of user journeys to ensure that the My O2 homepage and My O2 billing journey flowed seamlessly.
My role
I was involved in the UX/UI on this project and I was tasked with working alongside a UX designer to prepare the Billing Journey for user testing.
​
-
Worked alongside O2 team, including head of design, BAU's, developers and project managers throughout
-
Got in involved with creating the wireframes
-
Creating a user flow
-
Update the UI design throughout
-
Built prototype of Billing platform and write a test script
-
Conducted comprehensive live user testing session
-
Gather and sort using affinity mapping
-
Provided future recommendations
-
Update designs from the recommendations found in the user testing
Wireframes
User flow & prototyping
A User Flow was created to show the path taken by a prototypical user on the O2 website or app to complete any Billing Journey task. The objectives are at the fore front of this task to ensure the user can access all the essential information they need, at a glance.
I created a high-fidelity prototype, following the user flow and wireframe that were created beforehand, to prepare for the usability testing session. This also allowed for a third check through of the journey to ensure we hadn't missed any part of the journey out.
User testing
To ensure the UX/UI is user friendly as well as ensuring the copy is clear and easy to understand, we conducted a usability testing session using an external testing company using their facilities.
We created a test script off the back of the user flow and prototype, which was explained to testing company. I worked closely with them to ensure the testing session ran smoothly and that the participants followed a specific evaluation.
Affinity Mapping
During the session, affinity mapping was used to organise/sort the feedback to then draw connections between these individual elements, join the dots and develop new and deeper insights. It helps define the problem(s) and develop potential ideas for solutions.
Overall, participants welcomed the new designs as providing a clear, clean and contemporary approach to billing.
​
Participants perceived the features/functionality to be largely similar to the current website and app.
Key takeaways
The wording "Renewal" caused a lot of confusion
​
Some participants had difficulty finding details of their charges and misunderstood the purpose of the + icons
Participants spotted the different bill statuses (IE. no charges, paid and overdue) But there was uncertainty over the meaning of "Settled"
Revised UI designs
Following the key insights we gathered and recommendation made, I tweaked the UI design and copy. Keeping the objective of the interface in mind by keeping the design clean and clear to allow the important information and messaging to be clearly visible.
Each aspect of the users account has a clear message to either reassure the user or allow the user to action with a warning message.
In order to reinforce the essential information and messaging, we used UI motion. This draws the attention of the user and highlights this information in an easily digestible way.
​
Here is one UI animation I created, which appear once the user opened their My O2 account. The task of the UI motion used here is to draw your attention to the roundels, which indicated the amount of usage left.
UI Interactions
bottom of page