Justin Noah
UX Designer

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

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.

View Hi-Fid Mobile Prototype >

Project Scope

The Problem

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.

Research Scope

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.

References


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.

Wireframing & Contextual Inquiry

Analysing first client sample of screen recording to study onboarding painpoints

Original PS:

The team came up with this Problem Statement (PS) to work with.

How might we develop an onboarding flow so that the shelf audit process can be understood clearly by the users?


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

Original PS – Shelf Audit Onboarding


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

Original PS – Usability Testing


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

Pivoting Problem Statement (PS1)

Pivoting Problem Statements


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:

PS1: HMW redesign the shelf audit flow and the camera stitch mode for merchandisers to carry out shelf audits accurately?

PS2: HMW develop an onboarding flow to educate merchandisers to take shelf audit photos accurately?

Pivoting of Project Scopes

User Feedback on existing Shelf Audit Flow

PS1: On Redesigning 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

PS1: On Redesigning Shelf Audit Flow


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

PS1: On Redesigning Shelf Audit Flow


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

PS1: On Redesigning Shelf Audit Flow


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

PS1: On Redesigning Shelf Audit Flow


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

PS1: On Redesigning Shelf Audit Flow


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

PS1: On Redesigning Shelf Audit Flow


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

PS1: On Redesigning Camera Stitch Flow


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:

  1. Taking of multiple bays (shelves) in 1 photo

  2. Did not have min. 30% overlap in photos taken for effective stitching (joining of images)

  3. 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).

PS1: On Redesigning Camera Stitch Flow


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.

PS1: On Redesigning Camera Stitch Flow


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

PS1: On Redesigning Camera Stitch Flow


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

Problem Statement 2 (PS2) + Design Systems

Existing prototyped designs

P2: On Designing Onboarding flow for taking Accurate Shelf Photos

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.

Why are we considering design systems?

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.

Design Systems:
Key Considerations

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

Summary

Usability Testing

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.

View Hi-Fid Mobile Prototype >

Implemented

  • 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

To be Reviewed

  • 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

Client

MilkyWay.Ai's Instashelf

My Role

UX Research
UI Design (Lead)
Prototyping
User Testing
Design Systems (Lead)

The Team

Ann Meryl Choo
Justin Noah Chua
Magdalene Chai
Siva Shankeran
Sneha Mathew

Duration

4 Weeks