My First Usability Testing: Cutting Onboarding Time by 160%

Case study read: ~7 mins

During my initial usability testing for Grooze, I focused on evaluating both low-fidelity and high-fidelity wireframes of the app’s onboarding flow. The testing zeroed in on critical aspects such as account creation, dietary preference input, and the tutorial process. I conducted two rounds of testing: the first involved interviewing two participants and testing with the low-fidelity wireframes. After incorporating their feedback, I iterated on the design and tested the high-fidelity wireframes with two more participants.

Tools

Figma
Notion

Skills

Usability Testing
Wireframing
Prototyping

Disciplines

UX Research

Timeline

April 2024
(2 weeks)

Goals

Designing with a User-Centric Approach

The primary objective of this testing was to uncover potential usability issues and ensure that the app’s interface was intuitive and user-friendly. The study aimed to validate design decisions and offer actionable insights for refining the app, ultimately ensuring that Grooze delivers a seamless and efficient shopping experience in line with our vision of effortless grocery shopping for users.

The study

Walking Through the Onboarding Flow with Think-Aloud Protocol

Participants were asked to navigate through the onboarding process while verbalizing their thoughts, using a guided set of questions. I began by testing with the low-fidelity wireframe and then moved to the high-fidelity wireframe, adhering to best practices for iterative testing.

Testing with the low fidelity wireframes

#1 Asking for tracking permissions

Success

  • Participants found the process easy to understand.
  • Graphics provided helpful visual cues.

Challenges

  • Users hesitated to provide tracking information upfront.
  • Confusion arose regarding to the question asked when asking for location permission
Grooze location access low-fidelity wireframe

#2 Creating an account

Success

  • The interface was perceived as clean and easy to navigate.
  • The account creation process was straightforward.

Challenges

  • Participants expected auto-fill options for form fields.
  • The option to link Apple/Google Pay was overlooked, indicating a hierarchy issue in the design.
Grooze create an account low-fidelity wireframe

#3 Filling Out Dietary Preferences

Success

  • Participants appreciated the progress indicators that helped gauge the time required.
  • The ability to skip this section was seen as a positive.

Challenges

  • Uncertainty about how to navigate back to the previous page.
  • Confusion about what to do if they had no dietary restrictions or allergies.
Grooze create an account low-fidelity wireframe

#4 Understanding the Tutorial for In-Store Use of Grooze

The tutorial flow proved to be the most challenging aspect for participants.

Success

  • Participants recognized that it was instructional in nature.

Challenges

  • The lack of images in the low-fidelity wireframes caused confusion.
  • Participants struggled to grasp what the tutorial was conveying.
Grooze tutorial low-fidelity wireframe

Based on Feedback, I Iterated the Design and Conducted Testing on the High-Fidelity Wireframe

#1 Creating an account

Iteration

  • The flow was restructured to ask users to create an account first, followed by tracking permission requests.
  • Adjusted the hierarchy on the payment page, positioning the option to link Apple/Google Pay at the top.
  • Added a brief explanatory paragraph on the payment page to inform users why sensitive information is requested upfront.
Grooze create an account high-fidelity wireframe

#2 Asking for tracking permissions

Iteration

  • Removed the question about whether users are currently in-store. Instead, used active voice to clearly explain why Grooze requires location permissions.
Grooze location access high-fidelity wireframe

#3 Streamlining the Dietary Preferences Flow

Iteration

  • Introduced a back button on each page to align with the heuristic of user control and freedom.
  • Added an option for "not applicable" in the dietary preferences section
Grooze dietary preferences high-fidelity wireframe

#4 Understanding the Tutorial for In-Store Use of Grooze

The tutorial flow proved to be the most challenging aspect for participants.

Iteration

  • Split the tutorial into two distinct flows: one for shoppers with a cart and one for those without.
  • Added illustrations to complement the content.
  • Revised the content to ensure it is written in plain language.
  • Included front and back navigation buttons to give users more control.
Grooze tutorial high-fidelity wireframe
Final Design

The efficient and effortless onboarding experience

Grooze onboarding flow design
Metrics

Time Spent on the High-Fidelity Wireframe Decreased by 160%

    I measured the average time users spent completing the onboarding flow. The average time on the low-fidelity wireframe was 5 minutes, while on the high-fidelity wireframe, it was 3 minutes. This increase in time reflects the improved clarity and intuitiveness of the design after iteration.

    Wrapping up

    Key Learnings

    The Importance of Testing with at Least 5 Participants
    The qualitative data provided valuable insights, and I noticed patterns among the 2 participants. However, testing with a larger group would likely yield more comprehensive insights into user struggles.

    Coordinating Usability Testing
    This was my first experience conducting and coordinating usability interviews. I learned how to recruit participants via email, schedule sessions through Google Meet, and ask neutral, non-leading questions during the tests. Balancing question-asking, listening, and note-taking was challenging, but it was an invaluable experience in conducting user research.

    Related Case Studies
    Grooze poster mockups

    How I get buy-ins for Grooze

    Digital shopping cart mockup

    How I revolutionized shopping with RFID & AR technology

    Thanks for stopping by! 💜

    I'm always open to a coffee chat ☕
    Connect with me via
    Linkedin logoMailbox logoInstagram logo