REP.
My team and I collaborated to design a new app from the beginning phases of research, through to hi-fidelity mockups, as well as next steps that we would like to explore moving forward.
This case study explores the process our team took in providing the client with user based design solutions and highlights the choices we made as UX designers centering user research.
Project Duration
2 weeks
My Roles
UX Researcher
UX Designer
Team
Christopher Matthews
Jasmine Brown
James Lim
Min Park
Deliverables
Persona
Journey Map
Competitive Analysis
Lo-Fidelity Wireframes
Mid-Fidelity Wireframes
Hi-Fidelity Wireframes
Prototype
Wireflow
About the Project
The team worked together to come up with ideas for a new application or website that could be used to solve issues that people are facing in their everyday life and what problem areas that can hopefully be resolved with an app. In order to brainstorm individual ideas, we used a collaborative software program to generate ideas of potential areas of focus and topics we would like to explore. Through that we were able to then vote on some choices and explore them deeper. After additional discussion and feedback we decided to chose a topic that we all felt strongly deserved our attention.
Goals
We imagined an app that is a centralized platform housing information to help the user locate small minority owned businesses within specific communities.
We aim to improve the overall experience of making conscious decisions for consumers who want to support specific communities. The user struggles today because of the lack of information available to consumers about businesses, and the communities they support.
Discovery
User Interviews
To understand how people currently support small minority owned businesses and learn about their experience, we conducted user interviews with screened participants and received valuable data.
The interviews aimed to discover the behaviors, goals, needs and pain points from the process of locating small minority owned businesses within specific communities. We individually interviewed participants and came together with our results to synthesize our data.
What We Found
From our interviews we found valuable information on what users want and need in order to discover and locate minority owned small businesses.
Community
Users support small businesses because it directly impacts the community.
Diversity
Users want to support diverse businesses.
Owner
Users want to know who their money is going to.
Promotion
Users promote businesses through their network.
Define
In order to put all of these insights and findings into a comprehensive and understandable format, we created a Persona that represents our users. This was important for our team to refer to throughout the process and equally provides the stakeholders with a clear understanding of who the user is and that their needs, goals, pain points, and behaviors are in a visual representation.
Persona
From our research we generated a persona by the name of Eliza to reflect our target user and to utilize and refer to them while designing this new app. The persona helps to put the relevant information and data we collected about our users to the forefront and is an amalgamation of our users we researched, represented by shared Goals, Needs, Pain Points, & Behaviors.
Eliza is a Freelance Creative that wants to support more small businesses that represent minority groups. Especially due to the current growing awareness around social injustice, she feels the urgent need to be more conscious about the businesses she supports.
Some of highlights are as follows:
Wants to support minority owned small businesses.
Needs to stay within her budget.
Needs to be able to share and promote businesses with her network.
Struggles to find a platform that helps to locate small minority businesses within specific communities.
Doesn’t see her community and other communities represented enough.
Journey Map
After creating our persona, we wanted to show what her current experience of locating and supporting small minority owned businesses. Using a journey map as a tool we were able to see her actions, mindset, and emotional experience throughout the phases of her encounter prior to using the app we will later design for her.
We see how she typically searches for and finds information about minority owned small businesses. Typically through social media platforms (Instagram stories/pages, as well as Google searches and websites) but finds that the information is overwhelming and scattered. When she encounters lists, she feels the information about the businesses are not organized in a way that is time-efficient and some of the businesses are out of her price range. She takes a while to go to individual websites of the businesses and finally finds what she is looking for but wouldn't want anyone to have to go through the same tedious research and discovery process as she did. Below is the full journey map we created to illustrate her experience.
Problem Statement
Eliza is having difficulty finding small minority owned businesses to shop from, due to the lack of accessibility to resources.
How might we help her make an informed decision about which businesses to support?
To understand the current market we researched brands and apps available, that have commonalities with our idea. Some of the brands we looked at were: Yelp, Eat Okra, Craigslist, and Etsy.
We used our research as well as comparisons with these brands to explore potential features to include in our design for the app.
After looking at said brands and their features, we used a feature prioritization method to see what features we must, should, could, and won’t use in our design. Through this process and our research it was clear to us that the design should include the following features:
Categorization Feature
Price Range Display
Map/Location Feature
Favorite Feature
Sharing on Social Media
Business Contact Information
Business Hours
Business Owner Bio
Competitive Feature Analysis
Design
Knowing what was important for Eliza from our research, we wanted to focus our design on incorporating features, make design decisions to capture her needs and create solutions to address her pain points. We conducted a Design Studio to draft potential designs.
Lo-Fidelity Sketches
Homepage
Search by location
Categorization by Restaurants, Shops, & Services
Business of the Month
Shops
Filter/Sort
Business information
Price Range Display
Business Page
Favorite Feature
Sharing on
Social MediaBusiness Contact Information
Highlights
Business
Owners Bio
A picture of the owner with a bio
Testing
Following the Design Studio, we were able to make these sketches into Lo-Fi Prototypes using a program called Marvel and conducted usability tests with users to see if the information and navigation of the app was easy and intuitive.
We found that users wanted to see:
A Favorite feature on the Restaurants/Shops/Services page.
Store Hours on the Business page.
“Highlights from the Business (that we later named Badges)” higher on the page in the Business Information section.
Mid-Fidelity Wireframes
Homepage
Search by location
Categorization by Restaurants, Shops, & Services
Business of the Month
Shops
Incorporated a search bar
Added Favorite Feature
Price range moved above the business information
Business Page
Store Hours
Highlights (Badges) moved above the About the Owner section
Testing
From usability testing on the Mid-Fidelity prototype, the users tested were able to complete all the actions tasked to them and said that the app had a clear layout and was user friendly. However, there were some suggestions from the users that we decided to include in our next iteration of designs.
We found that users wanted to see:
A “Thank You” message after signing up for the app. (on-boarding).
The Filter feature to narrow their search
(was included in the Lo-Fi wireframes/prototype but was unintentionally left out of our Mid-Fi design).Badges moved even higher on the page above the “Store Hours”.
Clear labeling for the Social Media links (more section).
Delivery
Taking those results and feedback into consideration, we moved into building our mid-fidelity mockups.
Hi-Fidelity Wireframes
Homepage
Search by location
Categorization by Restaurants, Shops, & Services with icons
Badges with icons to search by specific communities
Business of the Month changed to Featured Businesses
Shops
Search bar to narrow search
The Filter feature to narrow search
Business Page
Moved the share feature lower
Incorporated Social media links
Distinguished the badges section
Moved the picture of the owner with a bio directly on the page and not as an overlay
Testing
After creating the Hi-Fidelity prototype we conducted another round of usability testing.
100% of users were able to successfully complete the tasks.
We found that:
Categorizing using Badges was helpful for users to navigate the app.
Incorporating dollar signs informed the user of the business’s price range.
The information about the business owner was clear to the user.
The icon chosen was recognizable and the placement was clear to users .
Next Steps
More interactions used on the app (swipe instead of only clicking) would help reduce the amount of clicks and streamline the users navigation through the app.
Redesigning or selecting consistent icons/badges that are aesthetically pleasing and matches the design of the app would help enhance the visual experience for the user.
Badges on all pages to help with find-ability of the businesses they are looking for.
Ultimately we would like to explore expanding the scope of the project to include more businesses and communities as well as incorporating duel channels for both customers and businesses.
Hi-Fidelity Prototype