Find My Coffee Shop
Find My Coffee Shop is a app help people determine what coffee shop will be fit their needs the best. Specifically- to help users know which drink a local coffee shop carries and what the environment of the shop is.
My Role: UX Research | UX Design | UI Design
Overview
The Challenge
Every local coffee shop is different, some are have a loud “Alt” eviroment, some are stark white and quite. Some coffee shops specialize in craft coffee drinks, some specialize in espresso drink, while few offer a mix of both. How do you know what type of shop you will be walking into before going?
The Solution
Find My Coffee Shop delivers information clearly and efficiently, upfront. The app uses user feedback to display the most up-to-date information about a Shop. Find My Coffee Shop provides peace of mind by allowing user to know exactly the coffee shop they will be walking into offers.
“This coffee shop is too noisy to work in.”
The Audience
The audience for Find My Coffee Shop is 18-37 year old working adults
Process
Research
Strategy
Information Architecture
Branding & Identity
Visual Design
Research
Client Goals & Desired Outcome
A service that will allow users to identify information about a coffee shop before visiting it.
Inform users in what coffee drinks a shop carries
Tell users what the enviroment of the coffee ship is. Whats the coffee shops “Vibe?”
Give customers infomation on wether a shop carries food, and how robust the menu is.
User Research
I laid the gound work for my design by first conducting user research in the format of quantitative and qualitative research. I sourced participants from multiple platforms, forums, and my personal network.
Quantitative Research
I designed an online Google form in order to launch a survey to a large number of people and achieve statistical significance with my data. This allowed me to understand user behaviors and thoughts at scale.
23 Participants
Survey deployed via Google form deployed to multiple platforms, forums, and personal network
Qualitative Research
After the survey, I wanted an in-depth understanding of a bus rider’s emotions, desires, and expectations throughout their experience. The 1-1 interviews allowed me to ask specific follow up questions designed understand their behavior and experience of transit or navigation apps, what they liked about them, what they disliked, and how they used them.
3 participants selected from the existing surveyed pool that fit the criteria:
Regular coffee shop visitors
visits new coffee shop fequantly
Interviews conducted in person & via Zoom
Lesson Learned
I survey used to get quantitative research had wide in scope and focused too much on the user’s overall experience with coffee shops rather than their experience using apps. I made sure my questions for my 1-1 interviews to focus more specifically on a user’s behaviors, thoughts, about the apps they use.
User Research Results
59%
Visit coffee shops every weekday
45%
Have left a coffee shop for being too loud for their needs
40%
Work remotely from coffee shops
20%
Care about how long it takes to recieve their order after it is placed
85%
have a preference in what. Coffee drink they have
97%
Visit coffee shops to socialize
My qualitative research revealed deeper and more specific insights on a bus rider’s commuting experience and their likes, dislikes, & wishes about transit apps.
“I want to know what type off food menu they have.”
— Participant 1
“I wish I new new what drinks they carried.”
— Participant2
“I don’t really care how long it take to get my coffee, as long as its good.”
— Participant 3
Key Takeaways From User Research
In conclusion, my research revealed the following insights:
#1
Knowing what drinks, a shop had was very important.
#2
Whether a coffee shop served food was also important.
#3
And Users cared less about the coffee shop's speed, which I found interesting.
Competitive Analysis
I kicked off this project by researching two competitors to understand their product’s strengths and weaknesses, as well as gain an understanding of a user expectations when using their apps. I looked at Localcoffeeshop.com, and Besy Coffee Shop.
LocalCoffeeshop.com
Pros:
Provides a list and map view of coffee shops.
Allows you to search by Zipcode or type in city & State
Cons:
Doesn't give any information other than the coffee shops address
Only on web browser
Best Coffee Shop
Pros:
Phone app
Beautiful to look at.
Allows you to share your favorite shops with friends
Cons:
Requires GPs to be enabled- will not let you use the app without it.
Not a lot of shops on the App
Is more of a coffee-forward media social app than a locator
Strategy
Personas
Based on the data collected in my research, I created a user persona that captured consistent behaviors, goals, and needs amongst the research participants.
Information Architecture
User Stories
To prioritize the features of the bus transit app, I created user stories based on tasks and potential motivators. After creating as many as I could think of, I then prioritized the list to would meet the needs in a minimum viable product.
User Flows
I created user flows to visualize the path a user would take through my interface to complete the high-priority tasks identified in those user stories.Giving me understanding of the kind of visual hierarchy I would need to design and how all the elements would relate together.
Sketching
After understanding the screens I would design from the user flows, I stated Ssketching out fast iterations and ideas. I sketched multilpe screen layouts and them chose one that best fit the MVP.
I always enjoy sketching because it really helps stretch my creative problem solving capacity to find viable solutions and lead me towards a more refined working solution for the app.
Low Fidelity Wireframes
I then created digital wireframes in Figma
Branding & Identity
Logo Design
I designed the Logo by playing with a hambuger menu icon and make it resemble a coffee mug, with the idea that you click on a menu to find information in an app or program and Find My Coffee Shop will be where you go to find information about a coffee shop
Typography
I selected typography that would fulfill two user needs:
It needed to look friendly and elegant
It needed to feel inviting and instill confidence
The origanil type face i selected is the one pictured in the style guide above. But when added the style elements to my digatal wireframe, I found that the pages that contained a lot of text felt cluttered and messy. so I made a desistion to change the type face to a more cleaner modern looking type face, Inter.
The choice needed to communicate “technology, warmth, friendly.”
Colors
I applied the same criteria to selecting colors. I wanted something warm and inviting, I chose to go with diffent shaps of brown to fit theme of coffee. I also chose to keep the background white so there would be no color accesablty issues. and the app sould be developed with a dark mode in later iterations since the key demegrapgic age is full of people who choose to use dark mode on their devices.
Background
#FFFFFF
Button
5E4628
Selected feild
5E5244
Logo
DDA35D
Visual Design
High Fidelity Prototype
I applied the branding to the wireframes to create a Mockup of what the app would like, I then used that mockup as a template to create clickable, high fidelity prototype. After skinning the wireframe, I set a round of usability testing with 4 participants.
Visual Mockup
High fidelity prototype
User Testing Feedback
“It would be easily if i could search by drink.”
- Participant 1
“What is the scale on the ratings?”
- Participant 2
“The Ratings are confusing.”
- Participant 3
I also had some questions I wanted answers to as I went into a round of testing.
Does the user go to the Favorites right away?
Yes
Is the nav bar intuitive?
Yes
Final Prototype
With all the feedback I received in my usability tests, I adjusted the design and the final mockup by:
Changing the rating screen to use a 1-5 star system
Adding an option to the search screen to allow users to search by drink.
Final Usability Testing Feedback
After making the nessasary changing, the conducted another round of user testing with 4 new partipants to insure that the istablished issues were resolved.
Reflection
FMCS was my capstone project for Thinkful’s UX/UI Research and Design Flex program. I chose a brand Idea I am passionate about and loved creating a new product. This project taught me the importance of working smarter, not harder, while creating a brand that has an clean, clear, and desirable product. I was able to add some of my own ideas along with users’ to create an MVP for the finalized product.