In the past, grocery owners and farmers in the fresh produce industry struggled to connect, often relying on referrals or making time-consuming phone calls to secure trustworthy suppliers for contract deliveries. FreshX transforms this process by introducing a B2B online marketplace and analytics platform that simplifies the way buyers and sellers engage. With FreshX, grocery owners can easily find and connect with reliable sellers, browse products, and negotiate bids directly through the platform, ensuring a smoother, more efficient trading experience.
SCOPE
6 Months
TEAM
6 Members
MY ROLES
UX Designer
Interaction Designer
User Researcher
Discover
Overview & Challenges
FreshX is a B2B e-commerce platform that connects grocery owners and farmers, enabling them to do business directly. While the website caters to both sellers and buyers, for clarity in explaining my design process, I will focus on the buyer's perspective — grocery owners using the platform to find and purchase fresh produce from sellers, who are farmers.
My initial impression of the website was that it lacked user intuitiveness. Several minor UI issues and certain aspects of the UX flow were confusing and misaligned with user expectations.
​
To address these challenges, I began by thoroughly understanding the business model to ensure my solutions aligned with the company’s goals. I then conducted a heuristic evaluation to analyze the website, identifying usability issues and human factors violations that negatively affected the user experience.
Identifying Issues
My initial approach was to use the heuristic evaluation method to analyze the platform and identify any existing issues. I discovered 22 areas of concern, some of them are engineering issues, the others are UX/UI problems. I then collaborated with the product manager to create 15 actionable tickets to address these issues
The tickets I was assigned focused on enhancing the user experience for navigating and viewing products. This included:​
-
​Restructuring the top navigation.
-
Making product navigation more intuitive.
-
Simplifying product cards.
-
Refining the aesthetics and layout of the homepage.
-
Improving the product filtering process.
-
Enhancing the map functionality.
22
Identified Issues
15
UX/UI Problems
15
Tackled Designs
Research
Our Target Users & Why They Use Our Platform
-
Grocery Store Owners
-
Wholesale Distributors.
-
Farmers and Growers.
-
Foodservice Operators (e.g., restaurants, catering businesses).
-
Food Manufacturers.
Insights from Users' Data
During the research phase, I collaborated with the product manager to better understand users' experiences with the current website. The product manager shared Mixpanel data, highlighting areas where buyers were most and least engaged, as well as interview notes from user feedback. These insights helped me identify key pain points and opportunities for improvement.
Insighted problems that I learned from buyers:
-
The top navigation displays all features as text, which feels overwhelming for users.
-
The product cards contain too much information, making them difficult to scan quickly.
-
The product viewing flow is confusing because of the unnecessary steps
-
The product page is overloaded with information, making it hard for users to find what they need.
-
Identifying specific available items is challenging.
-
​The map, while visually appealing, does not add significant value to the workflow.
Buyer Persona
In this development phase, I created a buyer persona to better understand and visualize the needs, goals, and pain points of our target audience. By building a detailed persona, I can ensure my design decisions are aligned with the real experiences of the buyers, allowing me to create more user-centered solutions that address their specific needs.
User Journey
I created a user journey to gain a deeper understanding of how buyers interact with the platform, identify pain points, and highlight areas for improvement. By mapping the steps buyers take, along with their thoughts and emotions during key actions like discovering, finding, filtering, and comparing products, I uncovered gaps in the experience, such as confusing navigation and inconsistent flows. This process enabled me to prioritize solutions that improve usability and better align the platform with user needs.
Heuristic Evaluation
Ideation
In this Ideation Phase, my product manager and I mapped out the information architecture and sketched the navigation flow to begin visualizing the design solution.
The information architecture helps define the main goal of each page and determine the primary focus to guide users effectively.
I then sketched rough wireframes on paper to visualize the layout, placement of elements on the pages, and the overall flow of the user experience.
Design + Testing
I collaborated with the product manager to review and refine 15 tickets based on findings from my research. Following this, I created high-fidelity wireframes and prototypes to visually demonstrate how the design solutions flow seamlessly through each interaction.
Design Solutions Break Down
Top Navigation
Solution:
- Convert features like Messages, My Account, and Support into icons to help enhance recognition and improve the user experience
-
Icons are visually intuitive, making it easier for users to quickly identify and navigate to these features without needing to read text.
-
Position the product categories at the bottom of the navigation bar while placing the insight data features at the top. Increase the text size of these insight features slightly to establish a clear hierarchy and emphasize their importance.
-
Integrate the search feature to improve and streamline the user search experience.
Top navigation (Website)
Top navigation (Mobile)
Default state
Hover state
Product Cards
Solution:
- Break down key information and organize it into a clear hierarchy
-
Apply the Gestalt principle by using spacing to create logical groupings.
-
Grouping related elements helps users process information intuitively.
Homepage
Solution: I took into account the platform’s future focus on showing more data and made design changes to support that.
- ​I removed the hero image and moved the search bar to the top navigation.
-
I redesigned the homepage to have a dashboard-style layout, which fits better with the future focus on displaying data. The data shown are just placeholders for now.
-
The main goal of this design is to improve the look of the homepage and make the layout more efficient
.png)
Viewing Products Flow
Solution:
-
Remove the product variety card and replace it with individual product cards to maintain consistency when users click 'View All' on the dashboard.
-
Simplify the layout with a 2-column grid by moving the map to the right and placing the filter above the product cards, enhancing clarity and navigation.
Navigating Products
Solution:
-
Implement a full-width dropdown menu. This menu incorporates product images to enhance visual recognition and make it easier for users to find what they’re looking for.
-
I included batch numbers to show the number of listed products, helping users avoid clicking on unavailable items.
.png)
Filtering
Solution:
-
Incorporate tabs for different filter options.
-
This allows users to easily switch between relevant filter types (e.g., products, product grades, certifications), making the filtering process more intuitive and efficient.
Map
Solution:
-
displaying product data and making the location more prominent when users hover over a specific product card
-
when hovering over a product card, the 'My Activity' section at the top of the map shows if the user’s business has previously bought or requested this product.
-
This approach enhances the user experience by providing relevant information at the right moment, helping users quickly connect product details with their location and past interactions, which aids in decision-making and builds context for future purchases.
User Testing
Throughout the design phase, my product manager and I conducted several user testing sessions to gather early feedback and refine the design. These sessions led to the following improvements:
​
-
Adding the available quantity for product listings.
-
Updating copy for clearer communication.
-
Enhancing the visibility of product locations on the map.
Final Design
KPI
By enhancing platform navigation and usability, my design increased product category searches by buyers by 5x and grew sellers' product listings from $4M to $8M.
5x increase in product category searches
$8M worth of product listings from sellers.
What I've Learned
This project pushed me to think beyond quick fixes and focus on simplifying the design based on a deeper understanding of both the business model and user goals. By doing so, I created a more intuitive solution that makes navigating and bidding for products easier.
​
Collaborating with the product manager and engineers taught me to consider different scenarios, business constraints, and how the backend functions, which allowed me to solve problems more effectively and ensure the features were both user-friendly and practical.
​
I developed my communication skills by articulating my thought process to the product manager and engineers, actively participating in discussions, and collaboratively reaching effective solutions.
