As a team of 5 UX designers and 1 Engineer, we spent 4 weeks working remotely with our client to conduct user interviews to gain insights on our users' needs and designed a mobile-first prototype for their B2B platform.
My Role in the Project
UX Research • UI Design • Prototyping • User Testing • Design Systems
MilkyWay.AI's Instashelf is an application that is is a TechStars portfolio company. As a B2B product, Instashelf is an application to help sales and marketing teams enhance retails store performance by using smart AI technologies to identify gaps for stock replenishments.
The MilkyWay.AI's Instashelf targeted merchandisers. In seeking for improvements specifically for user onboarding and to get users to capture photos as per specifications, 3 project objectives needed to be rectified within the B2B application:
1) The app has clear usability issues and other pain points that merchandisers are facing, for instance the 'Shelf Audit' flow.
2) Users are unable to properly use the camera stitching functions due to poor understanding of the functionality and terminologies associated with it.
3) The copywriting and use of colours that are currently on the app are not user-centric.
MilkyWay.AI's Instashelf had no initial research, and therefore throughout the project there was need to carefully consider the research method to be used in the project.
We then based our research based on the following points:
1) To find out the user's pain points/challenges/obstacles when using the app
2) To validate onboarding issue
3) To give users a clear indication of the functionalities and prospects of the app
4) To instruct users clearly on how to accurately take photos for the AI to read
5) To educate users on how to operate the stitching tool
6) To identify any copy issues in the app.
In our competitive analyses, the team took selective functional references from several apps that exist within the market.
For instance, Duolingo was referenced for its gamification features, Vpost for its tool-tip/guided onboarding, Expensify for its step-by-step boarding, the 360 degree Panorama app for its gridded camera view, and Instagram for its easy toggle between different filters. More will be covered in the later sections.
Analysing first client sample of screen recording to study onboarding painpoints
The team came up with this Problem Statement (PS) to work with.
In order to study the user journey more in a more in-depth manner, the team dissected the screen recording that was provided by the client in order to draw out the key points in the user journey.
These key points needed to be considered and drawn out from the user journey so as to effectively know the pain-points to readdress in the onboarding flow, in order to promote the accurate use of the application. The existing user flow for Start & Submit Audit is as below.
Existing User Flow for Start & Submit Audit
Original UI of Instashelf
The original PS focused on the issue of users using the ‘Shelf Audit’ mode to captures pictures of shelves and submit most of their audit reports, and the job to be done here was to effectively enable users to understand the flow of starting and submitting an audit report.
In order to do so, we crafted a design framework of the following to which the onboarding screens will be designed off, in sequence:
A. Welcome Screen: Greet the user with a short friendly message
B. Product Tour: Explain the product, feature by feature
C. Progress Indicators: Indicate duration of onboarding experience
D. Checklists: List of tasks for user to complete
E. Action-driven tooltips: Small pop-up that provide advice when user performs an action
Below are three options that were wireframed based off this framework.
Usability Testing: Onboarding flow and existing app on-site
Instashelf was targeted primarily at store merchandisers, users who would go around supermarkets taking stock and replenishing them on the ground. The team felt that it would be more user centric to test with actual merchandisers residing within Singapore. By a whiff of luck, team members were able to link up with an actual merchandiser, who was then able to link us up to a couple more merchandisers to effectively run the usability tests.
Affinity Mapping of Contextual Inquiries
With the team’s initial assumption and validation process with the usability tests on-site and in the supermarkets – the results from the synthesis showed that the underlying issue of the JTBD (Jobs to be Done) lies more with the UX of the app: there is more need to finesse the app’s UI, and the onboarding process should focus more on the onboarding functions rather than the whole process of shelf audits. After discussions with the CEO and CTO, the team agreed to then pivot our scope in both resolving the UX issue and providing an onboarding flow as a supplementary element.
The re-scoped problem statements are:
Pivoting of Project Scopes
User Feedback on existing Shelf Audit Flow
Through our interviews, we realised that the main problem with the shelf audit flow was that users were not able to successfully complete a Shelf Audit. The collected data points were:
4 out of 4 users had trouble understanding the steps to be carried out
2 users felt that a step-by-step guide would help
2 users felt that they would want to learn how to use the app by themselves
Redesigning homepage for Shelf Audit Overview
Our redesigns for this problem statement thus include:
Refined visual hierarchy: Removed purple top bar. Purple is reserved for emphasis on important CTA buttons
Streamlined colour psychology: Throughout the app, green is associated with success and progress to the user
Simplified CTA icons: to reduce visual noise for easier user identification
Improved CTA copy to reflect clear next step
Redesigning chips for Shelf Type selections
Moving on, the next screens are redesigned in the manner of:
Chips for Shelf Types
Streamlined design to reduced real estate used for chips
Refined font size for chips and badges for better readability
Further redesigning Shelf Audit entries
In redesigning the Selecting and Adding of Product Shelves, these following elements were redesigned:
Category selection: A drop down menu reduces real estate taken up on the page and better for scalability
Paid/Free selection: Toggle-switch for selection between two options
Add Product Shelf button:
Relocated to where users would expect new shelf to be added
‘Plus’ icon button instead of text as it is more intuitive
Improved CTA copy to reflect a more accurate next step as they are not submitting the audit at this point
In redesigning the process for editing shelf audits, these elements were redesigned:
Edit function
Improved UI by adding an edit button
Communicates the action that user can take when tapping on thumbnail
Style of button corresponds to its medium-level of emphasis on the page
Delete function
Upon swiping left, delete icon appears to inform user that the entry can be deleted
Streamlined the delete icon to be consistent with earlier screens
In redesigning for the Shelf Audit Summaries, all the users were unable to review photos before submission. For instance, one user spent 5 minutes looking for the stitched photos. In addition, the existing ‘Edit’ button brings user back to the Add Product Shelf Page, which was confusing to all the users.
Within the redesigns, we thus included the:
Dropdown menu for review
Photo thumbnails allow users to see a quick snapshot under individual home shelves
Can be expanded to view photos taken, as well as
Improved CTA copy to reflect clear next step to save the audit as users are not submitting the audit at this point
In addition, in redesigning for the Shelf Audit Summaries, the reminder to upload audit messages during offline modes had an obvious lack of visual hierarchy, with 4 out of 4 users interviewed not pay attention to it.
To counter such a response, we placed a notification message within a modal lightbox. Users are also required to dismiss the lightbox before proceeding to next screens.
Existing Camera Stitch Flow Screens
The existing problem with the camera stitch flow was that when on camera stitch mode, all users would capture photos inaccurately without proper onboarding guidance. The inaccuracy which reside within the pictures taken are:
Taking of multiple bays (shelves) in 1 photo
Did not have min. 30% overlap in photos taken for effective stitching (joining of images)
Did not understand the term ‘stitch’
In addition, from the usability tests, there was a stronger indication on the misunderstanding of the term 'stitching' as 3 out of 4 users mentioned that they did not understand what the term meant (comments indicated on the right).
References
In attempting to redesign the camera stitch flow, we took reference from various applications: Panorama app for it's 1/3-gridded overlapping guide, Instagram's camera screen and filter options, as well as gridded lines from iOS' camera app.
Proposed Design
In our proposed design, as per the screens on the right,
We first introduced the redesigned back button, flash mode, stitch guides that are stacked over the camera view.
This also includes the green overlay for visual indication of minimum 30% overlap, which only appears when capturing the second photo within the stitch mode.
We have also reduced real estate used for camera modes by
moving camera modes to the same row as shutter button, referencing Instagram's UI
stacked shutter button and modes over camera view to see more of the photo you’re taking
With regards to the icons of the camera stitch modes,
We've also designed for clearer icons for camera modes, removing camera outlines, as well as
A distinct pop of purple for selected mode, which allows user to clearly identify which mode they are on
Proposed Design
In our proposed design, as per the screens on the left,
We then introduced a photo layout guide on the top right of the screen so as to let users know which step of the photo taking process they are at, with the purple box indicating the current picture that they are taking
We've also considered several additional UI/UX improvements, such as:
Removing the term 'stitch' except for 'Multiple Stitch'
mode
Increasing font sizes throughout the UI for better readability
Grids in order to help users frame their pictures as per the shelves more accurately, thereby improving photo composition
Taken photos collapsed into 1 single thumbnail to prevent it from block the camera view, in which the series of photos can be viewed when tapped on
Existing prototyped designs
For the new P2, the rescoped problem statement is: How might we develop an onboarding flow to educate merchandisers to take shelf audit photos accurately?
Bringing our initial wireframes and the results from our usability tests, it was indicative that the 'step-by-step' onboarding guide communicated the clearest to the merchandisers. Users will enter the onboarding flow the first time they use the app and entire the camera stitch mode via the shelf audit page.
The onboarding is also envisioned to reside within administrative functions of the app so that users are able to draw up the onboarding again later if further guidance is required.
The screens below are a culminate of the proposed design for the onboarding flow for the camera stitch modes.
The design system allows effective communication to the developer the ideal way to style a component. This benefits developers by giving them a complete reference guide for all variations of existing UI elements.
This will also help provide consistency; when you have a comprehensive design system and the tools to integrate it across your enterprise without slowing down the process, you can create great digital experiences within your brand framework, at scale.
To begin, we’d intentionally increased standard font sizes to make it easy on the eyes especially for the older users, throughout the implementation of the design systems. We've also established an entire library of components for our design system, which is elaborated in the next screen.
Proposed set of Design System for MilkyWay.AI's Instashelf, which span across call to action buttons
With the mid-fi wireframe prototype, we conducted 2 series of 5 usability testings comprising of 5 users to gain valuable feedback and to improve multiple features. We started at a mid-fi level because of the fidelity of the assets that were handed to us from the client.
We implemented the quick changes and proposed the remaining feedback to our client for consideration and future implementation.
We also created a design system for the main user interface, to better help users with knowing the functionalities of the app for smoother navigations.
Mapped out user flow in order to provide necessary scope for onboarding
Multiple competitors' analyses to gauge and map over functionalities
Provided onboarding flow crucial to the usability of the camera function, the key function of the app, in the form of clear and guided instructions
Streamlined UI design across 75% of the application with primary focus on camera functions and navigational screens
Gave users an improved experience of the functionalities and the prospects of the app
Addressed unclear copywriting issues within the app, and redirected new copy to be more user friendly
Dark purple (#391EAC) in original brand CI can be a substitute for linear colours to keep the UI minimal and for UX to be easily accessible
Onboarding for other functionalities (other than camera function) of the app may need to be considered
When conducting usability tests for future versions, it would be beneficial if users are not guided through the tasks. In this way, you will be able to see their true pain points and help to rectify accordingly.
The product needs to build a readily accessible pool of merchandisers who can act as reliable users who are not shy and shun away in order to garner more effective usability tests.
1-Min Walkthrough of Instashelf
MilkyWay.Ai's Instashelf
UX Research
UI Design (Lead)
Prototyping
User Testing
Design Systems (Lead)
Ann Meryl Choo
Justin Noah Chua
Magdalene Chai
Siva Shankeran
Sneha Mathew
4 Weeks