Pact Coffee Subscription

Research

After comparing Pact's old and new websites I hypothesised the main pain points and UX issues in the subscription process. We then agreed it would be best to try to validate the assumptions through usability testing.

‍

I set up remote usability tests for the existing website using Userlytics. We tested the subscription process with five users on mobile and five on desktop. Pact's previous website was also tested so we could attempt to validate the areas that had performed better previously.

In addition to the usability tests, we also asked the Userlytics participants questions about their coffee drinking habits and level of knowledge to add context to each test. Users were also asked to complete a card sort to help us determine which attributes of a coffee they found most and least important and appealing.

The main observations from the usability testing were:

• Most users were confused by the coffee menu step. Some users only understood the options after they had selected 'See more' for each option
• Many users didn't understand the subscription upgrade step
• Contrary to our assumptions, the new accordion layout was helpful for the user - especially in summarising the overall steps. However the horizontal numbered steps on mobile in conjunction with this layout proved confusing
• Users often returned to a previous step to check their choice and didn't seem to notice or use the order summary sidebar (desktop)

‍

Design

I sketched out new layouts for each step making the following main changes:

• Each step had clearer choices with active states and also a button to move on to the next step (previously choosing an option would quickly move the user to the next step)
• The title and helper text for each step was made more clear, concise and direct e.g 'Choose a coffee range' instead of 'Which menu should we send you coffees from?'
• On mobile, I tried to fit more options into the viewport at each step to give the user clearer choices
• The information from the back of the coffee menu cards, which was found to be more useful in previous testing, was consolidated into the front of each card as primary information
• The information across menu cards was made more consistent in terms of language and ordering, to try and help users scan and compare the coffee ranges more easily
• The upgrade step was made clearer by giving the user two distinct choices and detailing the benefits of upgrading. Previously, there was little clear benefit, with a small button to the side of the user's existing coffee selection

Next, I created prototypes in Figma for mobile and desktop.

Each prototype was then tested remotely with five users, via Userlytics. The following observations were made:

• Users read through each step more carefully, selecting each option as they considered their choice. Few users went back to correct a misunderstanding or error
• The new layout used in the coffee range menu cards worked well and communicated the benefits and attributes of each range more effectively
• The delivery frequency slider was used intuitively by all users, with no issues
• Users still wanted to see more information about each coffee in the 'Your first delivery' product listing
• The wording in the upgrade section still slightly confused users and didn't persuade anyone to upgrade
• Some users didn't fully understand the quality score for each coffee

‍

After the first round of usability testing I iterated each design to include:

• Product cards that flip to reveal more detailed descriptions of the tasting notes, sweetness and bean variety of each coffee
• Clearer wording describing the benefits of upgrading coffee menus
• Clearer labelling for the quality score and taste profiles of each coffee
• Clearer signposting to the 'First coffee delivery' step and more clearly describing that the customer would be sent varying coffees in the Select and Micro Lot plans

‍

‍

‍

The final designs were agreed and sent to the Pact development team. The new design is set to be A/B tested in early April 2020.