Timeline
3 months
Team
Sr. Product Designer: Matthew Rudas
Tools
Figma, Amplitude
Role
User Research, Interviews, Interaction Design, Content Design, Prototyping
CONTEXT
Helping shoppers save
Checkmate scours your inbox and the internet to save shoppers money by finding deals based on your past purchases and preferences. To new users, onboarding is the user's introduction to the Checkmate mobile app. It's where they learn more about the user and understand the value of downloading and using Checkmate - to track packages, find personalized deals, earn rewards, and more!
While the current onboarding boasted over 75% conversion rate to extension download, the onboarding process was not fulfilling its entire purpose on both the user and business end.
Over the summer, I was challenged to revamp the onboarding experience and improve its functionality — focusing on data collection and user education.
01. Overview
What work did I do at Checkmate? What's the problem to solve?
The ONboarding problem
Balancing business goals and user expectations
01. A lack of user data is a roadblock to personalization. How might we collect personal information in a non-invasive, inclusive way?
02. Checkmate users don't understand how the app works. How might we improve education on the app's core features?
02. Problem Framing & Insights
How did we get here? Why do we need to redesign onboarding? What isn't working for the business and the users?
Problem Context
Desire for increased personalization
In interviews, users wanted (and expected) recommended brands and deals to be tailored to their personal preferences.
However, a lack of data collection forms prevents us from drawing valuable insights about our users, thus limiting the personalization of a user's in-app experience.
pRoblem Context
Lacking effective user education
Interviewing 5+ users showed a struggle to understand how the app offered additional value outside of the mobile savings extension. Users skipped through the app explanation and even after reading, misconceptions remained.
Interview Findings
Lack of understanding: Users don't understand the difference between the mobile app and extension.
Personalization expectation: Users expect their favorites to come up first.
Trust is important: Users are sensitive to sharing their personal data and permissions.
Opportunities
Reconfigured app explanation: Educates user on core features to show full functionality.
Interactive extension tutorial: Familiarizes users with most common interaction pattern.
Data collection: Collects important information to enable personalization
Competitive analysis
Investigating content design
In addition to interviews, I conducted competitive analysis on 10+ mobile applications' onboarding experiences. I took note of form entry types (calendar, keypad, scroll selection), language surrounding gender entry, and more.
To ensure I was practicing inclusive design, I read articles like this — which emphasized providing reasoning for collecting gender and providing an option for users to describe their own gender.
Streamlined data entry.
Explanations surrounding data collection.
Progress indicators: Sets onboarding expectations with users.
Unclear error states or input formatting.
UP NEXT
Ready to iterate
Taking the interview findings, their correlated opportunities and the more detailed findings from my competitive analysis, I was ready to explore solutions and start iterating.
03. Ideation & Iteration
How can we solve both of these problems?
POTENTIAL SOLUTIONS
Two proposed solutions
Adding basic data collection forms for DOB and gender into the onboarding flow to increase personalization.
Provide a point of entry via a "Finish Profile" banner on the home or profile tab to maintain the current onboarding length
I decided to on the first solution with an additional extension tutorial and a focus on inclusive language and non-invasive data collection. Collection of DOB and gender was high-priority, so we decided to collect the info through the addition of data collection into onboarding. Adding a guided extension tutorial provided an opportunity to supplement user knowledge. This solution balanced business goals while providing an interactive, concise onboarding experience.
Gender entry iterations
Collecting only necessary user data
In my explorations, I experimented with different form entry types and content design of information. To understand why we were collecting gender data, I asked questions like, Why do we need to collect gender? How can we ask for only the information we need?
After thorough evaluation, I decided on the final option where the question was changed from "What's your gender?" to "What are you primarily shopping for?" because it only collected necessary information in familiar categories and kept onboarding compact.
DATE OF Birth entry iterations
Selecting the most effective form type
When making design decisions for Date of Birth entry, I asked questions like, 'How specific do we need to be with Date of Birth entry? Is an age range sufficient or is there a use case for a user's DOB?'
Through conversation, a potential use case for having Date of Birth was discovered — as opposed to age ranges. Finally, I arrived at our final single-line, keypad input form that makes it easy to enter and format.
extension tutorial
Designing an interactive extension tutorial
By replacing the original four screens focused on the extension with tiles focused on the app, there was a need to supplement user knowledge regarding the mobile savings extension.
From a business perspective, the mobile extension is a main conversion metric and it is important that users know how to use it properly. Through user interviews, I discovered that many users were familiar with the interaction pattern due to other competitors like Honey and Capital One Shopping so I made it optional.
04. The Final Solution
What improvements are made with the new design?
What's new?
Streamlined data collection
The new onboarding combines all data collection in one simplified screen. Users can input all the information needed in just a few taps.
What's new?
Interactive extension tutorial
An optional extension tutorial walks users through a sample checkout, step-by-step. Easily available on the home page once signed up, users can tap in or dismiss.
Error states
Error states
Potential errors are accounted for and explained clearly to the user and in the final design spec. Defined interaction patterns reduce confusion if an error occurs.
After launching,
2,000
new users onboarded per day
90%
extension installation (previous: 75%)
55%
account creation
Key Takeaways
Discovering a passion for content design
Through this project, I realized my own interest in content design and took pleasure in crafting just the right sentence — fitting our brand, tone and conveying information.
Advocating for my design choices
This was my first time working with an experienced Product Designer and Product Manager. With their guidance, I gained confidence in setting the scope of the project, identifying requirements, and advocating for my design choices.
User insights can lead the way
As I led formal user testing interviews, I saw for myself the importance of understanding the user. If given more time, I would have liked to conduct user testing and refine my work.
