Alex Diaz – UI Design

End-to-end subscription plan sign-up journey

The project

Design an end-to-end process to sign up to a popular subscription plan Halfords Motoring Club, for loyalty customers

The solution:

An easy streamlined sign up journey where a user can create an account while purchasing a Motoring Club subscription.

Link to a working prototype

Research & Insights:

Userzoom (surveys)
I set up a few surveys to understand users needs and expectations regarding first impression of our pricing plans , and overall sentiment towards subscriptions plan

some of questions I asked:

  • Do you find the pricing information clear and easy to understand? Why or why not?
  • What are your first impressions of the pricing plans page?
  • If you manage your subscription plan online, can you describe what you think is a good experience to you?

The insights I took from the results allowed to create a design that will align with the users expectations

some keyInsights on expectations were:

  • Clear pricing
  • Easy to compare both options
  • The length period for the subscription
  • Information on what the user is getting in terms of offers, benefits etc…

Examples

It is a know good practice int he UX world to look for other examples of a similar product to understand users sentiment, needs and expectations , I looked for a well known and analysed key themes

Key themes found across many apps and subscriptions products:

  • Promiment call to action at the bottom after the plan benefits
  • Price and period clearly shown with the plan name
  • Benefits what is included
  • Plans are shown often in a linear fashion to compare

Prominent call to action
Clear description of benefits
Clear pricing

The user journey

Proposed user journey to sign up to the plan

The idea explained

  • User would see a prompt in key strategic places , such as discounted prices if they sign up to Motoring Club
  • Price, benefits and length are key information that users report to deem important
  • Users need to choose a plan, fill in basic details, confirm a valid email, after that an account is created, the user is ready to purchase the subscription in the basket

Key Features for the prototype:

  • Inline validation in fields as the user fills the form.
  • Email verification using common OTP (one time password) method
  • A prompt placed strategically across the site to sign up for a plan
  • A table comparing the free vs the premium option

Link to a working prototype

User Testing & Feedback

Usability Testing:

I set up a usability study to test whether users would complete the task, to sign up to a premium plan and see if they managed to add the plan to their basket, this is ideal , since they would be able to exercise their benefits in the same transaction at the same time of purchasing the plan.

Outcomes:

  • Participants reported to be a fast simple experience
  • Feedback was noted regarding the comparison interaction when looking at both plans
  • The basket notification about subscription added was well received

Screenshots for mobile:

Highlight discounted price to suggest sign up
Main step showing different plans
Comparison plan table
Email verification step
Welcome message when account is created

Conclusion

After initial launch we saw an increase in sign ups both for premium and free, customers at Halfords reported good feedback on the benefits offered, particularly the MOT voucher, and really liked the comparison option, they said they found it really easy to see the differences.

Overall it was a good experience to collaborate with different people in the organisation , product owners, proposition owners and other stakeholders.