UX + UI DESIGN | iOS NATIVE MOBILE APP
TIMELINE
2 weeks
THE TEAM
MY ROLE
Jasmine Brown
James Lim
Chris Matthews
Min Park
UX Reasearcher
UX Designer
UI Designer
TOOLS
Trello
Miro
Figma
Canva
Google Slides
THE PROBLEM
We aimed to improve the 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.
OVERVIEW
The impact of the COVID-19 shutdown on minority owned businesses has been detrimental as it has been difficult for them to keep up with paying rent or payroll do to there being little to no earnings and as a result, having to layoff employees. Many minority business owners also lack the resources necessary to successfully access federal support programs. When you choose to support a minority owned business, you are not only helping out the entrepreneurs and business owners. You are also helping their employees and communities these businesses are in and also indirectly the communities that these businesses support.
Consumers are also struggling do to the lack of information available to them about businesses and the communities these businesses support. My team and I aimed to improve that experience of making conscious decisions for consumers who want to support specific small businesses.
The aim is to create an iOS native app that can help the user locate small minority owned businesses within specific communities.
THE DISCOVERY
Our team had discussed various issues that we might want to help improve. We ended up creating the following opportunity statement when we came across a topic that the team and I felt needed more support.
We will improve the 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.
Opportunity Statement
Once we had our opportunity statement we then moved on to creating a competitive brand matrix. The team and I noticed that these brands lacked providing information on minority owned businesses and the communities they support. Our app would reach a general audience that is looking for specialized informative content, and are also consumers.
Competitive Brand Matrix
User Interviews
After researching the market and seeing that there is a lack of information on minority owned businesses, my team and I created and sent out a screener survey. This survey was created to find relevant interviewees that might help give us the insights and data we were seeking. We had a total of 37 responses to our screener survey and extracted 11 interviewees.
After finding our 11 participants to be interviewed, we asked the following questions during our interview sessions.
-
Do you look to support businesses within specific communities?
-
How do you find out about who owns the businesses you support or want to support?
-
What channels do you rely on to find information about that business?
-
What information do you search for when supporting a business?
-
What devices do you currently use to find information?
Some insights we found from our eleven interviews were:
-
Users prefer mobile for convenience.
-
Users want to support businesses with good morals.
-
Users support small businesses because it impacts the community.
-
Users prefer to see easy and clear to digest information.
-
Users need the search to be easy.
-
Users promote businesses through their network.
-
Users want to support diverse businesses.
-
Users want to know who their money is going to.
Screener Survey Responses
37
Interviews Conducted
11
SYNTHESIS
Next, the team and I took the insights and data we collected from our interviews and the patterns we found from our affinity map and created our persona to represent the user. Meet Eliza.
Our Persona Eliza
(Click to Enlarge)
Needs
Some needs our persona Eliza has are:
-
To quickly find information about businesses and if they follow ethical practices.
-
To know if the business owner has a diverse background.
-
To see clear and easy to digest information (visual aids).
-
To stay within a specific budget.
-
To be able to promote small businesses through social media for easier access to the information.
Pain Points
Some pain points our persona Eliza has:
-
Hard to locate small businesses within specific communities online.
-
Doesn't see their identity/community represented enough.
-
Hard to find reasonably priced products/services that meet her budget while shopping from small businesses.
-
Not knowing if businesses support inclusivity and follow ethical practices.
-
Not knowing if businesses/owners are backing organizations/people against her values.
Journey Mapping
After creating our persona Eliza, the team discovers while making the journey map that Eliza had to search Google to try and find information on small businesses within her community and she’s overwhelmed with the amount of information she has to sift through as this will take to long. She also wants her friends to have a better experience searching for information than she currently is. These are some key points that the team will keep in mind as we journey through our design process.
The team and I were delighted to begin the design process after we identified the problem we needed to fix.
The initial step to starting our design process was to figure out what features our competitors and comparators were providing consumers.
The team and I created and used a competitive/comparative feature analysis chart to extract this information from our various competitors and comparators.
Eliza's Journey Map
(Click to Enlarge)
Problem Statement
Once the team and I were finished creating our Journey Map (Eliza’s journey) we needed to come up with a problem statement to help address the problem at hand that we wanted fix.
PROBLEM STATEMENT
How might we help her make an informed decision about which businesses to support?
Eliza is having difficulty finding small minority owned businesses to shop from due to the lack of accessibility of resources.
DESIGNING
Competitive/Comparative Feature Analysis
(click to enlarge)
We discovered that some of these other channels lacked providing users with information on business owners and the businesses they own. A few others did not offer a map option to help the user locate businesses easier. These were definitely some features we needed to adopt into our app to help the user have a well rounded and informative experience.
MoSCoW Feature Prioritization
The next step we took was to figure out which features we were going to include in the MVP (minimal viable product) that would help benefit Eliza (our persona) and the many other user like her.
After researching the problems on Eliza’s journey, the team and I decided that we need to incorporate the following features into our app:
-
a search bar
-
price point display
-
Business contact info
-
Google Maps API
-
an owner profile
-
a filter option
-
a share feature
-
user account
-
link to the business website
-
photos of the business
These are just a few of the features we decided to start out with as the team viewed them as some of the most important ones that benefit the user.
Design Studio
After deciding which features we as a team viewed as important to incorporate into the app, we moved onto the Design Studio phase to start the designing process. Here, we collaborated design ideas quickly through sketches as we kept Eliza (our persona) in mind.
Images From Design Studio
Top: Home Screen, Bottom: Businesses Screen
(click to enlarge)
Mid-Fi Wirefames
After a couple rounds of design studio and usability testing our lo-fi designs, the team moved on to create our mid-fi wireframes. Keeping our persona Eliza and our insights from the usability testing in mind, we made some edits and took our designs into Figma.
Using Figma allowed our team to work collaboratively and simultaneously as we made the Sign up/Sign In page, Home page, Shops page, Business page and the other inner pages within the REP. app.
After a couple rounds of design studio and usability testing our lo-fi designs, the team moved on to create our mid-fi wireframes. Keeping our persona Eliza and our insights from the usability testing in mind, we made some edits and took our designs into Figma.
Using Figma allowed our team to work collaboratively and simultaneously as we made the Sign up/Sign In page, Home page, Shops page, Business page and the other inner pages within the REP. app.
Mid-Fi Wirefames
(Click to Enlarge)
Hi-Fi Wireframes & Prototype
The next step after we completed our Mid-Fi wireframes, Mid-Fi prototype and usability test was to create our Hi-Fi mockups and Hi-Fi prototype. The team and I took the insights and data gathered from multiple users during our Mid-Fi usability test and made some changes that would help the user navigate the REP. app seamlessly. Some changes made were:
-
Adding a filter feature on the Shops page to help the user sort out the businesses they are searching for.
-
Moving the badges higher up on the Business page so users can have access to them right away instead of having to scroll and search for them.
Hi-Fi Wireframes
Top Row: Onboarding page, Home Page, Shops page
Middle Row: Business page, Business Owner Bio, Filter page
Bottom Row: User Profile page
After updating some elements to our designs and creating our Hi-Fi Mockups and prototype in Figma, The team and I tested four users during the usability testing process. We used the same tasks from our Mid-Fi usability test to see if we would receive different results. The results and some takeaways from our
Hi-Fi usability test are as follows:
Hi-Fidelity Usability Test Key Takeaways
Task Completed
-
Sign up and locate a business page 4/4 users succeeded
-
Find a business with the lowest prices 4/4 users succeeded
-
Locate information about the business owner 4/4 users succeeded
-
Share a business page 4/4 users succeeded
Takeaways
-
Categorizing things with icons/badges was helpful for users to navigate the app.
-
Incorporating dollar signs informed the user of the businesses price range.
-
The information about the business owner was clear and accessible to the user.
-
The icon/badge chosen was recognizable and the placement was clear to users.
NEXT STEPS
What’s Next?
After completing our Hi-Fi usability tests we gathered notes and insights and decided to implement some next steps if we are given the green light.
The following are some next steps that the team and I would like to take:
-
Bring the owner bio up higher on the business profile page.
-
Incorporating badges on each page.
-
Add more info to the owner bio.
-
Add a back channel for business owners.
These are just a few ideas we want to explore with research and testing.
TAKEAWAYS
In conclusion, the team and I believe the REP. app will be beneficial to users seeking information on minority owned businesses as they will be well informed on which communities these businesses are in support of.
We feel we have fulfilled Eliza’s (our persona) pain points and struggles while on her journey looking for minority owned businesses to support.
Working with this team of UX Designers/Researchers has made it clear how important communication is while collaborating on a project. There were moments during this project where some members were frustrated and instead of keeping silent, I made sure to have the team member express their thoughts. I made it a point to understand and carry out the message to my team members that we are not the users of this product and that the team must work as one.
©2024 James Lim