I was hired by Pact Coffee to analyse and improve their subscription funnel. Following a previous website redesign, Pact noticed a significant drop in the number of customers completing their coffee subscription sign-up process.
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)
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