Mobile App & Responsive Web Design
Locality is an app that allows users to buy from local businesses as well as donate to a business of their choice. There is an mobile application as well as a dedicated website. The app is focused on ordering while the website is focused on browsing for local businesses in the area.
User research, paper and digital wireframing, low and high-fidelity prototyping, iterate on designs.
Project Duration
April 2023 - May 2023
The Problem: At the beginning of 2023, there were many floods in northern California and many people had to close their businesses. Since their business would be a big part of their income, I wanted to create an application that helps these people to continue selling their products as long as they could.
The Goal: A goal of this project is to promote communities to shop locally and make aware of the businesses that are around.
User research was done on a limited group of participants. A low fidelity prototype was conducted, and it was discovered that the app felt too much like a shopping app, so designs needed to be changed to promote the businesses. A high-fidelity prototype was conducted later on in the project and found that there was too much information on screen.
About Regan:
Regan is from Northern California where the recent storms have caused enormous flooding. As a result, local businesses have been shut down due to bad infrastructure. He has grown close to a few of his favorite small business and would hate for them to go out of business.
Problem statement:
Regan is an avid small business shopper who wants to find ways to support his favorite local stores because the storms have affected the way he shops.
Age: 27
Education: Bachelors
Hometown: Santa Cruz
Family: Single
Occupation: Environmental Engineer
Goals:
Support local businesses,
Make their products accessible,
Website where users at home can browse catalog
Frustrations:
I can’t visit local businesses in person
Floods have destroyed some physical locations
About Kelsea:
Born and raised in Monterey, California, Kelsea wants to help her city and the neighboring cities recover from the recent storms. She wants a way to order from or donate to these small businesses from her phone because its most accessible to her busy lifestyle.
Problem statement:
Kelsea is a busy worker who needs access to local products on the go because she doesn’t have time to stop in stores but still wants to support her community.
Age: 26
Education: Undergraduate
Hometown: Hollister
Family: Eldest daughter
Occupation: Junior employee
Goals:
Mobile app to support local businesses,
One stop to see all local businesses
Frustrations:
I can’t visit local businesses in person,
I have to search multiple websites to find all local businesses
I noticed that categories are a big part of these websites. It makes sense because people would want to search for specific businesses that they are trying to shop. This is one thing I liked and incorporated to the discover section of my design.
For ideation, I use the Crazy Eights method to ideate designs. I wanted there to be an initial banner for the app version to showcase some businesses. I like the idea of cards because it provides a simple separation of business and its information. Rectangles and circles are used to make it feel more like a user profile than a product.
I wanted the home screen to showcase local events or put a business on the spotlight. When creating the cards for businesses, I got feedback saying they look more like browsing for products. With that, I changed the design to create a less shopping experience.
* Carousel: Highlight trending businesses and their products
* Cards: List of businesses that are popular in the community
To the right is the link to a low-fidelity prototype of the Locality app in Figma. (opens in new tab)
Parameters
Findings
Study type: Moderated usability study
Location: United States, In-person
Participants: 5 participants
Length: 15 minutes
1. Too much information presented
2. Businesses felt more like a product than an actual business
3. Need to better showcase business rather than their products
I received specific feedback on how the cards looked too much like a shopping app. I swapped rectangles for a singular circle with text under. This showcases the businesses logo and presents it less as a product. The use of circles also brings a familiarity to social media and user profiles/ channels.
Home/ Landing Page
<-- Left image: Before usability study
--> Right Image: After usability study
To make search more accessible by tap, I changed the lines for popular businesses with additional subcategories. I also added a donate button to provide users with more ways to support their favorite businesses.
Search/Discover Page
<-- Left image: Before usability study
--> Right Image: After usability study
To the right is the link to a high-fidelity prototype of the Locality app in Figma. (opens in new tab)
1. The colors that were chosen for the app consisted of light background with dark accents of the same shade. This allows for accents and words to be read without the need for additional changes.
2. Iconography was used and considered when creating buttons. Along with icons, the nav bar consisted of accompanying words so the user would know what each button does without assuming.
3. Voice search was added to the search feature to account for hands free options. Since the app is used on-the-go, users might have both hands occupied. Users might also struggle with vision that makes it harder to type using the on-screen keyboard.
The web version's main use is to browse and donate whereas the mobile app’s main use is to place mobile orders. With this sitemap, I wanted to focus on donating and the discover section.
Since the mobile version is smaller, I stacked the cards and displayed a smaller amount compared to the larger designs. I also had to take into account the front facing camera in the middle of the phone. With this in mind, I moved the name of the app to the left to leave room for the camera. The mobile design has swipe/carousel features when browsing sections whereas the tablet and desktop versions are static.
Impact:
The design allowed users to navigate and search for businesses. The majority liked the filter feature which helps narrow down their search.
What I Learned:
I learned that a mobile app and a responsive website don’t have to have the same use. By doing this, I can cater to the different types of users for each. I also discovered that my designs tend to have too much information and I need to work on a more minimalist design.
If you think I will be a great fit for your company, let's get to know each other!