Increase onboarding success for a grocery app
Company & Product
MilkyWay AI is a provider of AI-powered store analytics for businesses. They have launched Instashelf to help merchandisers take stock of goods and translate these data into insights to help managers with merchandising decisions.
The Problem
Client’s past research reflected that there were issues with the current onboarding process, as >50% of merchandisers failed to conduct and submit shelf audits accurately.
Timeline
1 month
Completion Date
Jul 2021
Role
UX Designer
Scope of Work
Heuristic Evaluation, User Flows, Prototyping, UI Design, User Interviews, Usability Testing, Design System
Goal & Objectives
How might we develop an onboarding flow so that the Shelf Audit process can be clearly understood by merchandisers?
Identify and evaluate usability issues and pain points that merchandisers are facing in the Shelf Audit process and the camera function
Propose an in-app guide to help users with the camera and stitching functions, and a redesign of the Shelf Audit Process
Process
1. Understand
Understand the app’s existing usability issues for the Shelf Audit process through heuristic evaluation and mapping of user flows.
2. Uncover
Conducted usability testing to uncover challenges users had when using the app.
3. Redesign
Translate user insights into redesign of the Shelf Audit process and camera
4. Refine
Refine design through further usability testing
1. Understand
Deconstructing the screens
One of the first tasks we did was to break down the existing app provided into the different sections:
Landing Pages
Starting a Shelf Audit
Camera and Stitching Photos, and
Submitting a Shelf Audit.
Although heuristic evaluation is typically done by experts outside the team, given the limited time and resources and with our fresh perspective seeing the app for the first time, we carried it out using Nielsen’s 10 Heuristics to detect potential usability issues.
Some key findings include:
Potential for a more aesthetic and minimalistic design
- Instructions that tell users to take photos of the ‘Home Shelf’ could be simplified
- Colours do not correspond with the intentions of the message, e.g. user progress shown in red instead of green.Need to provide user control and freedom
- Users are not given the option to save the photos taken before audit submissionNeed to display clear visibility of system status
- After a user has finished but not uploaded their audit, the message indicated to users should not be “Audit Completed” with a high-five image as it indicates completion of task
Mapping out user flows
We mapped out the key actions that users had to take, to not only gain a better understanding of each step of their journey, but to also be aware of any obstacles that occur at these key points.
2. Uncover
Onboarding Flows
Current onboarding was conducted through a separate 2-minute video located within the app before user began their Audit
With most users’ limited working memory capacity, we felt that it was important to focus on key information with a short in-app onboarding to increase retention
We came up with two onboarding flows for testing with users. These were low-fidelity mockups to test the concept rather than the content
Option 1: Gamified Onboarding
We designed a gamified onboarding flow to make the process of learning fun and accelerate the pace of picking up how to capture shelf photos for new users of the app. The main focus was to educate users on the right way to capture photos and submit the Shelf Audits.
Option 2: The Nickel Tour
An alternative onboarding flow proposed was is a nickel tour that shows the user around the actual user interface. Through tooltips and lightboxes, the intention was to provide a concise introduction to the Shelf Audit and camera functions of the app.
User Interviews & Usability Testing
In-person user interviews and usability testing was conducted with four target users - these were brand merchandisers with experience in stocking and displaying goods according to planograms.
Users were required to complete two tasks:
Complete both onboarding flows
Successfully submit a Shelf Audit
Findings
We gathered users’ feedback and collaboratively analysed them through affinity mapping.
For Task 1: Onboarding
3 out of 4 users preferred Option 2, the Nickel Tour
2 users cited that the option has a step-by-step flow that was easier to understand as compared to Option 1, the gamified version.
For Task 2: Submitting a Shelf Audit
We observed that most users were not able to successfully complete the task or faced various roadblocks that frustrated them
There were multiple usability issues. For example, users felt that upon the final page of the audit, they have completed and submitted the entire audit process based on the visual cues on the page.
User Persona
3. Redesign
Shelf Audit Redesign
New Onboarding Feature
4. Refine
Usability Testing
With the mid-fi wireframe prototype, a series of 3 usability testings were conducted to receive users’ feedback and to improve features before moving into the hi-fi prototype.
We implemented the quick changes and proposed the remaining strategy feedback to our client for consideration and future implementation.
3 out of 3 of our users were able to navigate through the app without much difficulty.
Key Implemented Features
Camera Function: Multiple Stitch Mode
Added a photo layout guide to let users know which position of the photo they are taking. Retained the green shaded area that users found helpful to guide them to stitch the overlapped area of the photo.
Standard UI elements and a Design System
This helps to provide consistency within the design team and benefits developers downstream with a complete reference guide for all variations of existing UI elements (e.g. size/colour of headers, body text, icons)
Future Considerations
Value in conducting in-person than virtual usability tests
With the nature of the app, the type of target users and the work environment it was more conducive to test in-person
Reminder to upload audit
As soon as users leave the final screen, they may forget to upload the audit upon getting wi-fi. Apart from the on-screen reminder, a secondary prominent reminder on the homepage is crucial to achieve task completion.
Reflections
We accelerated the development of a new onboarding flow and proposed modifications of the current app design. 70% of the designs will be implemented in the app’s next update.
There were difficulties getting in contact with actual merchandisers. Should there be further design iterations, one potential improvement would be to conduct in-person usability testing with more users to improve the reliability of data collected.
“We were really impressed with the level of professionalism the project team demonstrated from engagement to the final research presentation.
The team worked really well together… they took time to listen and had the initiative to interview merchandisers even though it was a challenge for us to get our clients to arrange for interviews.”