Profile Mentions CV Index
Welcome to Justin's site. Feel free to take a look around, or reach out if you're keen to collaborate. 🙇🏻‍♂️💖

Product Design


Instashelf


UX Research UI Design Prototyping Design Systems Usability Testing Project Team Lead



Client Background

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.
Team Context

    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.



Problem Areas


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:

• The app has clear usability issues and other pain points that merchandisers are facing, for instance the 'Shelf Audit' flow.

• Users are unable to properly use the camera stitching functions due to poor understanding of the functionality and terminologies associated with it.

• 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.



The Goal#1:HMW redesign the shelf audit flow and the camera stitch mode for merchandisers to carry out shelf audits accurately?



#2: HMW develop an onboarding flow so that the shelf audit process can be understood clearly by the users?



Customer Journey and Opportunities for Designing
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.



Opportunities for each phase:

User Onboarding

  • Replace jargon like “stitching” with clearer, action-based terms
  • Include mini “how-to” video or illustrated onboarding sequence
  • Add in-context helper tips or chatbot to assist in real time
  • Make first-time flow shorter and more guided (progress indicators help!)
  • Provide error examples (“Don’t do this”) during photo capture setup


Conducting Shelf Audit

  • Add real-time feedback while capturing (e.g. “Too dark”, “Shelf not aligned”)
  • Consider smart prompts (“Label your shelf here” or “Try retaking left side”)
  • Use iconography to guide actions over relying on text
  • Let users save audit progress to complete later
  • Include camera overlay grids or edge detection to guide correct framing


Submitting & Reviewing Audit

  • Visualise shelf gap analysis with green/red tags and shelf outlines
  • Let users flag inaccurate audit outcomes
  • Provide a “training mode” for first-timers or low-tech users
  • Confirm submission with friendly feedback and timeline for report
  • Consider exporting audit insights to PDF/CSV for retail client use




UX Artefacts (#1 - Shelf Audit)
Functional References Wireframing Contextual InquiriesUsability Tests
Design Recommendations





UX Artefacts (#2 - Onboarding)
Functional References Wireframing Design Recommendations




Localised Design System



Usability Testing

We conducted two rounds of usability testing with 10 users using a mid-fi prototype, based on assets provided by the client.

This feedback informed key improvements — we implemented quick changes and shared remaining suggestions with the client for future consideration.

To support smoother navigation, we developed a design system for the main interface and improved UI clarity around core app functionalities.
Implemented

    Together, within the timeframe of 4 weeks, we’d:

  • • Mapped out user flows to define the necessary scope for onboarding and guide early experience design.

  • • Conducted competitor analysis to benchmark key functionalities and identify usability gaps.

  • • Delivered a clear, guided onboarding flow to support the app’s core camera functionality.

  • • Streamlined UI design across 75% of the application, focusing on camera functions and key navigational screens.

  • • Improved the overall user experience by clarifying functionality and surfacing the app’s value proposition.

  • • Addressed unclear copywriting by rewriting key content to be more intuitive and user-friendly.

Results
Client Review



– Eunice Wong, CEO, and Sagar Setu, CTO of MilkyWay.AI




My Role

UX Research UI Design Prototyping Design Systems Usability Testing


Thank you for reading till the end.




©Justin Noah, 2025 Singapore/London