spec • ux research • ui design
Creating a web app
to connect users with local businesses
Localite is a website that helps its users find their local small businesses in their area.
The goal is to connect people to their local community, supporting the short scale market, which benefits the economy and reduces the environmental impact of transportation.
Localite is a website that helps its users find their local small businesses in their area.
The goal is to connect people to their local community, supporting the short scale market, which benefits the economy and reduces the environmental impact of transportation.
Project duration: September to December 2021
Project overview
The problem
People usually go for convenience when they choose where to spend their money, and that is usually large companies that produce an excessive amount of waste, while not necessarily contributing to improving their local economy.
The goal
Design a MVP of a website where users can find products and services, prioritizing physical proximity and featuring businesses that are labeled as small or are just emerging to the market.
My role​
UX designer designing the Localite website from conception to hand-off delivery.
Responsibilities​​
• Conducting research
• Creating personas and user journeys
• Defining problem and hypothesis statements
• Conducting interviews
• Ideation processes
• Creating paper and digital wireframing
• Low and high-fidelity prototyping
• Competitive audit
• Conducting usability studies
• Accounting for accessibility
• Iterating on designs.
Understanding the user
Research & Insights​
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs.
​
A primary user group identified through research was people ages 25-50, who are often in charge of doing the shopping for home necessities and express an interest in the environment and supporting the local economy.
​
This user group confirmed initial assumptions about Localite users, and research also revealed that they were looking not only for products but also for professional services.
Pain points​
Identifying a small business: Some users don’t know how to identify a small business from a large one while searching in Google Maps.
​
Who are they supporting: Because some businesses appear small, users do not know who owns them, and are not sure if an apparent small business is owned by a much larger one or located overseas.
​
Environmental impact: Not all businesses share a vision in terms of their impact on the environment or the source of the products they offer.
Problem statement​
Mariana is a busy chemist, wife, and mother, who needs to find quality food that is near her because she wants healthy food for her family without having to commute large distances.
.png)
User journey map​
Mapping Mariana’s user journey revealed that a web tool to find local and fresh produce with convenience features could improve her experience.
Ideation
After reflecting on Mariana's pain points and her user journey I began drafting iterations of the home screen for the mobile website version first. A progressive enhancement design approach (mobile-first) was needed since the product's main features are location-based. For the home screen, I prioritized a search functionality with buttons for different business categories, allowing a matrix structure model to take place.
Feature ideation​
After two sessions of Crazy Eights, many ideas for the website's possible features were put forward for consideration. In order to keep the core mission of the website it was decided that the map functionallity will have a distance limit from the user's location to display results. This limit allows small and/or emerging businesses to be discoverable by their potential customers nearby, and avoid businesses with a much higher and established rating but are far away to take the spotlight.
With these considerations in mind, the following information architecture was built.
Mid-fidelity mockup​
Having prioritized the search functionality for the above-the-fold section, the next elements of the navigation are laid out in a long scroll format, allowing the user to scroll past the search function and enter an experience of discovery.
Mid-fidelity prototype​
After a round of usability testing, a mid-fi prototype for desktop versions was resolved.
The primary user flow connected consists of:
1. Searching for a product.
2. Choosing a business of interest.
3. Displaying relevant information of the selected business page.
4. Rating the selected business.
Refining the design
Usability study​
I conducted an unmoderated usability study to reveal insights for the main user flow. An affinity diagram was used to collect findings and prioritize their urgency levels. Findings from this testing helped guide the designs from a mid-fidelity prototype to high-fidelity mockups.
High-priority findings​
-
Business owners can’t find how to post their businesses.
-
Rating system doesn’t allow to review on the same page.
-
User reviews only displayed chronologically.
Low-priority findings findings​​
-
Some wording needed refinement.
-
Map’s zoom functionality is limited.
Key mockups​
High-fidelity interactive prototype​
The final prototype in desktop format considered the issues found in the usability study and addressed them so that the user flow for the main task could be achieved and provide a positive experience for the user.
The visual style expresses a friendly tone with a casual voice to make users feel relaxed and enjoy using Localite and feel excited about discovering what their local market has to offer for them.