From user journey to prototype testing

Recently we carried out a series of 3 related projects for a client’s online communication that helped their design team move from explorative journey mapping to evaluating concepts. The overall process covered 3 stages and included participants from multiple countries.

Stage 1: Understand user experience & map their journey

The first project kicked off with the question of what a user’s general purchase journey looks like. The client wants to know what is driving their decisions and where the barriers are. 

We covered 5 countries in this first stage, conducting a survey first and then interviewing 15 users who had recent experience purchasing the product online. We showed images of pages the participants might have seen as emails, digital advertisements, webpages, or in-app on their phones or computer. 

From there we mapped out a 4 stage purchase journey (see image) from awareness to consideration, purchase, and enjoyment. Within each step of the journey, we identified both global and local insights that pinpoint the joys and frustrations people experience. These insights were summarised in ‘keep doing’ statements (green dots) and ‘start doing’ statements (purple dots) under each step to give the design team some indications of what they can do about each insight.

The output of this stage offered the client team a framework to think about the user journey in a structured way and to consider where their advertisements and website content support or resonate with their users and where it doesn’t. We noticed some of the findings raised additional questions from the team, and therefore a further investigation was designed for stage two.

Stage 2: Zoom in on detailed steps & spot the problems

In the second stage, we zoomed in further to look at a few specific pages within the general user journey created in Stage 1 and break down the user journey into small steps. This time we picked only 2 countries (from the initial 5) due to budget constraints. Also, we had a better understanding now of where the big differences were between regions.

We recruited a mix of users who were considering buying the product and users who recently purchased the product. They shared their screen with us while they went through the live website and thought aloud as well as answered our questions in a 30-min Zoom interview. We probed around why they did certain things like clicking back and forth between pages or skipping content in browsing.

In the end, we identified 5 sub journeys with more detailed steps. Each varies based on the user profile, location, and the product type they select. (see example above) 

The insights from this stage confirmed some of the hypotheses raised during the previous stage and offered a lot more details on what goes through a user’s mind when interacting with the information about the product and payment on the various pages. Based on these insights, we could write ‘how might we…’ statements to help the client team think about how the user experiences in these sub-journeys could be improved. 

Stage 3: Ideation, prototype development & testing

The third stage kicked off a few weeks after the second one. We started with a workshop with the design team to review the findings from stages 1 & 2. Together we agreed that the best use of the planned qualitative concept testing would be to try out some bold ideas – in particular around providing more detailed explanations and information during the journey. Smaller details of the design could then be tested in A/B tests later on.

Two weeks after the workshop, we worked closely with the design team in Figma and produced two research-ready clickable prototypes. Again, this time we ran the study in two countries, using Zoom interviews. For this study, the participants were asked to go through both the live website and the design prototypes (in alternating orders to avoid bias).

Even though we thought we had learned a lot from stages 1 & 2, our participants still managed to surprise us. One of the design alternatives, which we expected to perform well, received quite some criticism when compared to the live site. We managed to collect a lot of data that after analysis clearly pointed out why the users found this one new design difficult to use. Those insights gave the design team clear directions to iterate further.

Next steps: Concept modification and A/B testing

The client team is now taking all they’ve learned from this series of projects to make further iterations of design ideas that received criticism. The elements that worked well are being validated in A/B tests. Our work helped set up a framework for the design team to navigate the various steps in the journey from a user’s perspective and experience and guided the focus to where changes could make the biggest difference. The different stages in the research allowed STBY and the client team to truly collaborate in an agile manner and respond quickly to lessons learned with new designs and new research.