Role
UI/UX Designer, UX Researcher
Team
TreeDots
Tools :
Figma, Figjam, Maze, Google Analytics, Firebase, Notion
Grocery Apps for Culinary Business Owner
Enhancing Homepage experience and Search Flow for a B2B Grocery Apps
Nuwiya Amal, April - May, 2022
“I’m a small restaurant owner who wants to buy fresh food ingredients for my business quickly”
“Busy with the restaurant operation, no much time to explore”
“It’s also hard for me to find the product I need to restock”
01. about the product
Grocery Mobile App for Culinary Business Owner
TreeDots for Merchants, a mobile app for restaurant and food service owners (merchants) available on iOS and Android, lets them order ingredients like meat, vegetables, and seafood from various suppliers. They can also manage, track, and pay for orders across their different store branches through the app.
Not only used by our customer, but also for our Salesperson. Current business model also has Non-Self Serve Customer, who will order to our Salesperson. Then Salesperson will make the order via the app.
02. PROBLEM
Initial App’s Problem
TreeDots for Merchants launched without initial product research and design due to limited resources. Customer Success Team gave feedback that they received from customers/users:
The legacy app was not having clearer information structure, that makes difficult for user to understand. In this case, Design Team received insights from our Customer Success Team and Sales Team that lot of our users confuse to explore the food products inside the platform.
The app was visually not attractive, it led especially for Self-Serve Customer who make an assumption this app has no integrity (such as a scam app). Also because of lack of brand identity
Now since we’re having more designers and researcher resource in the team, we plan to revamp the app gradually so that both user and business goals are achieved. But first, I do further research to gather more informations.
02. PROBLEM
Discovering Further Problem for Product Exploration
After knowing the initial problems, I need to discover more informations by conducting User Interview, with both Customer and the internal team (Customer Success Team) to understand their goals, pain points and job-to be-done. For the context, current business model for acquiring customer was that Salesperson will visit customer store then creating account for the customer.
So, after customer reached homepage, the first activity that they have to do for purchasing product is to explore product. Then I focused first on Product Exploration. Related to that, here are their main pain points:
Not showing the specific search result. If user search and type “chicken”, the category bar not showing from which category this search result came from. Was it from Product Category (Poultry, Meat, etc) or Order Category (History, Favorite, etc)?
User couldn’t perceive icon to represent Item/Product Category. Also according to our Customer Success Team, users much prefer to use real image.
User need a way to see all Product Category for faster exploration process. For some devices size, user couldn’t spot that this category can be scrolled horizontally if they want to view all categories.
03. GOAL STATEMENT
Goal Statement & Constraints
Informations have been gathered, the next step is to have an actionable plan. Together with Product Manager and Design Team, I discussed the insights, current technical and time constraint, I focus on these 3 goals:
Make a great first impression: I want the app's homepage to be aesthetically pleasing and easy to use, as it's the first thing customers see after they log in. A bad first impression can make them leave the app. (Note: For the context, current business model for acquiring customer is that Salesperson will visit customer store then creating account for the customer)
Improve product exploration: I want to make it easier for customers to find the items they need, as this is crucial for them before buying items. This include: Search Flow and Product Category Informations
Release the revamp improvements as the first MVP quickly: I want to get these changes out to customers as soon as possible so they can start benefiting from them.
04. Design
Proposed Design Solution
Come up with proposed design solution, by enhancing new design for Homepage and Search Product Flow
lear information hierarchy between Product Category and Purchase Category
C
05. TESTING
Validate Design Solution
In this step I measure how easy and usable is the new design of Home page and Search feature for user to find/discover a product. Also this test aim to identify usability issues that user may encounter and gather feedback from them.
The Usability Testing Result
I gathered 26 testers ran usability testing using Maze where testers completed specific tasks (Missions) to interact with the prototype. They also answered questions and provided feedback on their experience. The Overall Usability Score was 72, and considered acceptable.
Preview of Overall Usability Score
I also identified the score affected by an occurrence of accidental clicks (misclicks) and a bounce rate (illustrated by the Image Preview of Task Mission Result below). This was partially due to tester’s inability to reload the prototype after completing tasks, attributed to the prototype file size, and partly due to using incompatible devices.
Preview of one of Task Mission Result
So rather than deciding the next step solely based on Usability Score, I have insights prompt to carefully consider specific data points revealed in the test results:
A. The average mission completion rate stands at 86.2%
The average mission completion rate across three missions was 86.2%, indicating that the majority of users were still able to successfully complete their tasks
Preview of Success Metrics from all missions
B. Users express satisfaction with the design, as indicated by their feedback and ratings.
Testers gave highly positive feedback, as evidenced by the Preview of Feedback from Users image below. Additionally, we attained an 8.1 out of 10 rating from users, indicating their perception that the Home and Search Page designs are visually appealing, as shown in the Preview of Feedback from Users for How Appealing the Design of Page and Search image below.
Preview of Feedback from Users for How Easy to Search Product
Preview of Feedback from Users for How Appealing the Design of Page and Search
As conclusion from these considerations, I felt confident handing the design off to developers after this first round of testing.
06. OUTCOME AND LEARNING
Outcome
Released the first MVP of the revamped TreeDots for Merchants app gradually by starting first with revamping Homepage and Search Flow.
From the Usability Testing, successfully achieved Average Mission Completion Rate stands at 86.2%, indicating that the majority of users were able to use the proposed design.
Achieved positive feedback, indicating a significant improvement from the initial app. Testers found the design to be easy to use and visually appealing.
Learnings
Not to blindly believe the quantitative result without knowing the context. Previously I wanted to run another UT because the score was below than we expected (above 80). But, I read again the constructive feedback from user and they quite satisfy with the design and flow.
Different problems might have different methods to find the solutions. Make it effective and efficient to solve , doesn’t need to implement all the methods.
If there was more time and source available..
Development for this feature was postponed due to Dev Team prioritization, since we I was also responsible to maintain the current version, not only to revamp. If it were faster, I plan to evaluate using analytics tool to gather quant data such as user engagement, activity, etc. So that I can improve based on that evaluation database.
Conduct further constructive research, such as Field Study and Stakeholder Needs.
Not only improve search flow, but also Product Recommendation as part of Product Exploration.
Thank You!
Nuwiya Amal
