DH199
DH199: Navigating American Coffee Culture in Los Angeles
Priyana Patel
Cognitive Science and Digital Humanities, B.S., Class of 2020
Project Overview
Project Description
I am interested in exploring the evolution of coffee culture of Los Angeles and how coffee is currently reflected in the social experience of local residents. Coffee shops represent social acitivities for connection as well as spaces to empower individuals. Los Angeles is comprised of residents of multiple races, nationalities, and backgrounds which is directly reflected in the abundance of coffee communities. For myself as a student in Los Angeles, coffee shops are go-to spots for productive study sessions, informational interviews and catching up with friends.
The current design problem is making coffee culture in Los Angeles more accessible and engaging to local residents to build such communities. People currently find their go-to coffee joints by word of mouth and social networking which is limited to auditory cues and one’s own memory. Residents need an easier way to find new hidden gems based on the qualities they need to be productive, such as aesthetics, mood, number of seats, peak hours, Wi-Fi, etc. By making the knowledge and history of all things coffee accessible to users, this will elimnate the concept of the “coffee-snob” making the coffee community inclusive and welcoming.
Expected Outcome
I plan to improve the current user experience through a location-based navigation and a needs-based walkthrough of coffee culture in Los Angeles. I will document my design process and final prototype through web documentation and a research paper. I hope to further my design portfolio and storytelling skills through this directed research opportunity, learning how to improve the user experience of my local community through extensive research and iterative development.
Project Schedule
Week 1 - Research topic proposal (CITI training + web-documentation)
Week 2 - Secondary research and writeup (literature review/previous works)
Week 3 - Field research plan: how to learn from others (planning user research)
Week 4 - Field research findings and writeup (analysis of user research)
Week 5 - Understand the perspective of the users (storytelling)
Week 6 - Interaction design (low-fidelity prototype)
Week 7 - Interface design (screen designs + impression test)
Week 8 - High-fidelity prototype (interactive prototype)
Week 9 - Usability testing
Week 10 - Final report
Literature Review
Research Question
How might we make coffee culture in Los Angeles more accessible to local residents while promoting social connectivity, productivity, and inclusivity in diverse coffee communities?
Keywords
This quarter, my research interests are “coffee”, “culture”, “social”, “aesthetics” and “productivity”.
Annotations
Relevant Previous Works
Yelp
OpenTable
Source
BeanHunter
Current websites and apps provide a clean, aesthetic user experience for local residents to discover restaurants and coffeeshops in the area. “Source” provides handpicked, novelty coffeshops as well as user-submitted roasters that are approved based on high-quality standards. The app offers an integration with Apple Maps, Google Maps, and Waze to offer directions and easy access. The app, however, lacks a community and social experience. While it provides basic contact details, it lacks useful information that would help assist in decision-making, such as peak hours and number of seats. Across all location-based food apps, there lacks an educational feature that helps the user make decisions while also learning about the history of local eateries.
Literature Review
The current design problem is making coffee culture in Los Angeles more accessible and engaging to local residents to build such communities. People currently find their go-to coffee joints by word of mouth and social networking which is limited to auditory cues and one’s own memory. Residents need an easier way to find new hidden gems based on the qualities they need to be productive, such as aesthetics, mood, number of seats, peak hours, Wi-Fi, etc. By making the knowledge and history of all things coffee accessible to users, this will elimnate the concept of the “coffee-snob” making the coffee community inclusive and welcoming.
Coffee culture has become ubiqitous and pervasive with the globalization of the modern, wired world (Tucker, 2017). As a social drug, coffee has permeated social spaces. Tastes in coffee and other cultural preferences represent the global impact on ethnic and religious identities as well as different food complexes and niches (Topik, 2009). The coffeehouse first emerged as a place for people to gather and drink coffee, learn about the news of the day, and discuss matters of mutual concern with other local residents (COWAN, 2005). Coffee shops are third places, a place between home and work. These are conductors in society which can provide neutral ground where one is able to connect. When choosing these places, human behavior shows we look for prositively experienced bonds over time with a socio-physical environment (FERREIRA & BEUSTER, 2019). Utimately, the space and architecture of a coffeehouse plays a major role in a user’s coffee experience. Everyday aesthetics and ordinary affects generate a rich modality for body and mind in ordinary spaces. An aesthetic experience is one defined by organic rhythmic unity (Nautiyal, 2016).
Since social community and aesthetic design play a major role in human behavior in the everyday coffee shop, they should be incorporated into how a user chooses their next coffee shop. This leads to the major design question: How might we make coffee culture in Los Angeles more accessible to local residents while promoting social connectivity, productivity, and inclusivity in diverse coffee communities? Current food and restaurant apps allow users to explore new restaurants based on locations, however, they do not account for aesthetic and visual cues which are major design considerations of human behavior when choosing third place attachments. Users envision the space they would like to be in, such as seeing a friend’s instagram post or story and a geolocation of the particular coffee shop. Current food discovery sources lack the strong component of a simple recommendation and how this is integrated within current social networking platforms, such as a forum or Q and A board. Lastly, food and drink sites underestimate the importance of education and history of establishments and how this is linked with brand identity. Current users seek to find the story of the spaces they take up in order to feel comfortable in connecting with others and progressing as individuals. The current design research project seeks to explore and create something that will cater and fufill such needs.
References
COWAN, B. (2005). [PART II Introduction]. In The Social Life of Coffee: The Emergence of the British Coffeehouse (pp. 79-88). Yale University Press. Retrieved April 16, 2020, from www.jstor.org/stable/j.ctt1npc0p.10
FERREIRA, S., & BEUSTER, L. (2019). Stellenbosch coffee society: Societal and locational preferences. Urbani Izziv, 30, 64-81. Retrieved April 16, 2020, from www.jstor.org/stable/26690824
Nautiyal, J. (2016). Aesthetic and Affective Experiences in Coffee Shops: A Deweyan Engagement with Ordinary Affects in Ordinary Spaces. Education and Culture 32(2), 99-118. https://www.muse.jhu.edu/article/642187.
Topik, S. (2009). Coffee as a Social Drug. Cultural Critique, 71, 81–106. JSTOR.
Tucker, C. (2017). Coffee Culture. New York: Routledge, https://doi.org/10.4324/9781315678795
User Research Planning
The purpose of this user research is to gain insights from users to help make coffee shops in Los Angeles, aligned with the coffee experience, more accessible while promoting social connectivity, productivity, and inclusivity in diverse coffee communities.
Main Design Challenge
My project would allow users to easily find new coffee shops in the local area based on social and productive filters using location-based navigation. With easier and more functional pathways to Los Angeles coffee shops, users will be able to strengthen their knowledge and association with coffee while integrating themselves within their respective coffee community. According to Maslow’s Hierarchy of Needs, the basic need that this activity will fulfill is self-actualization. While coffee is classified as food and drink, prior research suggests that people rarely seek the coffee shop experience solely to grab their daily dose of coffee. People go to coffeeshops to find consistency and productivity in a unique third space (a space between a primary home and secondary work). Individuals also seek the full bodily experience combined with taste, aroma, noise, and the feeling of being surrounded by strangers.
Current solutions to ease the navigation process include food and drink exploration and reservations apps, such as OpenTable and Yelp. These platforms, however, do not distinguish the coffee shop as a unique, aesthetic experience through the modality of body and mind. More specific solutions help users look for high-quality, specialty coffee shops in the local area. While they are currently in the process of growing and are lesser known, they focus on providing detailed shop info to help users find “better” coffee. These solutions again neglect a user’s connection and physical experience while navigating local coffeeshops on a virtual platform. Digital technology can help connect coffee drinkers based on time, experience, and word of mouth. Coffee communities can share their particular experiences in a unique space through imagery, sound, and video. Possible mediums through which this can be achieved include recreating the experience inside a coffee shop through virtual reality for a user to fully gauge their future experience. Additionally, incorporating an interactive learning process can help further the enrichment process.
Target Users
The target users that this project would be well-suited for would be coffee drinkers of various knowledge levels, from amateur to coffee snob. Typical users would be individuals who frequent coffee shops on a regular basis to socialize and be productive, such as college students, creatives, and young professionals. Users can complete the activity of searching for a local coffee shop from their home or work, the two spaces between a third space. Specifical goals include finding a target coffee shop that suits their needs, preferably in an efficient manner.
Context and Research Method
To better understand my target users, I plan to conduct a 30-minute interview over the phone with a typical Los Angeles coffee drinker to understand their process of searching for a new coffee shop in Los Angeles. This user will be a UCLA student who goes to coffee shops for productive and social gains. I intend to ask them about their knowledge of coffee and further understand how it connects to their daily lives in terms of connectivity and productivity. I will specifically ask about their experiences in coffee shops and ask about three scenarios where the user has to search for a new coffee shop, recommend a new coffee shop, and advocate for a coffee shop based on their past experience. I plan to collect the user data by recording the audio of my phone call with my prospective user and transcribing the audio. Additionally, I will note any interesting observations from the interview itself, such as the vocal walkthrough process while conducting the designated tasks. To better understand how a user searches for this information on their device, I will ask the user to take a screen recording while completing the scenario. I also plan to conduct a virtual, open card sort with various words related to coffee shop preferences, such as the number of seats, the number of outlets, aesthetic appeal, etc., to gauge the most important feature that users seek in a new coffee shop. These words will range from more functional features to bodily sensations such as taste and aroma. Due to the current situation, I plan to conduct this card sort task in a virtual setting from the comfort of the user’s home using Optimal Workshop. I will ask the potential user to rank the cards in order of preference and to arrange them as they see fit while labeling or categorizing the groups by term. I also plan to offer the user a “blank card” to write down something that I may have missed.
Participant 1 - Coffee Amateur
| Interview Script | Interview Recording | Observations/Notes | Transcribed Interview | Screen Recordings |
|---|---|---|---|---|
| View | View | View | View | View |
Participant 2 - Coffee Expert
| Interview Script | Interview Recording | Observations/Notes | Transcribed Interview | Screen Recordings |
|---|---|---|---|---|
| View | View | View | View | View |
Card Sort
|Study Link | Cards | Results Analysis
|——|——|——|
|View|View|View|
Reflection
Based on my user interviews and card sorting tasks, I learned that my target audience values numerous features of a coffee shop, with the weight of these features on decision-making dependent on the goal and motivation associated with going to a coffee shop in the first place. When the goal is to study, either independently or with a group, features such as seating, the number of outlets, and size/capacity guide a user’s choice. When meeting with friends or a mentor, the interior aesthetics and type of environment help a user gauge their future experience within a space. Across differing levels of coffee expertise, both users cited difficulty gauging how busy a coffee shop was and how much seating was available at the given time. Specific pain points and user difficulties include having to scour customer reviews for seating/capacity, not finding the preferred amount of outlets, having to refine a search based on the context of use, and arriving at a coffee shop after closing because of an inconsistency between current location and closing hours. Based on a three dimensional visualization of my card sorting results which illustrates the similarity between cards as three dimensional spatial relationships, I can further deduce particular categories between coffee shop features. These include “services” (e.g. customer service), “environment” (e.g. seating, noise), “coffee” (e.g. menu, price) and “aesthetic/vibe” (e.g. ambiance, background music). This is helpful understanding the information architecture for a possible filter/narrowing search feature.
With a clearer understanding of the processes associated with searching for a coffee shop, my main design requirements will consist of representing seating and space through interactive imagery, motion, and sound. Additionally, I plan to incorporate a “motivation/purpose” filter at the start of the search process to better refine search results based on the context of use. Particular goals and motivations, such as meeting with a mentor, should take further features such as environment, aesthetics, and noise level into account when displaying search results to reduce the amount of time for the user. For future user research, I plan to focus on other desires and motivations of going to a coffee shop, such as creative exploration and social connection. A change I made to my current research script was how I framed the scenarios; as opposed to searching for a new coffee each time, I asked the user how well their choice fit the criteria for their goal (e.g. to study). A minor error that I noticed in my card sorting task was that I had two similar/duplicate cards “Empty” and “Empty/Crowded”. Next time I would double check my cards before launching my study to ensure that participants can sufficiently group terms without any confusion and later effects in my results. Next time, I would ask further questions about prior search experiences and the successes or failures of such. When searching for new coffee shops and restaurants, the best way to fully evaluate a choice is to experience the space. Due to the current situation, I was not able to test this effect further therefore it was important to ask about prior experiences.
UX Storytelling
Priyana Patel
User Persona
|Coffee Expert| Coffee Novice|
|——|——|
|
|
|
Usage Scenario
| Sylvie | Yasmin |
|---|---|
| Sylvie is a busy college student looking for a new coffee shop to study at this weekend. She has a very high knowledge of coffee and She knows her regular places near campus will be busy so she would like to take the opportunity to explore and find a new one. Her main priorities when looking for a new coffee shop are that it is has good quality coffee, is close to campus, within her price range, and has good reviews. Her preferences for an ideal study environment are that the coffee shop is open and large in size and has a lot of seating. Sylvie plans on grabbing her coffee and setting up with her laptop and study materials. She plans on bringing her charger in the hopes that the shop is equipped with outlets around seating areas. | Yasmin is a recent college graduate looking to spend her time exploring new coffee shops this weekend. She is looking for aesthetic cafes which have a great opportunity for an Instagram photo-op as opposed to the main chain coffee stores she currently visits. Her main priorities when looking for a new coffee shop are price, distance, and variety in the menu. Yasmin just started drinking coffee within the past few years in college when she would meet up with friends and study. She would like start exploring more as she will start grad school in Seattle in the fall, but Yasmin is a little unsure where to start. |
User Journey
| Sylvie | Yasmin | |
|---|---|---|
| Goal | Sylvie’s goal is to find a new coffee shop, filtering by location, price, and reviews. She types in “coffee” into the Yelp app, editing her location to “UCLA” and making the refinement “good for groups”. She is excited and hopeful for the search results to explore new shops in the local area. | Yasmin’s goal is to discover a new mom and pop coffee shop, different from the chain coffee shops she usually frequents, in order to broaden her coffee knowledge. She types in “coffee shops near me” into her Google search engine on her mobile device. She is hopeful and sure that her search will bring up a multitude of results. |
| Challenge | Sylvie’s challenge once she finds a promising coffee shop is figuring out whether the shop will be busy when she gets there and whether there will be enough seating. She sifts through reviews, specifically looking for key terms such as “popular”, “crowded”, or “busy”. She also analyzes pictures of the interior space, looking at tables, seats, and how open the space is. | Yasmin’s challenge is finding distinct cafes amidst chain coffee shops such as Starbucks and Peet’s Coffee in her search results feed. Additionally, she does not typically archive her findings for future visits; if the name is obscure or the shop is not within her top five search results, she has trouble remembering it again. If she has found a promising choice, she seeks advice from her friends with more experience via iMessage to confirm before her visit. |
| Solution | A solution for Sylvie is a specialized digital tool for coffee which provides a guided search exploration by goal with markers for seating, size/capacity, and peak hours. Sylvie would begin her search by selecting the purpose of her coffee shop search: “to study”. Results would account for size/capacity, seating, number of outlets, and free Wi-Fi in addition to price, reviews, distance, and hours. She feels relieved and relaxed knowing she can save time on her search, without having to look through lots of reviews and pictures. | A solution for Yasmin is a rapid discovery page which can be filtered by vibes and aesthetics as well as personalized by coffee knowledge. She will see a live, consistently changing view of trending and popular coffee shops based on visual appeal (images linked via Instagram). Each digital card can be easily archived into a favorites list so that Yasmin can continue to explore without losing reference to a possible coffee shop she would like to view at a later time/ Yasmin is motivated and inspired by the wide variety of choices she has available to her and is relieved that she does not have to confirm her choice with her friends. |
Wireframes
| Draft #1 | Draft #2 |
|---|---|
 |
 |
