Supporting local, made easy
This e-commerce shopping app was created for a fictional client based in NL, Canada, who saw a desire from the local public to support local vendors, without the proper tools to complete this task efficiently. The app is intended to provide an easy method for users to shop local vendors, all in one platform.
This project was completed as part of the Zero to Mastery Academy certificate “Complete Web & Mobile Designer: UI/UX, Figma +more”.
My Role
UI Designer
UX Designer
Team
Solo Project
Tools
Figma/Figjam
Pen & Paper
Duration
6 Weeks
(Part Time)
The Problem
Supporting local businesses is hindered by challenges, such as:
Lack of centralized platform for connecting users with local vendors
Difficulty finding local items across multiple platforms
Inconvenience of traveling to different shops or businesses
Limited access to farmers markets in remote areas
These pain points affect the consumer, by not being able to conveniently find the items they are looking for, while simultaneously affecting seller sales.
The solution
Develop an intuitive e-commerce platform that centralizes local vendors’ offerings, providing users with easy access to a diverse range of local items, regardless of their location.
My Design Process
Research
Stakeholder Interview
To best understand the overall mission and goals of the stakeholder, a stakeholder interview was conducted: Specifically looking at their vision, target users, and potential constraints
Product Vision
Create an efficient and inclusive market for users to purchase local goods, without the need to travel to different stores, or attend weekly farmers’ markets.
Target Users
Males and females, between the ages of 30 - 45
Constraints
Vendors may be wary of the product and fear it could reduce sales
Competitive Benchmark
I completed a competitive benchmark against some of the top-rated e-commerce platforms available, focusing on usability, design, features, and overall user satisfaction.
The key findings from these analyses were:
Create a clean and simple UI to draw focus on the products being displayed
Add personalized recommendations based on users interests and previous purchases
Use a familiar and intuitive search engine, to reduce confusion
Provide quick and easy options for completing checkout/payment
User Story Map
In order to outline the interactions that a user would typically go through to achieve their goals, a User Story map was created.
User Personas
To help empathize with the user, user personas were created. These personas were based on:
Primary User - Buyer, who lives in rural NL and wants increased access to local goods
Secondary User - Seller of local goods, looking to increase sales.
Design
User Flow Sketches
To help visualize the optimal user flow through my design, I created a user flow diagram in Figma, focusing on the primary use case. This was effective in helping me define a clear structure of the software while considering information architecture, visual hierarchy, and the overall relationship between content.
Wireframes
Once I was confident with the overall flow, I created low-fidelity wireframes to form the overall design structure.
High-Fidelity Design
Now it is time to see the design come to life! I increased the fidelity of the design to help stakeholders visualize the final product, and see exactly what we were looking to achieve.
High-Fidelity Prototype
I created a prototype to give a realistic feel for the design, and also give additional information to developers on the types of interactions I would like to see throughout!
Conclusion
Conclusion
This was my first project completed using Figma, and provided me with extensive knowledge in how to use the platform, along with deepening my understanding in the overall UX Design process.
Areas for improvement
Additional Research
Given the limited timeframe and resources for this project, limited research was completed.
Additional research, such as Usability testing, would benefit the overall design and development, allowing us to understand exactly how the user would interact, and identify pain points.