Passion Project
E-Commerce
Mobile App
Improving order flow and reducing profit loss for shop owners
A direct link for shop owners to suppliers: browse livestock, stay updated on prices, and order with ease.
Time
3 weeks
Role
UX Research, UI Design
Tools
Figma
Problem
Retailers often encounter order errors, resulting in financial losses.
Solution
A one-stop platform for smarter retail & supplier connections.
Impact
SuppLink improves better B2B experience for both.
Users
Ensures stock availability, steady revenue, and opens more business connections.
Business
Build trust and better relationships between shop owners and suppliers.
Product
Becomes the central platform for the food & drink distribution industry.
As a shop owner
Quickly find and connect with suppliers the user needs
Up-to-date information for all products
Ordering becomes easy and error-free
Real-time order trackings
As a supplier
Real-time updates on pricing and availability, without the calls
Simplify marketing operations and reduce staffing needs
Grow dealer network faster and get more sales
Save time with automated order tracking
Solution With Simple Flow
Supplink focuses on building business connections, reducing errors and improving reliability.
Find suppliers and connect instantly
Users can connect with suppliers using their shop outlet code.
Simple ordering with real-time updates
User can view live stock and pricing, then order with ease.
Stay updated with live order status
Users can check order delivery progess (Ongoing, Cancel, or Delivered) from any suppliers.
Background
I used to work in this industry and saw these problems firsthand.
I spoke with other retail owners and most of them revealed they faced the same challenges. Here are the key issues I discovered in the market.
Order Mistakes: Miscommunication during the ordering process often results in incorrect orders, creating frustration and wasted resources.
Delivery Delays: Without clear coordination, deliveries are frequently delayed, disrupting shop operations and disappointing customers.
Lack of Real-Time Updates: Shop owners have no instant visibility on stock availability and pricing, making planning difficult and error-prone.
Business Losses & Strained Relationships: These issues lead to financial losses and weaken trust between retailers and suppliers.
On the other side, I talked with suppliers and marketing teams to get their perspective on how these issues impact their relationships with retailers when things go wrong.
Manual Order Taking: Suppliers record orders by hand in order books, which is time-consuming and prone to mistakes.
Inefficient Price & Stock Updates: Every time prices change or stock runs out, suppliers must call retailers directly, creating delays and miscommunication.
Errors from Marketing Staff: Orders handled by marketing staff sometimes result in mistakes, leading to wrong deliveries and retailer dissatisfaction.
User Journey
Shop owners are currently facing uncertainty with orders.
User Journey Map
Competitor Analysis
Most existing apps in the market focus on B2C.
I noticed maany suppliers already have their own ordering apps, while still don't. But even with apps, retailers can’t order directly, company approval is required. As a result, the apps don’t actually make things easier for them.
Competitor Analysis
User Personas
Who I designed for
Based on insights from talking with both suppliers and retailers, I developed two personas one for retailer and one for supplier to understand challenges and how they are solving them.
corner-store chaw chaw
Small Convenience Store Owner
“Sometimes I don’t even know if my order went through until the delivery shows up or doesn’t.”
Pain Points
Workarounds
Prices often changes without notice.
Keeps a notebook of past prices and calls multiple suppliers.
Orders get delayed or missed, and there’s no proper confirmation.
Follows up with voice calls or sends reminder messages after every order.
Difficult to find new or alternative products when existing ones go out of stock.
Asks around in her small business group chats or waits for supplier reps to visit.
Local supplier ko min
Beverage Distributor
"I always worry that one wrong delivery could damage the trust I’ve built with my customers."
Pain Points
Workarounds
Orders come from too many channels and are hard to keep track of.
Writes down manually on his notebooks.
Retailers often miss price updates or stock changes.
Sends updates manually through group messages or one-on-one chats.
Incorrect items are delivered to retailers.
Tries to confirm each order with a follow-up call
Sketching & Wireframing
Understanding user needs and start bringing out idea concepts with sketches first.
I first drew out as many steps as possible, then simplified the flow by removing frustrating ones.
Wireframe
HMW
How might we simplify and speed up ordering for Corner-Store Chaw Chaw?
Chaw Chaw's quote: "Sometimes I don’t even know if my order went through until the delivery shows up or doesn’t."
Shop verification
She registers her shop and receives an outlet code, which is used to connect with suppliers.
Explore suppliers and products
From there, she can explore suppliers and browse available products.
Connect with suppliers
Using her outlet code, she can easily connect directly with suppliers. A green checkmark indicates suppliers she’s already connected with.
Place orders
She can place orders from multiple connected suppliers at the same time.
Check item detail
She can check each of the item detail and description.
Track order status
She can easily track the status of her orders from each supplier—whether they’re in progress, cancelled, or delivered.
Information Architecture
To provide visual indication of SuppLink, I create information architecture of the product. It helps to easy understand where the user is and where the requested information is.
User Flow
From registration to tracking orders
This is the main user flow from registration of new user, exploring suppliers and order products to successfully tracking orders.
Style Guide
Colors for helping build credibility and trust
Supplink is made to build trust and make the process between retailers and suppliers more efficient. The color palette brings that idea to life—combining energy and reliability to give users a rich, confident experience.
Primary
#CC5500
Its boldness for confidence and reliability in business.
Secondary
#090D38
Uses to reflect intelligence and efficiency.
Accent
#007D0D
Uses for price tags and successful order status.
Accent
#FFD966
Uses for highlight labels.
Icons with outline styles
Outlined icons are chosen for a clean, minimalist look that enhances clarity and easy recognition for users.
Sans-serif font for clean, modern look
As SuppLink is focused on customer relationships experience, a clear, modern font matches to display data and look clean.
Regular/ Medium/ Semibold
Body
16px Regular
Highlight Text
14px Semibold
Label
12px Regular
High fidelity design
Measurable Result
6 out of 8 reported satisfication with order flow process and supplier network.
I conducted usability testing with 8 participants: 5 retail shop owners and 3 marketing staffs.
Flow Tested
(Main flow) Find suppliers and connect with them.
(Secondary flow) From ordering products to tracking order progress.
Methods
Tracked errors and measured task completion for each flow.
Metrics
Collected post-test feedback using SUS (System Usability Scale) and NPS (Net Promoter Score).
79.5 average SUS score with NPS of 7.7
Good usability showing strong likehood of recommendation.
100% task completion
All test participants achieved task completion with 0% drop-off.
Based on testing results, Supplink validates as reliable and practical solution for retailers, and marketing staff.
Reflection
What I have learned from this project
Any design should align with user needs and business goals.
User conversations uncovered pain points and highlighted market gaps. By refining the order flow, I saw how solving the right problems drives both user satisfaction and business revenue.
Designing with empathy make better solutions.
I experienced these challenges firsthand, which allowed me to better understand users’ frustrations. This empathy helped me think clearly and break down the problems, leading to more thoughtful and effective solutions.
Next Steps
What I will do for future steps
Conduct testing with suppliers.
I will design a website platform that makes management easier for large businesses.
