Locate is a discovery app that finds local products near you.
Role
UX/UI Designer, UX Researcher
Introduction
This project was completed about 2 weeks prior to Christmas 2020.
Covid-19 is still running rampant.
Big box stores are allowed to remain open because they are considered a necessity.
Small businesses are forced to close.
Some local businesses sell their products online in their own stores or through other retailers.
However, since major delivery carriers have an influx of shipments, big box stores gave customers immediate gratification.
Design Process
Discover: Problem Space, Secondary Research, Primary Research
Define: HMW, Persona, Experience Map, Task Flow
Develop: Visual Identity, Sketches, Wireframes, User Testing
Deliver: Prototype
Discover
Problem Space
Covid-19 has turned local businesses upside down. They need help to make it through the pandemic.
Pre-Covid: There were more opportunities for local businesses to showcase their products: physical spaces such as markets, trade shows, festivals.
Since Covid: Depending on where you live, restrictions or bans have been placed on physical spaces and events.
Local businesses have had to move their presence online. Without proper digital marketing and social media, local businesses presence may disappear.
There is an opportunity for exploration here.
Secondary Research
The #1 reason preventing small businesses from fully reopening is Government mandated closure. Fewer customers and lower sales are the root causes of a slower recovery for small businesses. Established small businesses take to social media to encourage customers to return after COVID-19 closures were lifted.
Statistics Canada - majority of businesses of all sizes reported revenues down from April 2020 compared to April 2019. Approximately 2/5 of businesses with between 5-99 employees reported their revenues were down 40% or more.
Canadian Federation of Independent Businesses - July 2020 estimated the number of small and medium sized businesses in Canada at risk of closing during Covid-19 is 1 in 7. And that estimate does NOT include business closures due to COVID-19 that already happened prior to the end of June.
Primary Research
I interviewed five individuals as the next step in my research process. The key findings from this research were people that:
- generally wanted to engage with local businesses in person
- wanted to see a product in person to determine its quality
- wanted to make minimal shopping trips during covid
- wanted to shop within their neighbourhood vicinity
Define
HMW
Based on the research findings, I created my 'How Might We' question…
How might we provide better access to small business products in order to make it easier for consumers to support local?
Persona
In gathering my insights from my research and interviews, I created my persona Janice.
Experience Map and Epics
I mapped out Janice's experience of browsing through products, finding where to purchase, trip planning, going to the store and buying the product.
From this, I compiled user stories into epics.
The three epics that I discovered were community, quality and convenience. In gathering insights from my research, the epic I turned my focus towards was convenience.
Task Selection
There was absolutely an opportunity for design intervention here. What comes to mind to make Janice’s experience come to life would be:
- The ability to search different categories of local goods
- A way to find where items can be purchased nearby
- A list and/or map of retailers near them that sell those products
- Business information to make it easy to plan your shopping trip
Task Flow Diagram
A task flow diagram was created to gain an understanding of how a user might search and find a local product nearby.
Develop
UI Inspiration
These are the UI features I wanted to implement in the wireframes.
Mood Board
The adjectives that describe the feel of the app are local, relaxing, easy-going, thoughtful, convenient, neighbourly, calm, supportive and close-knit. The picture in the middle inspired the colour scheme I wanted to implement.
Colour and Typeface
I chose green because it represents eco-friendliness and freshness. These characteristics remind me of farmer’s markets, which are quintessentially local.
Purple represents mainly creativity and also quality. These are all things that I associate with local business goods.
Logo font:
Lilita One is a display font with a fat appearance and ideal for adding a soft, personal feel.
Body font:
Futura is a geometric sans-serif font that has a very clean, simplistic and modern presentation.
Sketches
I drew a set of Crazy 8 sketches to gain an idea of the user interface for this product.
First Iteration - Lo-Fi Wireframes
These are the first iteration of greyscale wireframes.
First Iteration - User Testing
Key learnings and design changes to be made from conducting user testing on 5 individuals that actively support local businesses:
Favourable:
- map feature
- amount of info on the map
- store pages
- product categories
- search bar option
- redirection to Google Maps
Not favourable:
- floating action button confusing
- trouble locating navigation menu
- social media icons too big
- body font size hard to read
- can’t see reviews of products
- want to know which retailers are locally owned
- buttons are small
- couldn’t tell if button was clickable
Design changes:
- different use for floating action button
- add a navigation bar
- reduce the size of social media icons
- increase body font size
- add reviews feature for products
- add a filter option to filter out only local retailers
- make the buttons larger
- add inactive and active state for buttons
The Name - Lightbulb moment!
It was after the first round of testing that the lightbulb went off in my head and a name for this app came to me.
After reading the words 'local' and 'locate' many times over, I noticed the vertical line of the 't' in 'locate' could double as an 'l'. I wrote this vision out in two colours, and the rest is history.
Revised Task Flow (after first iteration)
Changes to be made for second iteration are labelled in red.
Second Iteration - Lo-Fi Wireframes
These are the second iteration of greyscale wireframes.
Second Iteration - User Testing
Key learnings and design changes to be made from conducting user testing on 5 individuals that actively support local businesses:
Favourable:
- map feature
- amount of info on the map
- product reviews feature
- size of body font
- ‘Filter applied’ text on map
Not favourable:
- wanted to stay logged in
- lacklustre landing page
- No need for FAB if there’s a menu bar
- wouldn’t use ‘Report error’
- can’t see locate button on product page
Design changes:
- add ‘Remember me’ feature on login screen
- move featured section to the landing page
- remove FAB and “Report Error” function
- place filter icon directly on the map
- compress information on product page to see ‘Locate’ button
Revised Task Flow (after second iteration)
Changes to be made for second iteration are labelled in red.
Final Iteration - Hi-Fi Wireframes
Here is the final iteration of high-fidelity wireframes.
Deliver
Prototype
View the final iteration of my prototype for Locate below. Be sure to view it in full screen for the optimal prototype walk-through experience. Best viewed on desktop.
Future Considerations
Some ways to improve the user experience and help local businesses further would be to:
- Offer a service where items could be ordered directly through the app. The reason I say offer a service if not to have Canada Post, UPS or a major player deliver goods, but maybe a smaller local service for these deliveries in keeping with the theme of support local
- Developing a task flow for users to suggest local business products
- A nomination system or contest to determine featured items
Key insights and growth
This was my first major solo project in UX Design.
Here are some things I learned along the way:
- Trust the process. It will make the answers to the questions clear.
- Your user. Not you. Do not become married to your designs. It will break your heart.
- Organization. It is the be-all end-all of your UX life on a project.
- Be open to new ideas. Breakthrough moments can happen that will make you want to take your vision in another direction. Go with it. You may learn a thing or two.
Back to top
