top of page
trand-cover.jpg

#UX/UI  #Coursework  #DesignThinking  #B2B  #FMCG  #App

logo.png

Foodtrade
 An app for small-grocery shop owner in the UK.
 Role: UX/UI Researcher & Designer

food trade.png

Have you...

ever bought any food from a corner shop?

thought about how different brands of foods are delivered to the corner shop?

Challenges

123-Web.jpg
  • Consider multiple roles for shop owner (app user) in daily operation.

  • Design to switch different suppliers in one app.

  • Show real-time stock level and track order detail.

  • Create a credit control system.

  • Combine with suppliers' commercial interests.

  • Simple to majority age-group shop owner.

Solution Preview
Hi-Fi Prototype
 

33333.png
iphone-12-template.png
SCREEN-3.png
22222.png

Background &
Motivation

Business
Opportunities  

Design Thinking
Method

  • In 2021, I worked as a trade marketing officer. I traveled to 26 cities in the UK to visit over a hundred key-account clients to reassure the clients' complaints, maintain the loyal relationship, enhance the client's satisfaction due to order-boost-demanding but continually delivery delay, items missing due to labour shortages.

  • Based on the initial findings, I started to create the project to contribute to creating an innovative digital solution to potentially fill in the real-world inefficiency gap between independent distributors and their suppliers to benefit both parties.

  • This project creates a potential turning point for both parties in the post-pandemic and post-Brexit periods. Moreover, the application will benefit individual distributors by saving time when addressing real work scenarios. They are supposed to manage their business with multiple suppliers in one portable device with real-time checking rather than have different communication channels in comprehensive software.

  • The product package could be sold to the supplier to benefit their clients by improving efficient business service and enhancing individual distributors' satisfaction and loyalty. As a result, the innovative project visualises the particular distributor's needs and potentially helps FMCG companies (suppliers) achieve a win-win strategy.

  • A user-centered design method.

  • Research and analysis from users were considered throughout every stage, enabling me to back to check or have a cue to critical insights.

BI.png
ci7830-FoodTrade-Xi-Shared - Affinity Diagrams - Step 2 - Code Data.jpg

User
Research

Analysis &
Insights

  • 5 User Interviews 2 Expert Interviews / 53 Survey Responses

  • Recruitment:  The project was based on the coursework innovation without further practical implementation signed by an actual contract. In that case, it was changed into internal restraint (following University ethical supports) rather than external oversight.

  • Over 75% of the small-shop owner have at least 6 FMCG business partners to work with and order 2-5 times per week.

  • It was easy to miss or forget to order for a small-shop owner as different FMCG companies have different weekly delivery routes and order DDL.

  • It was time-consuming for a small-shop owner to add products again due to out-of-stock after they placed the order. They have to take risks to choose the products that may not sell well due to minimal delivery price. However, FMCG companies sometimes need the bundle sale strategy to test new arrival or approach BBD products.

  • 90% of small-shop owners don't have the budget to build their ordering system, and they place an order by calling, hand-writing, excel, or handbook.

  • Inefficient communication between small-shop owners and FMCG company employees as they can't find the right person to discuss.

  • The missing order and damaged items were more frequent than before in the food supply chain due to the Brexit food shortage.

final.jpg

Persona

User

|

"I don't want to waste my time on out-of-stock products and check missing items again and again."

Jenny potter.png

Expert

|

"Keep receiving the uncertain updates in multiple ways make them angry."

User
Journey Map

​Scenario​

  • Andrew owns a small supermarket in Liverpool. After graduating from higher education, he inherited his family business, which has operated since he was 21.

  • His wife worked as a cashier to help with the daily B2C operation and five part-time employees to implement daily routines using different rota lists. Andrew is the only person in charge of all B2B processes and ensures the supermarket is going well.

Foodtrade-CJM.png

User Stories

Foodtrade-US.jpg

​

  • Transferred from the different types of user journey maps, the critical Point of View from the target users and experts has been defined as below: 

  • Andrew as a user needs to manage all FMCG companies’ information in one app because he is the shop owner in charge of all business and daily operations.

  • Jenny as an expert needs to communicate to all her clients efficiently because she is repeating the same interaction and information to over 500 clients separately in the UK.

  • User stories are created to gain a deeper understanding and enable me to reflect and review the process in a further implementation.

Ideation

How Might We
Rapid Idea Generation
Crazy 8

NUF Test

Ideation.png

Competitive Analysis &
Conclusion

 

Lo-Fi Prototype

MarvelPOP.png
LO-FI.png

Information Architecture
Site Map

 

Mid-Fi Preview .png
Instruction.png
portfolio Backup - Competitive analysis.jpg
  • Besides the basic categories of analysis from the main features, I also highlighted the real user reviews to consolidate the complaints, satisfaction, suggestions and inspiration to combine and implement the project.

Style

Moodboard
Style Guide

Accessibility
Check

Hi-Fi Prototype

trade-hifi.jpg
  • 3 participants worked in the food industry and were involved in this project for the first time.

  • The tests were conducted online and face-to-face. 

  • The average testing session took around 60 mins.

​

  • 2/3 highlighted the land promotion page after login.

  • 2/3 highlighted the chat features to find the right person or quick address the requirement.

  • 2/3 highlighted the track order status.

  • 2/3 highlighted the credit control enables the user to check their overdue/upcoming/paid payment.

  • 3/3 highlighted the dark mode and font/language setting to adapt accessibility

  • 3/3 highlighted the stock-level update.

Valence Test & Analysis

portfolio Backup - Valence Test.jpg

Iteration Prioritisation

​  However,

  • 1/3 pain pointed the invoice list page confused user by number display.

  • 2/3 pain pointed the payment method didn't match their expectation.

​

  • The pain points reached the user stories and security concerns. Combined with the business needs and goal of the app, the following two features have been collected and iterated as prioritisation.

ITERAT 2.png
ITERAT-21.png

Iteration

Before

021333.png

After

image (3).png

Word Cloud
from Test Feedback

What I learned

As a problem solver, my previous work experience enabled me to discover the gap between small-shop owners and suppliers throw daily work processes and communication as they don't have enough budget to build or create their own systems. Combined with the Valence Test feedback with the No.1 keyword "Useful." I can see it being valuable and potentially commercial-driven in a future project. I learned to consider the whole experience with a user-centered innovation and always keep an eye on accessibility elements. I was so excited to receive different participants' feedback, whether they were "WOW" or confused. Behind their feedback were the target user's behavior and stories, which were valuable to me. 

​

A special thank you to Makayla for all the supervision and help :)

bottom of page