This project was a empathetic excursion to help solve a need for remote workers everywhere - the discovery of good cafes to work at. What made a cafe good to work at? What did information did remote workers need before choosing a cafe? How do they prefer that information to be communicated? Creating Cafe Hop involved a great deal of finding the right questions to ask and asking the right people. I chose this for my portfolio because it highlights my research on discovering a target audience, surveying that audience, and also the various research means I used to insure that the final project was providing the right solutions for the user’s needs.
Tools
Google Surveys / Adobe Illustrator / Adobe Photoshop / Figma / Maze Testing
How might we take the stress off remote workers in finding the perfect cafe workplace?
Our goal for the project was to recapture the magic of the coffee shop workplace. The original premise was simple: create a review platform that gave voice to needs of remote workers. However, we weren't trying to just make another review application. Our ambitions were to create a unique, in-depth experience that could assist the rapid increase of remote workers and the rise of third wave coffee shops.
An intuitive, simple cafe review application designed by remote workers for remote workers.
Cafe hop aims to create a professional and thoughtful user-friendly experience for remote workers looking to discover which cafes offers what. The user has the ability to refine search parameters, save, rate and review, and explore cafes all over the world.
.png)
I was surprised that there were so many items workers were looking for in a good cafe work spot. Their needs surpassed just a generalized, "1 out of 5" stars rating. They wanted specifics on the criteria that mattered to them. As more and more workers became remote in 2020, the less they were able to rely on Yelp or Google Maps for the information that mattered to them, unless they were willing to read through hundreds of reviews. It became clear that the best way to help our target audience was by diversifying our review criteria and evolving our rating system to what really matters.
The work culture has evolved, so our rating system has to evolve as well.
We defined out audience by doing extensive research visiting our local cafes and drinking a lot of coffee. We chatted it up with a few remote workers, asking them to complete a short survey about their cafe experience. I wanted to understand what made a cafe a good workplace for a worker, but also, any frustrations they had in discovering / deciding on a cafe to work at. Here's what I discovered:
This information confirmed that the target audience for Cafe Hop was Millennials and that Cafe Hop would be more useful to its audience as an smartphone app over a website. This also started me down the path of trying to discover what exactly users were looking for in a cafe since the majority answered 'plugs' and some answered 'noise level' to what was important to them at a cafe. But before I could dive any further into all that, I defined Cafe Hop's target audience further to find its User Personas to further aid my research.
To gain a deeper understanding of my users, I asked more in-depth questions to three of my interviewees. I succeeded in gaining interesting motivations and frustrations from them that helped me guide the rest of my research.
.png)
.png)
To create an Empathy Map I asked several of my remote worker friends to answer simple questions like: “How do you feel when you first walk into a cafe to works?” “What are some things you would say to friend or co-worker when picking a shop to work at?” It revealed that in order for cafe hop to be successful with it’s target audience, it had to offer more insights to our users than other review apps.
.png)
In order for Cafe Hop to really appeal to its audience and accomplish its main goal of assisting workers discover the best places to work, Cafe Hop would need to provide more details and criteria than other review apps.
This insight was discovered through multiple pathways:
- Remote workers answered multiple items under "What's important to you when deciding on a cafe to work at?" in the survey. Ex. plugs, noise level, stayability, etc.
- Remote workers never mentioned a 'high rating' was important to them.
- The empathy map revealed that workers were feeling anxious about whether a shop would have items such as plugs, easy parking, or decent coffee available.
- Workers showed frustration with review apps such as Yelp and Trip Advisor because important items were hidden in long reviews.
These insights revealed a few pain points to base user stories off of:
As a remote worker, I want to know if a cafe has plugs ahead of time so that I can charge my computer and work longer.
As a remote worker, I want to know when a cafe is busy so that I know if I can get a table to work.
As a remote worker, I want to know if a cafe is very loud or not so that I know if I can take meetings there or not.
As a remote worker, I want to be able to see multiple cafes in my area that have what I need to work so that I can have options.
This sparked the need for more user research on the criteria of what a remote worker needs in a cafe. Therefore, after buying them a few rounds of coffee, I asked a few of workers to participate in a card sorting challenge.
I put my several remote worker friends to the test with a card sorting challenge. The goal was to answer the question : How might we make cafe hop more accurate to the needs of our users than other review apps? After two rounds, we found several important items to implement into the design of cafe hop.
-p-500.png)
First Round: What would you want to know before choosing a cafe to work at?
Second Round: Find themes and then organize post-its under applicable sections.
Implementation:
After the first round, I discussed with my workers on how to categorize the criteria further. We decided on work-ability, drink-ability, and meet-ability described the needs the best, with a few criteria hitting in the middle of two of them.
From this research, I found out that cafe hop would need to:
- Have the ability to rate and review Cafes on multiple criteria
- Organize cafe’s ratings into applicable categories: Work-ability, Drink-ability, Meet-ability
From the initial client proposal for a cafe review application, there were multiple concepts on the table. User research was invaluable for the ideation of what this app could be. Once the research was summarized, I was ready to start brainstorming concepts for the solution to my client’s needs.
Some of my first concepts were:
Coffee Trip - A cafe knowledge base that showed who was serving what in the area, along with general information about the store.
Brewsy - A review app with an interactive map where clients could write down what was happening at a cafe, if it was too busy, closed, the coffee was fantastic that day, etc.
While both of these accomplished some of the high-level goals, my user research revealed the greatest requirement our users wanted was in-depth rating and review on multiple cafe criteria. That’s when Cafe Hop was born.
This brand as a concept needed to feel professional for our remote workers, but also have an element of fun attached to it. I wanted the users to feel as if the app was a relief from the day to day of working at home when searching for a new cafe to work at.
From the get-go, I didn’t want the users to use any effort to recognize what cafe hop was. They are already working hard enough. The clean and clear lettering of Montserrat feels simple enough while a pop of color on the location mark lightens the mood.
-p-1080.png)
I wanted the colors of Cafe Hop to be professional, as it pertains to business, but also fun, as I want it to feel like the user was 'getting out of the house' to work. Therefore I chose a bright blue for professionally and contrasted it with warm tones of yellow and orange for some fun.
For the Iconography, I chose filled in icons that are clear and distinct for accessibility. I also chose to design them in groups according to their function so that they would be unambiguous from other sets.
When I was approaching the design of cafe hop I first wanted to look and see what was already on the market. What similar review and other apps were successful in reaching our target audience? What made them attractive? What could cafe hop do better? For this purpose, I chose Airbnb for its searchable features, Trip Advisor for its user reviews and ratings, and Postmates for how it organizes restaurants into categories. This research helped drive the preliminary sketches of cafe hop’s screens and eventually to create the final product.
.png)
.png)
.png)
The method I chose to kick off designing Cafe Hop was the Crazy Eights method. I took the three apps I analyzed previously along with Google Maps and blended their wireframes to fit Cafe Hop’s information. I then showed the drawn frames to our stakeholder who rated them 1 to 10. The highest rated were then blended a second time to discover our winner design.
.png)
Personally I find it difficult to test the basic blocked out grayscale wireframes on users who don't understand context. So before the first usability testing, I aim to feel confident in the grid design on the grayscale wireframes and move on to fill it in with basic information for testing.
The two high priority screens that made Cafe Hop’s app more advantageous to our target audience was the cafe search screen and the chosen cafe rating screen. This enabled all other functions as it allowed user to find / see cafes in anywhere in the world and also find the ratings of their chosen cafe. Therefore I put our testing team through two trials.
The first was to ‘Find out what times Dose Cafe is busiest and what their parking is like.’ This would show me if the rating design was intuitive enough for the user to figure out where parking was, and also if it made sense to the user to swipe up to see additional information on what times the cafe was busiest. I gave a range of 3-5 clicks for this task since 3 was the minimum required to successfully complete it.
Mission 1 : Find out what times Dose Cafe is busiest and what their parking is like
.png)
9 out of 13 people accomplished the task within the expected 3-5 clicks. 4 people clicked 5+ times.
The second mission revealed if the user was able to locate the search bar or explore button intuitively. Also, by needing to rate the cafe as well, the testers would reveal how effortless or frustrating it would be to understand the icons. I gave a range of 4-6 clicks for this task since 4 was the minimum required to successfully complete it.
Mission 2 : Search Barista Parlor in Los Angeles and rate it
.png)
10 out of 13 people accomplished the task within the expected 4-6 clicks. 3 people clicked 6+ times.
Testing revealed key improvements required for better accessibility.
.png)
.png)
Cafe Hop is a project that I very much believe in. Throughout this process, there were times I was not 100% sure about a decision so I reached out to the remote community and asked lots of questions. Other’s input resulted in the creative output in design and usability of Cafe Hop.
For now, Cafe Hop’s minimal viable project is a strong application for a local community to discover and rate cafes in their neighborhoods. For further development, I would like to see if more exploration was available, such as overseas cafes and tourist locations for those workers who travel. From a marketing standpoint, I would like to see if cafe hop would eventually be used as a selling factor for business, such as trip advisor is for tourist outings.
I believe these goals can be achieved through user research, ideation, prototyping, wire framing, usability testings, and coffee - a lot of it.
