ROLE
WHAT I DID
I worked closely alongside the clients senior UX architect and their designers across the whole of the project for 5 months.
Between the two of us we created all the UX deliverables, some tasks were split and we worked on them separately, while other tasks were worked on jointly.
The teams alternated between presenting work internally in a war-room for the project at the agency and with clients at their head office.
THE APPROACH
The project was run in 5 sprints (concept and 4 themed sprints).
In the concept sprint we were split so that a designer and UX architect worked together. The other sprints were managed so that each UX and a designer could work closely together.
Video calls were held twice daily (early morning and EOP) when the teams were not together in the same building.
THE CHALLENGE
Over the last few years the O2 consumer shop had expanded organically through capability led initiatives and technical point solutions to make the experiences more immersive and feature rich. However alongside this, the increased complexity of the propositions, and new offers that were introduced, this had led to a fragmented and inconsistent journey.
"Now is the time to supercharge the current online shopping experiences, ensuring that all our key journeys meet the customer needs of tomorrow and trading needs of today."
The premise for this project was to “supercharge” the current online shop experience. We were tasked with doing this by:
Creating a toolkit of new or improved journeys and features that would improve the performance of the online shop experience
Revamp the site structure in order to drive customers more seamlessly to their desired goal
Improve and simplify page layouts and choice mechanics to increase conversion
Reimagine the look and feel - bringing the O2 brand world to life within the online shop
We needed to make a step change in the user experience and interface design of the online shop, increasing O2’s leadership position in ecommerce by improving the performance of key shopping journeys.
We also needed to provide O2’s trading and merchandising teams with the flexibility they required to drive performance whilst establishing a clear framework to keep the shop interface as simple and easy to use as possible.
In order to deliver this proposition for the development team delivering O2’s 2019 roadmap we needed to create a future-facing interaction design toolkit that could support a smooth handover in the given timescales.
objectives
Improved user journey flows: Travelling through the site should feel easy and be a breath of fresh air, enabling customers to find the content, products and services that are relevant to them with simplicity. The journeys should be as short as needed, whilst allowing users to explore further and deeper if they so wish.
A more “brand-led” user interface design: The new brand needs to flow through the site and bring O2 to life through great design, simple navigation, reduced complexity, an updated look and feel, alongside complementary animation.
Improved content presentation: Create modules that can accommodate more content and present it in an inviting way. Making text heavy experiences feel like they breath, are easily digestible, tell a story in their own right, whilst being persuasive to the next best action.
"We need to inspire customers through conversational fluidity, encourage choice & configuration through simplicity and, ultimately, enable them to buy products and services from O2 by removing the stress of purchase and through compelling persuasion tactics."
PROJECT APPROACH
The project was divided into three core stages - Imagine, Make and Grow. The grow phase was essentially a handover of the final deliverables to the client from which they could be deployed to the IA and build teams and finally into a newly developed DSM.
Imagine: Discovery and research and analysis, concept development
Make: UXD Sprints, testing sprints
Grow: Toolkit demonstration and handover
DISCOVERY AND IMMERSION
A kick off workshop led by the key project team and stakeholders with the clients allowed us to agree the fundamental basics for success for the project, the goals and objectives and how we could get there. A second discovery workshop followed that allowed us to garner information regarding research and analysis data, persona and other insights for the next stage.
RESEARCH & ANALYSIS
In this stage we created several outputs based upon information garnered in the discovery stage, we looked at O2’s competitors and mapped their shop and purchase funnel journeys, we also mapped O2’s current shop journey and created new shop personas.
CONCEPT DEVELOPMENT SPRINTS
After the research and analysis stage three concept briefs, detailed further below, were addressed across three sprints, followed by a fourth and final testing sprint.
THEMED UXD SPRINTS
Five key sprints were agreed for the UXD stage and these consisted of the following overall themes:
Sprint 1 - Look and feel and checkout screens
Sprint 2 - Product detail page and tariff pages
Sprint 3 - Product landing page and other landing pages
Sprint 4 - Upgrade journey pages and third-party pages
Sprint 5 - Favourite/wish list and global shop pages
CONCEPT DESIGN SPRINTS
Each of the three sprints were based on a key epic, with key journeys, considerations, pain points and opportunities that were applicable across the four personas (that we had already created). We used boards placed on the walls within the war room with this information on to steer us for each sprint.
Sprint 1: The fundamentals of the browsing experience - focusing on entry pages, navigation, filters, listings, cards and UI patterns
Sprint 2: The core elements of the shopping experience - focusing on the presentation and selection of offers, products, tariffs and services
Sprint 3: The key components of the buying experience - focusing on the basket, cross-sell, up-sell and critical moments in the checkout
CONCEPT DEVELOPMENT
Each day began with a briefing/kick off, followed by rapid ideation, a re-group and discussion of ideas so far, in the afternoon concept sketching and a re-group, followed by EOP keep/bin/work on sprint reviews. This structure was tweaked as we progressed and also varied according to when the key presentations took place.
SPRINT REVIEWS
Team reviews were used to review WIP and get steer and fed in from the core team. Key sprint reviews were used to take agreed ideas forward and refine where necessary. Decks were created at the end of each sprint and presented back to the greater client leadership teams.
THEMED UX/DESIGN SPRINTS
Five key sprints were agreed for the UXD stage as mentioned above. We had an extremely tight deadline and many stakeholders to which we would have to present to and get the work signed off with as quickly as possible.
As the project progressed we tweaked our project sprint plan as it became clear the sign off process was extending the project timeline. It also became clear the backlog did not include all the scenarios and that the project was not able to deliver some of the functionality we required. This meant we had to re-organise our deliverables in terms of scope and pull-back some of the initial ideas and ux work, stripping back some functionally and components where the new technical constraints meant these were not possible.
SKETCHES / initial layouts
Key areas were selected within the pages and these were either sketched out or I would quickly wireframe these up, print out, then sketch and add notes to them on the wall, where we could see the flow and mechanics more clearly. This then allowed us to see what modules could be reused more easily. Once selected we then created a library in Sketch that allowed us to reuse these across the project.
MODULES AND COMPONeNTS
A suite of components and modules were created for the project. These could be used throughout the projects across multiple pages, reusable elements that could be used time and time again. We had to take into account that these components and modules would be used in other areas of the site outside of the shop environment.
PAGE WIREFRAMES
By using the components and modules we had created we were able to construct pages relatively quickly once we had amassed enough of them. This allowed us to design once and deploy multiple times across as many pages as required. We presented back wireframes in three stages - internally with the core team, then to the design directors and finally to the client and stakeholders.
PAGE DESIGNS (MOBILE)
The wireframes were taken by the designers and mocked up, I would then go through the design clsoely as always with the designer before presenting back to the greater team (as highlighted above). Mobile was always the starting point and we knew we had some very difficult key modules to design and build that had to work especially well at this breakpoint.
PAGE DESIGNS (DESKTOP)
Desktop versions were constructed alongside the mobile version and again we had to ensure all the relevant content would work at the greater screen sizes as well as the smaller ones. The pages had to work just as well when some panels were removed when necessary as well as when new content would be added to specific ones. So an amount of flex was given to certain core pages that would be deployed in various states.