Let's see what's next?
Let's see what's next?
Embedded Files
Project overview
Product type: Mobile application
Objective: To help users quickly find and buy local homemade products (food, drinks, handmade goods) and interact with small producers in their region.
My role: UX designer, user researcher, prototypist.
Duration: 14 weeks
🔍 Problem
🔍 Problem
Users want to support local producers, but don't have a convenient way to find local products or services in their neighborhood. Social networks are not always effective, and marketplaces are overloaded with information.
Responsibilities:
Conducted user and competitor research
Created user screens and firewalls
Developed interactive prototypes in Figma Conducted usability testing and made changes
Created UI design according to the principles of the design system
Prepared materials for development
🎯 Project goals
🎯 Project goals
Create a simple and convenient interface for searching for local products using geolocation.
Provide sellers with the ability to easily publish ads and accept orders.
Increase the visibility of local initiatives.
✏️ Ideation
✏️ Ideation
The "How Might We" method was used to generate solutions.
We developed several variants of the user flow map for registration, product search, and ordering.
👥 User research: summary
At the initial stage, I conducted qualitative research through online surveys and interviews with potential users - people who search for homemade pastries and local products online. I assumed that the main need was a variety of products, but the research showed that users were more interested in the convenience of ordering, trust in the seller, and speed of delivery.These results had a significant impact on the design: I simplified navigation, added a view of available products without authorization, and emphasized local sellers nearby.
We conducted 8 semi-structured interviews with potential users: buyers and sellers.
The main pain points were identified: it is difficult to find a seller nearby, there are no reviews, there is no quality guarantee, and there is no possibility of prompt delivery.
There are two people: Joe (buyer, 38) and Oksana (home baker, 38).
Shoppers like Joe can't find local products quickly without complicated registration and verification of sellers' reliability.
Sellers like Oksana need a simple tool to publish products, take orders, and build customer trust.
User Journey Maps
User Journey Maps
The buyer's user journey includes:
Opening the app without registration
Viewing products by location
Selecting a product and viewing reviews
Placing an order
Receiving confirmation and delivery
The seller's path:
Registering as a manufacturer
Adding products with photos, descriptions and prices
Receiving orders
Sending goods
Receiving feedback
🔍 Competitive Audit
🔍 Competitive Audit
At the beginning of the project, I conducted a competitive analysis of four local services that specialize in selling desserts, pastries, and gift items:Sladké, Saint Tropez, Cheecup and Flowwow. The purpose of the audit is to understand the UX solutions they offer, identify strengths and weaknesses, and shape the unique benefits of my future LBS application.
Key observations:
Key observations:
Sladké: well-structured menu, but lacks interactivity in product descriptions.
Saint Tropez: a visually attractive interface, but limited order customization options.
Cheecup: emphasis on the brand, but difficult navigation and insufficient support for small producers.
Flowwow: has the best UX among the analyzed ones - quick search, sorting by location, convenient reviewing; however, there is little support for home bakers.
Conclusions:
Conclusions:
Most services are focused on visual aesthetics but have barriers for new sellers.
None of the services allows you to fully browse the assortment without registration.
There is room to create a platform that emphasizes localization, home quality, and affordability for both buyers and sellers.
This analysis provided a clear understanding of the market and helped lay the foundation for UX solutions in the prototype.
✏️ Wireframing
✏️ Wireframing
At this stage, I created low-detailed wireframes of the main application screens in Figma. The goal was to build the basic structure of the interface - without color, images, and decorative elements.
Prototyping
I created low-fidelity wireframes (on paper and in Figma).In the wireframes, I tried to depict a clear hierarchy: categories, products, orders.
Then, we developed a low-fidelity prototype in Figma with interactivity (home page, search, product card, checkout).
My goal is to create a simple, intuitive structure for an app that shows local products nearby.
The main focus is on the speed of access to the necessary information.
The user can instantly see what's available, filter by interest, and go straight to browsing products
Low-fidelity prototype
Product categories
Product page
Search
Shopping cart
My favorites
Checkout
Confirmation and thanks
Profile
Usability research: conclusions
Two rounds of usability research were conducted during the product development process. The first round took place after a lo-fi prototype was created to test the navigation logic, interface structure, and clarity of key actions. The second round was held after the lo-fi prototype was improved.
Round 1 findings
Confusion in navigating between category screens;
Insufficient visibility of action buttons;
Round 2 findings
Participants did not always find the filters
Some buttons had low contrast;
Sellers found it difficult to find the order management section.
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Access to categories has been changed. The color scheme was selected based on the brand, accents were added, and the product rating was displayed
Before usability study
After usability study
Before usability study
After usability study
More intuitive category browsing has been created
The improved mocap took into account the :
corporate identity,
choosing a theme,
intuitive user journey
A database of styles and components for moccasins has been created
Then we developed a high-fidelity prototype in Figma with interactivity (home page, search, product card, checkout).
The prototype was created on the basis of previous research and a base of brand styles and components that were previously approved and implemented
Accessibility considerations
1. Contrast and color:
Sufficient contrast between the text and the background is provided so that users with visual impairments can easily read the information, even outdoors in bright light.
2. Font size and controls:
All interactive elements are sized and indented to make them easy to use on touch screens, including for people with motor impairments.
3. Alternative text for images:
Added text descriptions to visual content (e.g., icons, product photos) to help visually impaired users who use screen readers navigate the interface.
4. Navigation from the keyboard:
The interface can be fully navigated using the keyboard, which is important for users with limited mouse skills.
5. Use of clear language and iconography:
The interface is based on simple language and familiar icons to improve the perception of people with cognitive impairments.
🧪 Testing
🧪 Testing
5 usability testing sessions were held via Zoom.
Changes were made to the navigation and the checkout interface was simplified.
🧠 Conclusions
🧠 Conclusions
Users appreciate simplicity, clear language, and localization.
Integration with maps and reviews is critical.
Next steps: public testing of MVP, payment integration.
🔗 Tools.
🔗 Tools.
Figma
Google Forms (for surveys)
Google Maps API (geolocation prototyping)
Page updated
Google Sites
Report abuse