Integrated Member Registration (IMR) was created to allow users to sign up to Co-op Membership within the Travel Insurance quote process.
Before IMR, in order to sign up to Co-op Membership, a user would have to exit their quote to find a membership link and sign up through that funnel.
We wanted to make it easier for Insurance customers to sign-up to become a Member within the Travel journey.
I co-led the design for this project, working across Insurance and multi-channel teams.
Brief
I work within Co-op's Insurance Team. My role as a User Experience designer is to create concepts and aid the design process for our products. This project was centred around producing a new and integrated design pattern.
Background
Considerations
As this was a multi-operational project, there was a lot to consider before beginning the design process.
Cross-channel collaboration
Our team would be working across business units and with our Insurance partner
Numerous prices on the quote page
We would need to show tiered member and
non-member pricing when including IMR, whilst still keeping the design accessible and easy to understand
Desktop and Mobile
As well as ensuring ease of use and accessibility, we also needed to consider how the new design would work on mobile
Sign up prompt
Users should have the option to sign up to membership if they're not a member, which would influence the pricing design
- Create a new and usable membership sign up pattern
- Design for various user journeys
- Ensure the design works across multiple breakpoints
- Keep stakeholders informed throughout the process
Figma
Tools used
Objectives
Miro
Userzoom
I began my research by mapping out both evidence of membership across the Insurance site and the current Travel user journey. I then completed a competitive benchmark on companies that offered separate pricing for their members.
From my findings, the most common approach was to show non-member and member pricing side by side. Whilst this worked for the competitors, in our case, it could be overwhelming for a user when presented with eight prices rather than four. There was also use of colour as an indication tool, giving more precedence to the member prices over their non-member counterparts.
discovery
After getting an idea of how membership was presented at both Co-op and other brands, I started sketching out a few ideas.
For me, one of the primary aspects to focus on was how to present the pricing. I wanted it to be easy to understand and not overcomplicate the journey.
I also had to consider various user profiles and design accordingly. For instance, thinking on questions such as what does a Co-op member see versus a non-member, and how does a non-member convert to membership if they've already said 'no'?
This was exploring different methods to present a price-saving message. I also experimented with using strikethroughs to highlight the discounted rate.
PRICING FORMATS
This was an idea to make it more concise for the user. The premise of the toggle was that it's only shown if you choose not to sign up to membership. If you are already a member, or click 'yes' to signup on the first page, you don't see it.
TOGGLE PRICING
As mentioned earlier, I was curious to see if users would be overwhelmed by eight prices over four, so wanted to sketch it out. Non-member pricing sits at the top, whilst member prices sit below.
DOUBLE BUTTON
I sketched out a few ideas for the different user journeys on mobile, exploring where the member sign up question should be and what it looks like if you're already a member compared to a non-member.
MOBILE VIEW AND BOTTOM SHEETS
I created a high-fidelity version of the toggle and double button design. Following that, I then performed secondary research on Userzoom to test user understanding of both designs and see if one performed better than the other.
The toggle design was understood by users more than the double button design. It was deemed more intuitive, easy to understand and time efficient by participants.
design
With the toggle design as the winner, I mapped out the adaptations for each user journey and applied the design accordingly.
Both desktop and mobile features the toggle at the top of the page above the pricing. For mobile, the pricing is stacked, meaning the toggle would be ineffective fairly quickly once a user began scrolling.
We rectified this by having the toggle in a sticky format on mobile, where it continues to stay in place as the user is scrolling. This enables ease of use for the customer when switching between prices. Due to its ease, this would be a welcome addition to the desktop journey too.
If a customer decides to sign up for membership within the journey, a bottom sheet appears with a sign-up prompt. The bottom sheet design allowed us to ensure we were supplying the customer with the necessary information without overwhelming them. If a user does not want to sign-up using the bottom sheet, the price will default back to its non-member state.
For existing members, the toggle enabled us to use it as a container box. This meant that we only had to change the content accordingly and remove the toggle feature.
In addition, we also added secondary validation to the remainder of the journey to ensure the user knows that their member discount has been applied.
The final result follows an integrated design system, catering to members and non-members alike. It features member sign up, the dynamic toggle design and member specific pricing.
We achieved all of the objectives on this project, working across teams within the company and also our insurance partner. Since the launch, we have changed the enabled toggle container to a darker blue. We did this as we feel it both cements the validation that the toggle has been activated and adds a secondary visual stimuli to member pricing.
You can check out the final result on the Co-op Travel Insurance website.
FINAL RESULT
Take a look
