Online purchase experience


The Key



We used a Lean approach to redesign the online purchase experience around our customers. But skipping the user testing phase to save time led us down the wrong path.

In 2018 we decided to revamp The Key’s online purchase experience, which allows schools to purchase an annual subscription to our services.

We believed there was an opportunity to present our offer to customers in a much clearer and more compelling way. This would not only increase overall revenue, but also take some pressure off our sales team by enabling schools to self-serve rather than contacting us via phone or live chat.

What I did

Methodologies used

  • User interviews
  • Stakeholder interviews
  • User journey mapping
  • Prototyping / wireframing
  • Interaction design
  • Usability testing
  • Analytics

Research and discovery

We kicked off the project with a phase of research and discovery to gain more insight into customer behaviours and motivations. We wanted to really understand our customer and get a much deeper understanding of the experience schools have when purchasing our products and services. We also hoped to identify any opportunities to improve the purchase experience and increase our conversion rate.

In Nov-Dec 2018, I carried out phone interviews with 9 schools that recently purchased or renewed their membership. I also carried out stakeholder interviews with 10 people across all teams involved in purchase and renewal. We then combined these qualitative insights with insights from quantitative data related to purchase and renewal. This allowed me to map out the current customer journey and key pain points and other insights that could inform the solution.


Here is a screenshot of the online purchase experience before redesign:

Online purchase experience before redesign


My research found that many school leaders were confused by our online purchase experience. After viewing our offer, many phoned our help desk rather than complete the purchase online, to make sure they fully understood our offer, and to ensure that the prices listed were correct for their school.

The research also revealed that purchase decisions were rarely made immediately, and rarely by one person alone. We discovered that many school leaders make an initial visit to investigate what’s on offer, then discuss it with their colleagues and, once a decision to buy was made, return (sometimes months later) to make the actual purchase.


Customer journey map showing current purchase experience


Customer perception of current online purchase experience


Based on the insights from my research, I designed a proposed new online purchase journey, which would:

  • present our offer in a clear way, and ensure the purchase experience would work in a familiar way, similar to other e-commerce sites.
  • remove any blockers or frustrations, like requiring users to log in or register before they’re able to see the offer and prices.
  • support the way schools evaluate and purchase membership.
  • allow schools to make the payment online when they purchase.

We also defined an overall UX vision for the online purchase experience:

  • Schools will feel fully confident in making a decision and completing a purchase, upgrade or renewal online.
  • Users will get all the information they need, so they trust they are seeing the best available offer and price.
  • Our platform will support the shared and traditional processes and expectations of schools.
  • We will continuously optimise the journeys to maximise conversion

Prototyping and testing

Next, I built a fully interactive prototype of the purchase journey that we could use to test with users, to share our vision with stakeholders, and to communicate the intended functionality to the development team. I chose to use Axure as the prototyping tool because it supports complex interactions, enabling our prototype to closely approximate the actual experience users would have. It also allowed us to show what the experience would be for different types of customers, for example brand new customers vs schools who already had one service from The Key but were considering purchasing additional services.


Here is a screenshot of the prototype:

Prototype of new online purchase experience


I recommended that we do a round of user testing with the prototype before starting to build, to test the overall concept and ensure there were no significant issues that would cause users to hesitate purchasing online. However, the business decided to skip user testing and go straight to the build phase, so that the new online purchase experience could be released as quickly as possible and tested out in the wild.

Design, build and release

The prototype was used to build a technical proof of concept, which formed the basis of the actual functionality that was built and released. Our UI designer also used the prototype to design the actual look and feel.

New online purchase experience


The new online purchase experience went live in February 2020. We used Google Optimizely to A/B test it against the current experience. Google Analytics and Hotjar were used to track usage and conversion rates through the funnel.


After running the experience for 3 weeks, we observed that the new purchase experience was underperforming against the current experience. The new journey had a conversion rate to purchase of 0.5%, whereas the old journey achieved a conversion rate of 1.9%. We paused the experiment and designed and implemented some quick-win usability improvements based on user behaviour observed in Hotjar recordings. We then ran a second experiment in March 2020. After 10 days, we observed that the new journey was still underperforming against the old one, with a conversion rate of 1.2% against 2.5%. Based on this outcome, we agreed that larger UX changes to the new journey were needed for it to outperform the old one.

The UX team then carried out a round of usability testing with 10 participants (Feb 2020) to find out how users perceived the new online purchase journey and what was causing them to hesitate to buy. While the test found that users were able to move through the purchase experience easily, we did identify some issues that gave us the “why” for the low conversion rate we had observed.

Participants said they felt hesitant to buy because we did not give them enough detailed information about the services on offer, and because they didn’t fully understand our pricing and discounts. We also identified some usability issues that confused users or distracted them from the task of evaluating our offer and deciding to buy.

Based on the insights from the user research, my UX/UI team then created some radically different redesigns of the new purchase experience (April 2020). We proposed a different presentation than the “app store” model originally chosen. The new model would present a single service initially, rather than all services simultaneously. We believed this would better reflect how schools viewed our offer, and help simplify the purchase decision. However, we were not able to move forward wih the redesign immediately, as the business decided to press pause and prioritise other work.

Here is one of the redesign concepts:

Mock-up of proposed redesign


Takeaways and lessons learned

The project showed the value of prototyping and testing that prototype with users early on, and the risk of skipping this phase. Without early feedback on the solution from users, design decisions had to be based on internal assumptions and best guesses, and many of these were shown to be wrong as soon the functionality went live.

We could have avoided heading down the wrong path by testing and validating various options with end users early on. A multivariate test of different options would have been very useful as well in identifying the most effective way to present our offer to potential customers.