Membership dashboard redesign
Platforms & tools
- iOS
- aOS
- Figma
- Miro
- usertesting.com
- Adobe Creative Suite
Context
People like feeling important, so we have VIP sections or special events where you must wait hours online or in line for a ticket. Having a membership is a way for people to get the benefits of being significant but also want to have the flexibility to use it. The Carepass membership page was where people needed help to get that VIP experience. The membership team worked on this project to build an adjustable, responsive, and customizable user experience.
To update the Carepass dashboard page and slowly add a space allowing users to access others' programs.
Design Process
Emphaize/Discovery:
- Competitive analysis
- User testing
- UX analysis
Ideate:
- Mid-fidelity prototype
- High fidelity prototype
Testing:
- User testing
Rinse and repeat
UX analysis
Baymard provided feedback on the CVS shopping experience that would help connect the UX e-commerce experience. Some of their callouts were to make sure that we have the ability for users to go back to the main page of content if they were navigating to another page and have information flow. Looking at the current membership of Carepass, we noticed that getting to the dashboard page was not as accessible. The content was misleading or not as clear and repetitive content on the same page.
Competitive analysis
We decided to conduct user testing with the recent experience to see if the information made sense to users and if participants could navigate to the dashboard and certain features like updating their membership. I did competitive research on what other companies did for their membership or dashboard pages.
The companies looked into were:- Walmart
- Amazon
- Target
- Adobe
Things that was noticed
- Maximum of two pages with information that connects with the membership
- There was some type of content hierarchy of information
- Ability to show other memberships and subscription
User testing
We interviewed 5 participants who were current Carepass members and had done user testing in the past. We also looked for users who had a type of disability that they needed technical assistance.
Our goals:
- See their expectations regarding the dashboard
- Gather their thoughts on the current information about Carepass on the page.
- If the participants could navigate to the dashboard page
With the data collected from the testing, we learned the following:
- 3 out of 5 participants suggested reorganizing the content and the information that needed clarification.
- 2 participants thought that the cancelation call to action should be more visible.
- 2 participants users said there was significant white space on the page.
- All participants identify seeing membership information as the top 3 important to them.
- All participants responded that they were satisfied with the current. Dashboard content.
Even though we conducted user testing and user interviews, we used the CVS persona Micheal to sync up with CVS to ensure we were going with other users' goals.
Initial goal
- Make the design simple and able to add additional information or features.
- Able to add other memberships in the same environment.
- Reduce the number of customer service calls.
- Minimize cancelation of membership.
- Create with mobile-first design and use as much of the UI from the new design system.
Wireframes
With the information gathered and syncing with the CVS persona, other designers and I worked together to see how to make the information flow and not repeat information. The wireframe was also where we ensured that people who were a part of the project and other teams aligned on how to present to the information. on how data would be presented.
High-fidelity prototypes
At this time, Carepass was also introducing a new feature for gaining rewards with the number of steps users take. Leadership wanted to make the feature a part of the dashboard. With that additional information, we needed the following experiences:
- New user
- Existing users, with or without the reward
- Able to add new features
- Showing available promotions that connect with the membership - for example, the monthly free $10
Examples
New user who has not shopped, no Healthy Rewards, and $10 available
Manage membership page
Handoff
The discussion and handoff were broken down by feature container so leadership and developers could plan building.
For the developers, I did provide the following information in the Figma file:- A11Y markups
- Components and elements
- Clickable prototypes
- Interaction notes
- List of Components, existing elements, and new elements
Takeaways
Imapct
With the updates on the memberships, customer service calls dropped by 33%, and users did cancel their membership for a period and had a 25% increase in returns.
Did we answer our questions?
There were a lot of challenges with this project, like Figma being new to the team, a lot of different departments and people's feedback that needed to stay with the project's goals, and the tight deadline. I believe we achieved the goals of simplicity, ensuring we do the best accessible design practices and the ability to add information in the future.
Next steps?
- Collect the data from the A/B Test
- Do another user test with the updated pages