Low-Fidelity Prototype
Priyana Patel
Wireframes
Wireflow
Evaluation
I tested my low-fidelity prototype with two potential users. The first user was not sure how to navigate the search results page: she noted that it would be helpful if the coffee shop cards were labeled at the top so that the names were visible. While she was familiar with the varying levels of the price range filter, she was unsure of what the varying levels for seating, outlets, and noise meant. The second user had the impression that the cards feed on screen 2 followed the notion of “swipe left to disregard and swipe right to favorite”. He mentioned that having the like icon in the top right-hand corner was counterintuitive, specifying that it would take more effort to double-tap to favorite the icon. He said that it would be helpful if the “See All” and “Back” buttons were bigger. He was unsure whether there were more pictures of the coffee shop: he indicated a marker for multiple pictures would help him.
Based on my evaluations, I need to reconsider how I would like to structure and design my search feed. I believe a swipe left and swipe right motion would be more intuitive for the user however it would not allow them to go back and forth between search results; once a card is swiped left, they cannot return to it. Additionally, I need to make my navigation buttons (“Back”, etc.) bigger and more visible. I think it would be helpful to use an additional icon with the “See All” button to indicate to the user that they can navigate to the coffee shop’s photo gallery.
Interface Design
Color and Typography
I decided to use variations of red and brown in my color palette. Yelp and other food applications use red as an attention grabber to evoke the tastebuds. The color brown, secondary to red, represents the natural relevance to coffee, in its bean and drink form. Brown is associated with being close to earth and “grounded”, hence the literal reference to the name of this future mobile design. I used Red (#8C2016) for actionable buttons and text and I used Dark Brown (#401E17) for all informational, non-actionable text. I used a combination of red and brown (#9F5049) for accent colors and banners.
Revisions
“Filter” button - “All” with filter icon </br> Results Page with stacked cards - See all cards at once, similar to Pinterest’s interface (each result appears with the price range, whether it is open or closed, the rating, and capacity/peak hours level) </br> Purpose of trip - Provide more info with each option such as “Work - I’m trying to get some work done”, “Social - I want to connect with friends”, “Professional - I’m meeting with clients/mentors” </br>
View the revised wireframes and interface
High-Fidelity/Interactive Prototype
View the interactive prototype
Evaluation
Priyana Patel
1) Methods
I evaluated my interactive prototype through a google forms usability test. In the pre-test, I asked the user to complete a 5-second impression test where they viewed an image of the screens for 5 seconds. After, they were asked to rate their agreement with the following terms on a 5-point Likert scale: Aesthetic, Symmetrical, Pleasant, Organized, Clean. This visual appeal questionnaire was developed by Lavie and Tractinsky to measure classical aesthetics (Lavie and Tractinsky 2004). I also asked if they could recall any particular elements from the design and what they liked about the design to further understand a user’s impression of the design. In the tasks section, I asked the user to complete the following four groups of tasks to test the flow and usability of the deesign.
- Complete the search field
- Evaluate search results
- Learn more about the coffee shop
- Further steps to plan your visit
In the post-test questionnaire, I asked the user to rate the difficulty of the task and the time it took to complete the task. To measure perceived productivity, social connectivity, and accessibility, I asked users to rate their agreement with statements that suggested that their experience with the app would improve such areas. Lastly, I used a system usability scale - sus to evaluate the comprehensive usability of the mobile application.
View the google form
2) Survey Data
Access the full results here
Five Second Test
Average Visual Appeal </br> (5 - Strongy Agree, 4 - Agree, 3 - Neutral, 2 - Disagree, 1 - Strongly Disagree) </br> |Aesthetic| Symmetrical| Pleasant| Organized| Clean| | —- | —- | —- | —- | —- | |4.4|3.6|4|4|4.2|
Elements: Participants recalled beige colors and a brown color scheme, a grid style picture layout, and a map.
Design Affirmations: Participants stated that they liked the visual appeal, simplicity and cleanliness, the colors, the map and image integration, and the minimal text.
Tasks
Four out of five users (80%) were able to complete all subtasks within the four main task groups. One user was unable to view the search results on a map view and go to the store’s Instagram page.
Coffee Shop Evaluation: 80% of users stated that Black Canvas Coffee met their study needs. Participants mentioned that based on their evaluation, the coffee shop has few to no outlets which would make charging their laptop difficult. One user also included that there was not a lot of seating and there was no backing on the chairs. These results indicate a typical user’s ability to evaluate a search result based on the provided information. When asked if there was any pertinent or useful information missing, 20% of users (1 participant) stated “popular menu items”.
Post-Test Questionnaire
Average Task Diffculty </br> (7 - Very Easy, 6 - Easy, 5 - Somewhat Easy, 4 - Neutral, 3 - Somewhat Difficult, 2 - Difficult, 1 - Very Difficult) |Complete the search field|Evaluate search results| Learn more about the coffee shop|Further steps to plan your visit| | —- | —- | —- | —- | |6.2|5.4|6|6.2|
Average Time to Complete Task </br> (7 - Much shorter than expected, 6 - Shorter than expected, 5 - Somewhat shorter than expected, 4 - As expected, 3 - Somewhat longer than expected, 2 - Longer than expected, 1 - Much longer than expected) |Complete the search field|Evaluate search results| Learn more about the coffee shop|Further steps to plan your visit| | —- | —- | —- | —- | |5|4.6|6|6.2|
Productivity, Social Connectivity, Accessibility </br> (7 - Strongly Agree, 6 - Agree, 5 - Somewhat Agree, 4 - Neutral, 3 - Somewhat Disagree, 2 - Disagree, 1 - Strongly Disagree) </br>
- I believe the app experience will improve my personal productivity and future experiences in coffee shops: 6.4
- I believe the app experience promotes my opportunities for social connectivity: 6.2
- I believe the app experience allows for creative exploration to increase accessibility to coffee communities: 6
System Usability Scale </br> The average participant SUS score was 79 which is higher than the average SUS score of 68.
3) Summary
Overall, all participants agree that the visual design is aesthetic, organized, pleasant and clean. Users report, however, lower average ratings with respect to the design being symmetical in classical aesthetics. Prominent elements of the design include the grid-style layout, the location-based navigation, and the color scheme. 80% of users were able to complete all tasks in the navigation flow however one user had difficulty in accessing the map view and navigation to external applications. Participants found that completing the search field, learning more about the coffee shop, and completing further steps to plan their visit within the Easy scale rating and found that evaluating search results within the Somewhat Easy scale rating. Participants found learning more about the coffee shop and completing further steps to plan their visit shorter tan expected, completing the search field somewhat shorter than expected, and evaluating the search results as expected with respect to the time it took to complete the task. Lastly, participants on average agree that using the app would help improve their productivity and future experiences in coffee shops, promote their opportunities for social connectivity, and increase their accessibility to coffee communities.
4) Revision Plan
Based on extensive feedback from Professor Cho and two users, I plan to make the following revisions:
Complete the search field:
- Change the arrow icon to “Continue/Search” or only make appear once the search form is complete
- Add a “continue” button that takes you back to the homepage after you enter your location
- Add a title and label to make it clearer for users when entering their location
- Change “Work” to “Productivity” (work can be synonymous with professional)
- Include a label for location: “Where would you like to find a coffee shop?”
Evaluate the search results:
- Make the map accessible by tapping in addition to dragging
- For the filter page, group the icons together (price, seating, outlets, etc.)
- Change the distance filter to a drag/slider bar
- Instructions that explain what the capacity colors mean
- Add a “Sort” button and make the results default by capacity/how busy
- Remove the horizontal scroll of the filter tags and change to icons
- Embed the name of the coffee shop on the image
Learn more about the coffee shop:
- Add Yelp average star review
- Include how many seats not taken
- Change the amenities to 3 by 3 grid or a check to indicate whether the shop has it
Further steps to plan your visit:
- Option to pick which rideshare app to open (Uber or Lyft)
- Make the actionable button text more concise (call, map, web, ride)
- Link “Copy Address” with the share icon
Additionally, I plan to certain design changes to maintain visual consistency and ensure that colors are AA WCAG compliant. Regarding the product itself, I would like to reconsider the “What is your coffee knowledge” feature. Based on my user research and storytelling, coffee knowledge is associated with experience and personal value. If so, results in accordance with a user’s coffee knowledge would be reflected in the variety in a menu and the quality of the coffee. I plan to complete further user research to under the value of such feature and how this would help find coffee shops that match their needs, desires, and previous experience in coffee shops. I would like to further explore how I can make the app experience more immersive, incorporating sound, interactive imagery, and motion to recreate the coffee shop experience.