Details
Timeline: January 2020
Role: Product Designer
Tools: Figma, Adobe Illustrator, and Adobe XD
Coffee Close By is an app-based concept aimed to help users locate the closest nearby coffee shops. It prioritizes the organization of shops by quality of coffee, facilities available, and amenities offered. This project aims to fully communicate the components of each coffee shop, and help users make their most informed and preferred decisions.
Background
During my semesters abroad, my friends and I were constantly on the lookout for a new coffee spot. Because we were in a new environment, it was both exciting and risky to explore the local coffee sources. We encountered many cups of poorly brewed coffee and watered down cold brew. It was during these moments of disappointment and dissatisfaction that the concept for Coffee Close By came across my mind. Yelp and Google Maps were generally helpful in finding coffee shops, but often there wasn’t information regarding their coffee’s quality.
Research
I began by looking through the App store for existing coffee apps. There are a handful of available on the App Store, however, most of them do not differ much from Yelp, other than catering specifically to coffee shops.
Coffee platforms available on the App Store:
The information provided for each coffee shop was perhaps too typical—merely the shop's name, an address, and ratings. Aside from these apps, there are other existing platforms that do provide useful information. For example, Google Maps does a fair job at informing users of available amenities and communicating accessibility levels. Yelp provides a more detailed, in-depth look of each food establishments' available amenities—from wifi availability to delivery services, and so on.
However, because neither cater specifically nor prioritizes coffee shops, there is crucial information left unaddressed. For example, there is not a way to filter coffee shops by the quality of their coffee, the types of drinks each shop serves, or their production quality.
All in all, there is no one single platform where all this information is easily accessible and available, especially in a digestible sense. Thus, it is not easy to differentiate coffee shops from one another, other than by their physical aesthetic. What if you were in the mood for an acidic cup of cold brew? Or looking for a study spot to cram for mid-terms, but wasn't sure if the local coffee shops offered a study-friendly space?
User Research
In developing this concept, I conducted interviews to further understand coffee enthusiasts’ needs. I used the following questions as a guide to gauge priorities and pain points:
What do you think a "coffee app" accomplishes or should accomplish?
How often do you see yourself using this kind of app?
Have you ever explored similar apps?
What are some potential features you might find useful?
Following the interview process, I categorized user pain points into 3 main sections.
Pain Points
The interview process presented very diverse results. Interviewees each had very, very different priorities when it comes to navigating coffee shops. For example, certain individuals valued the atmosphere of a coffee shop above all else; hence, their needs are a quiet space suitable for studying. However, there was a general consensus among users' top pain points. Thus, the interview process provided a very structured guide for the next step—ideation.
Brainstorming & Ideation
Generally, users have the following needs:
Users who want to be better informed what amenities and accessibility features are available.
Users who want to ensure they are paying for coffee that is worth its price.
Prioritizing these needs in mind, I began brainstorming the most efficient ways in which available amenities can be communicated—from rhetoric choice to organization of words and which icons to use. Organization and delivery of amenities and accessibility features proved challenging, as I wanted to avoid overwhelming users with excessiveness. Thus, I prioritized what were typically the most in-demand needs. For example, whether a shop was wheel-chair accessible.
Key Features:
List of available amenities
List of accessibility features
A shop’s top 3 drinks
Rating system specified around coffee’s aroma, body, flavour, and acidity
Bucket list and favourites feature to help users keep track of their activity
Lo-fi Wireframes
User Flow Chart
From the lo-fi sketch, I created a user flow chart. This step created a smoother transition into creating the wireframes:
Prototyping
Stylesheet
Features
Home Page
Upon opening the app, users are recommended to enable their location. Subsequently, a series of the closest nearby coffee shops will be pinned.
Shop Profile
Users can access each shop’s available amenities and accessibility features, thoroughly informing them before they make a decision. The profile also has a feature that highlights the shop’s top 3 drinks. Users can access reviews of each drink, in addition to the flavour profile of each drink. This gives users a better understanding of each shop’s coffee quality.
Filters Feature
Users can search for coffee shops using a range of filters and choose the one that best fits their needs. For example, searching for shops that are more pet friendly or atmospheres that are more suitable for large groups.
Accessibility
Coffee shop culture can be pretty exclusive in the sense that accessibility is often sacrificed for the sake of aesthetics. For example, when I was in Beijing, I came across a coffee shop that was only accessible through two flights of stairs. Furthermore, this information was not easily accessible at all. From this experience, I recognized the importance of accessibility and prioritized it during the brainstorming period.
Personalized Profiles
Users can save coffee shops and organize them into two categories: bucket list and favourites. Users can check the plus icon to add a shop to their bucket list or the heart icon to save it to their favourites. a
Notes: an account is required for this feature.