About the project
The aim of this project was to enhance the discoverability of tickets, offers, and content on Priority, the loyalty app for O2.
I was the lead designer on this project from 2021 to mid-2022. Along with a UX designer and a junior designer, I collaborated with the product owner, BA, Strategist, head of Data and Analytics, and content authoring team.
While working on the project, I introduced the lean methodology and shifted our approach towards outcome-focused mindset instead of feature-based.
In addition to this, I created the new art direction and visual language while maintaining and updating the existing design system. I stopped working on the project midway through the first development phase.
A new process for O2
We used a lean approach for this project, with a hypothesis, design, test, learn cycle. This was a change from the double diamond process previously used, and although we preferred it, it was a challenging transition for the team.
An overview of the existing experience
Explore, tickets and offers
The Explore page contains fixed sections, with no ability to add companion text to headlines for context.
Nothing breaks the pace and momentum of both the Tickets and Offers page, as they are just lists of cards containing all rewards available. The filters at the top are rarely interacted with.
Existing preference capture
During onboarding, users will be asked to add their personal interests. Thereafter they can find it in the My Priority page.
Initial research and insights
Working with the data and analytics team, the content team, and the O2 community, we concluded our learnings into the following:
Low interaction with new content types
As the app's architecture is optimised for older content types, articles and videos appear less frequently. As a result, their click-through rates are lower.
A new section on the homepage saw increases of +10% click through rate
During a recent Hackathon, we added a section on the homepage called "For You," which uses customer preferences to serve relevant content. This experiment went well, achieving the success metric of a 5% increase in conversion, and we received positive feedback from customers.
Content isn’t relevant to customers
The hackathon was just the first step in improving relevancy, there was still work to be done. Through app store reviews, in-app Medallia surveys, and talking to customers via the O2 community forum, users still said that they struggled to find content that was relevant to them.
We’re not learning enough from our users
A huge focus that I identified was to improve the way that we learn from our customers. Where can we get regular feedback on the experience? What data can we use to to learn about what customers want in the app? And what other channels can we use to diversify our research?
Surely the content just isn’t good enough?
Well, yes that could be the case, and the partnership team were working on this. However, it can take the partnership team over 6 months to gain new rewards, so we were given the go ahead to investigate this problem from a design point of view.
Take the insights, frame the problem
From the insights gathered in the initial research, we formulated a problem statement.
Outcome we’d like to achieve
Customer impact
Priority customers are able to enjoy more relevant rewards and experiences.
Business impact
Customers value Priority more highly, and therefore are more likely to retain with O2.
Initial hypothesis statement
Understanding the problem and the outcome we’d like to achieve, we defined an initial hypothesis to get us started.
Challenges & opportunities
iOS ahead of the other platforms
Delivering the new experience on three platforms was the goal, but staged releases were possible because of the iOS team's early start compared to Android and web teams.
Let’s improve the way we capture users preferences
After the hackathon, we had a temporary solution to capture the user preferences using SWRVE, but it was limited. By natively building into our product, we could have more freedom to create, adapt and remove preference tags.
O2, meet Virgin Media
The merger between O2 and Virgin Media caused multiple issues including, releasing the technology partner that provided the all of the developers for O2, meaning we needed to hand over all of our work to a new tech team. We also needed to ensure that our designs could support an easy transition if the branding changed.
Talking to our customers more frequently, at different points in the journey
I saw an opportunity to set up a continuous learning programme, that wouldn’t just rely on in-app surveys and community forums for our research. How about visiting the O2 stores and talking to customers at the point of purchase?
Landscape & lateral analysis
To identify common patterns and areas for improvement we conducted an analysis of various competitors. Additionally, we examined laterals that shared similar content to ours. The key takeaways from our analysis was that not many apps segregate their architecture based on content type, which was our hunch. Additionally, we observed that some apps have a 'For You' tab for personalised content.
Reviewing our existing taxonomy
As the naming and tagging mechanic was a fundamental part of the way users discovered content, we wanted to understand the current performance, and spot some opportunities to improve.
What does the data say?
We found out that generally there was low interaction with the filtering system. We could also see the frequency at which each tag type had been used.
Card sorting exercise to map the category names
We conducted a card sorting exercise using Optimal Workshop to evaluate the appropriateness of our existing tagging system for the app's content. Using in-app messages we recruited customers to help us with a card sorting exercise. This exercise was also appropriate for non-users, so we also recruited friends, family and colleagues. The key take aways were that our current system was outdated, and we identified specific tags that need to be added, and some to be removed, to fit the current content.
Stakeholder workshops
By utilising the data obtained from the card sorting exercise, we partnered with multiple stakeholders and conducted a series of workshops to develop a new and improved taxonomy. We also addressed the requirement for the system to be flexible, allowing us to modify the tag names as needed within the CMS.
Imagining the new architecture with high fidelity wireframes
We used high-fidelity wireframes to envisage how the app would appear with a new architecture. Regular workshops with stakeholders enabled us to share our new ideas, obtain feedback, and identify requirements.
‘For you’ gets it’s own page
The sponsorship (ticket) team expressed some concerns to the new architecture, particularly the consolidation of tickets and offers, which they believed would obscure the tickets. Taking this feedback into account, we continued to iterate and regularly shared our progress with the sponsorship team. Despite several rounds of revisions, our preferred option was still to consolidate the tabs. However, we made sure to give priority to this concern during our UAT testing.
Experience versioning
The flexible header adjusts to different variables, including the customer's length of time on the app, customer segment type, day of the week or season, and whether the user has submitted their preferences, among other factors. We also wanted to add moments where users can feedback on the app and experience when appropriate
A new home for ‘Exclusive perks’
We moved the 'Exclusive perks' feature from the ‘Explore’ page to the 'For you' page, where it is now prominently displayed in the header for when Priority send custom rewards to their customers.
How should users filter content on the ‘Discover’ page?
To help users easily find the content they are interested in, we added a new filtering mechanic to the ‘Discover’ page. We went through many iterations, discussing with multiple stakeholders throughout.
Opportunity for improved customer learning, with a more in-depth preference capture
Using the research done in the tagging exercise, we redesigned the preference capture process. We could directly link this to the filtering mechanic on the ‘Discover’ page, and we intentionally wanted the interaction language to feel similar.
Testing the wires
Goal
To get feedback on three options for the filtering system, to see if users understood the preference capture, and to identify any problems with the architecture changes.
What happened
Our UX designer ran this process. We recruited customers via an in-app message on the app. The customers were taken through the Figma prototypes in stages, and asked for feedback along the way.
What we learnt
Generally, we got good feedback on the usability. When we asked them about the consolidation of the tickets tab, the feedback was positive. They preferred option 2.
What next
This feedback was crucial, as it gave us the evidence we needed to continue the consolidation of tickets. We shared this with the sponsorship team and agreed to proceed the experiment.
Generate excitement with depth, light, and spectacular imagery
Due to the magnitude of the changes we made, we needed to ensure our decisions were future-proof. As a result this project was the first to introduce the new design direction I had been developing in parallel with this project.
Paginated scrolling
Paginated scrolling on the ‘For you’ page has been designed to increase the presence of the selected offers on the page. A common pattern in apps today, we felt it was a good solution to create a hierarchy between the content on the ‘For you’ page and the ‘Discover’ page.
An adaptive background
By using one author-able asset, the content team can easily modify the background in the CMS to create different themes.
The anticipated brand change resulting from the O2 Virgin Media merger can be quickly accommodated with minimal effort to update the visual language and styling.
To theme, or not to theme
To elevate the user experience to a more premium level, I incorporated the darker theme from the visual design direction exercise into the project. Instead of implementing the app's light/dark theme feature, I opted for a single theme.
The added value of having two themes was deemed insignificant compared to the cost and effort required for development and maintenance.
Defining new interaction language
The high fidelity wireframes proved to be valuable during this stage, as they helped us establish a clear hierarchy for language used in buttons, tags, icons, etc. However, the design work still needed to be done.
As the new interaction language needed to be implemented into an existing system, I took on the responsibility of ensuring that all design decisions were made with careful consideration of this fact.
Opportunities to gather more feedback from users
To improve the experience of gathering user feedback within the app, we designed components that could link into our feedback tools. Some components could remain in the app permanently, while others would only be available when needed. These components would work in conjunction with SWERV and Medallia to ensure an effective feedback system.
Accessibility
I previously conducted workshops and presentations to the Priority teams on enhancing app and web accessibility. I persuaded the team follows the web accessibility to AA standard, an appropriate standard for our type of experience.
During this phase, I was accountable for ensuring that the visual design complied with the appropriate contrast levels, interaction affordances, keyboard accessibility etc.
Throughout the project, I gained valuable insights into native app accessibility. By collaborating closely with developers, I ensured accessibility was a key focus, while also learning about the native app controls and tools at our disposal.
Validating the designs
Key learnings
Intercept users to prompt them to update their preferences
Consider inclusion of locality to filtering system
Design in app module that would allow users to specify missing interests
Continue application of new visual design given majority preference
We used this feedback to refine the designs and decided to build an MVP for live testing.
Defining an MVP
We evaluated the tools and components at our disposal to determine the most efficient and cost-effective method for validating our hypothesis. Since we were implementing significant design and structural changes, we understood the importance of preserving moments of delight if they were critical to the user experience. We recognised that large design changes could be met with resistance if crucial details were overlooked.
To address this, we leveraged as many existing components and tools as possible and made minor modifications to create a viable plan for deploying the solution.
Documentation
Since the majority of our team was working remotely and the iOS, Android, and web teams were starting the build at different times, it was important to have thorough handover documentation.
I had previously established a successful documentation process with the developers, and we found a good balance between providing detailed information and keeping the handover process efficient.
Together with the developers, I worked to improve their Figma skills, resulting in documentation that focused on behaviour and logic details, rather than just dimensions and measurements, which can be easily inspected in Figma.
Design system versioning
To accommodate the different starting times of the development teams and the changes made to the current components in the system, it was essential to maintain both the old and new versions active in Figma. Working closely with the developers, I created a Figma system that enabled designers to easily access and work with both versions.
It’s gone live, right?… Right??
Well, not yet. I’m as eager as you to find out what will happen to this project. Rumour has it that it's set to be released any day now, so as soon as that happens, I'll be sure to update this section with nothing but glowing reviews about how it was the most brilliant thing since sliced bread.
Project impact
Although we’re waiting for the experiment to go live, the project was still impactful:
Design system structure
Design system has had major improvements through this process. I worked hard with the engineers to find a better structure for our styles and components.
The experience is far more accessible
The app and website is now more accessible — the contrast levels have increased, interactivity has great affordances, and accessibility is a key topic within the team.
Outcome-focused projects
The team is now more focused on outcomes, rather than outputs. Every project we now tackle goes through a rigorous briefing process to understand the why.
Content team artwork has improved
Working with the content team has improved their standard of artwork, and the app looks much better for it.
QA process
There is now a structured QA process to ensure we have a better alignment between design and development, and we’re testing the right things at the right time.
And I learnt a lot!
Strategy-less decision making
Problem framing is really difficult without the right access to a clear strategy. This is something that we were working on in the background, along with the improvements to our design process. But many times I found it difficult to make design decisions without the north star to aim for.
Recruiting for test participants
I hadn’t been involved in the recruitment of users for testing before, so it was good to understand the difficulties. I learnt about the pros and cons of using incentives to access users and about the different channels for requesting for users.
Leading a redesign, start to finish
While I have participated in creating new visual design languages from scratch before, this was the first time I led the entire process. I gained valuable insights on how to bring structure, estimates, and timeframes to what can often be an unstructured process.
Collaborating with the content team
Collaborating with the content team was integral to this project. I learnt so much more than I have done on previous projects by creating a good relationship with them, consulting in the early stages, and involve them in concept workshops.