THIRDSPACE: A COFFEE SHOP FOR EVERY PURPOSE
UX Research, Design, & UI Design
Coffee shop goers visit coffee shops to work, to hang out, to think, and simply to be. However, most apps focus on users' practical needs and neglect their preferences.
Through a holistic human-centered UX process, I designed an app to help coffee shop goers discover coffee shops that satisfy their practical needs and preferences and plan their visits hassle-free.
For a better reading experience, read case study on Medium:
Why do you go to coffee shops? As urbanites, you probably go to coffee shops to work, to think, to hang, or simply to be.
“If your first space is your home, and your second space is your work, then your third space are those places where you find community with others.” — Ray Olderberg (Sociologist)
ThirdSpace, inspired by Olderberg, is an app designed to help coffee shop goers find and reserve a spot at the perfect coffee shop, with all their needs satisfied, for every occasion on-spot or in-advance.
Problem & Role: Why ThirdSpace?
Most apps on the market focus on remote workers and their practical needs (e.g. Wi-Fi, outlets) when working at coffee shops. These apps do not cater to users who go to coffee shops to hang out or their preferences (e.g. vibe, music, etc.), whether working of hanging out. Furthermore, most of these apps do not consider coffee shop owners’ needs. To bridge these gaps, I conducted primary research with both coffee shop goers and coffee shop owners to build a service that could satisfy both coffee shop goers and owners’ needs.
My Role: I wore many hats in the holistic UX process: I was the UX researcher, Information Architect, UX designer, content strategist, UX designer and UI designer.
Coffee shop goers: Goers would like to discover and reserve seats at the right coffee shops, whether it is to work or hang out, and have their practical needs and stylistic preferences satisfied. However, there isn’t an effective way for them to find suitable coffee shops that can satisfy their needs.
Coffee shop owners: Owners want to boost their revenue and operational efficiency but often don’t know where to start or how to do so without compromising the comfort of their shops.
Coffee shop goers: Design a service to encourge coffee shop goers to discover coffee shops that satisfy their practical needs (e.g. Wi-Fi, Outlets, etc.) and preferences (e.g. vibe, music) and plan their visits hassle-free.
Coffee shop owners: Design a service that would help streamline coffee shop owners’ operations (e.g. lighten owners’ loads by automating reservation functions) and marketing efforts(e.g. social media, marketing offers, etc.).
My goal was to build a service that caters to both B2B and B2C users. However, due to time constraints, I decided to focus on the B2C ThirdSpace app. With that said, many of the features and content on ThirdSpace resulted from taking the time to understand coffee shop owners’ needs through user research.
Process: How Did I Do That?
To design ThirdSpace, I employed a holistic UX process, all the way from user research to UX design, usability testing, and iterations:
Some of the solutions that ThirdSpace offer include:
Allow users to search for coffee shops based on their practical needs and preferences
Provide users coffee shop suggestions based on their preferences for (1) working and (2) hanging out
Provide users quick and easy ways to make and share reservations
Enable coffee shop owners to broadcast marketing offers to attract customers and boost per customer transaction (PCT)
Integrate reviews and Instagram into individual shop page to leverage popular social media channels
Without further ado, let’s dig into the different stages of the project!
Stage 2: Research Analysis and Planning 📋
While there’s an age-old rivalry between quantitative and qualitative methods, a good UXer knows the strengths and the “when” to employ these methods. I used both quant and qual research methods and a little more.
The overarching research goal was to identify coffee shop goers and owners, find out about their practices and needs and find ways to bridge the gap between respective parties’ needs and desires.
1. Secondary research & competitive research
To gain some inspiration and understanding of coffee shops’ diverse roles, I started off with some secondary research, a research method that involves using already existing data. One of the most informing resources was the academic piece, Coffee Shops: Exploring Urban Sociability and Social Class in the Intersection of Public and Private Space. For instance, Pozos from Stanford outlined the top four appeals of coffee shops:
What’s particularly interesting is that getting a cup of coffee to go from coffee shops is context-specific. While this may be true in the US, my research proved that this is not the case in Taiwan. Pozos also highlighted the fact that “The principal product that coffee shops sell is the experience.”
In addition to secondary research, I also conducted heuristic evaluations for three competitors’ solutions for both inspiration and cautions:
2. Primary Research: Quantitative survey & user interview
To kick off the primary research, I conducted a quantitative survey to gain some understandings of users. Out of 200+ responses, these were two of the most interesting findings:
Out of 204 respondents, 84.3% go to coffee shops to work independently, 73% go to coffee shops to catch up with friends, and 43.1% go to coffee shops to work or study in groups (2+ people).
The top five important factors for coffee shop goers are outlets, work-friendly, quality of coffee, time limitation, and ambiance.
With the survey results in mind, I recruited 10 participants through a screener survey and conducted a total of 10 interviews: 5 interviews with coffee shop goers and 5 interviews with coffee shop owners. For coffee shop goers I focused on their coffee shop habits, preferences, and experiences. For coffee shop owners, I asked about their ideologies, operations, and preferences. Since coffee shop goers are the focus of this case study, I will focus solely on goers from now on 😇
Stage 2: Research Analysis and Planning 📋
1. Research Analysis
Extracting usable essence from complex and messy user research data was one of the most challenging parts of this UX journey. As a classically trained digital anthropologist, I am trained to expand the mundane and focus on the most minute details. Not that mundane details aren’t important, they can be some of the most enlightening stories, but reducing complex research down to key actionable insights that can then be translated into tangible features took a complete shift in mindset.
Thanks to powerful tools like affinity maps and empathy maps, I was able to organize pages and pages of research notes into two user personas:
2. Information architecture
I had a bit of a mental block before entering the site map and user flow stage. A tempting thought went through my head (several times): I’ve done all the research, came up with solid personas, and even have some very tangible features in mind…can’t I just skip this and get to the sketches and wireframes already? The answer is an emphatic no. Can you imagine a blob of flesh without a sturdy skeleton? Neither can I.
When drafting flows, not only are you building the skeleton of your app, it is also the first true test to whether you know what service and/or product you’re really trying to make. This is also when UX designers come face to face with our own laziness and temptation to build easy routes and features rather than the best experience.
ThirdSpace’s progression was so much smoother (and my life was so much easier) afterward because I spent the necessary time to plan out the Information Architecture, the organization and structure of within ThirdSpace.
I certainly iterated the flow as I progressed (hat tip to the good ol’ fashion agile mindset), but I never stopped `command+tab`ing between these user flows and whatever I was working on.
After all, most of the user experience lies in the flow. Having an aesthetically pleasing product would mean nothing if the flow is s**t.
Stage 3: Sketches and Wireframes
At this stage, the product already seemed pretty tangible to me. However, through chatting with some friends and families, I realized simply talking to them about the service was too abstract — they need something tangible to help minimize the mental load of having to fill in the gaps with their imagination. As Dave Grey argued in What is Visual Thinking,
“If your ideas can’t be drawn, they can’t be done. Visual thinking is a vital skill for developing new ideas and designs, communicating those ideas effectively, and collaborating with others to make them real.”
Here are some of the sketches of ThirdSpace’s key features and red route, which I brought to life by building a quick prototype with Marvel Pop. I conducted 5 guerrilla testings in coffee shops and received some valuable insights:
With the testing results in mind, I proceeded onto building wireframes. To make the product even more believable, I opted for hi-fi wireframes, where all content was filled in instead of opting for filler texts. As an ex-content strategist, UX writing was extremely enjoyable and satisfying 😍 With that said, I definitely had to remind myself keep things short and sweet 😅:
Stage 4: Hi-Fi Mock-Ups & Prototypes
Now that ThirdSpace has a solid skeleton and some content, it was time to fill the rest of the flesh in through a hi-fi prototype.
Like the rest of the UX process, UI design takes planning. Before I kicked off the design process, I utilized Milanote to help me create a mood board. It provided a strong visual guide for how I want the app the feel, the general color scheme, plausible fonts, and inspiring apps:
Initially, I chose the third photo of the first row as my color palette. However, after playing with the colors a little bit, I realized the colors were way too dull. Not to mention, brown is perceived as reserved and boring…I didn’t want my app to be boring 😤 So I added some yellow to brighten things up! After all, a bit of yellow can bring joy, happiness, and even confidence and inspiration! This organized style guide resulted from me experimenting with colors and fonts like a true (accessibility-conscious…the denotive colors pass W3C standards!) artist 👩🎨:
I built two iterations before deciding on the second one. Both designs utilize Google’s minimalistic font, ASAP, and a similar color scheme. However, the second one incorporated darker elements to create more contrast. Through the color contrast between the black-photo in the header and clean white background for the content, the second design provided more focus. It also capitalized on iPhone XS’ rounded elements, creating a more holistic UI experience 💪🏼
Stage 5: Usability Testing and Iterating
1. Usability Testing & Iteration (Round 1)
Following the second iteration’s style, I created a hi-fi prototype with Sketch and InVision and conducted 5 usability tests. Two of the usability tests were unmoderated remote tests while the rest were in-person usability tests. Having been critiqued by some of the brightest academics at UCL, I was used to receiving constructive criticisms 😇 Except this time around, it was my job not to defend my design to my critics.
As Jared Spool reminded every UX designer in Seven Common Usability Testing Mistakes, recruiting the right participants is half the battle. I made sure to recruit participants who represented my user personas instead of simply focusing on the demographics. These were the usability tasks:
From the usability tests, I made some tangible design iterations:
2. Usability Testing and Iteration (Round 2)
"Usability Testing is great for identifying problems. Yet, it’s horrible at identifying solutions…You can’t tell from the initial test, which pinpointed a problem, what solution will work. You need to test again, this time with a working implementation of the solution" — Jared Spool, UI engineer
Following Spool’s words of wisdom, I proceeded onto doing a second round of testing with five more participants.
I was surprised that I neglected a very viable case that I had not taken into consideration: It’s great that after a user makes a reservation, she can simply click on the yellow pop-up-shortcut on her app to display her reservation QR code, but what happens if she makes several reservations? The solution was simple — simply add a “Manage Reservations” to the personal profile would suffice, but this could have very much been neglected if it wasn’t for the second round of usability testing. Users to the rescue once again 🧚🏼♀️
Another super interesting experience was receiving completely opposite feedback from the users I tested. Let’s take a quick look at these pre- and post-iteration screens:
What changed? Well, a lot…but one of the main things that changed is that the location selector and search bar is now within “The Thumb Zone.” I’m sure EVERY USER would applaud such amazing iteration right? Many users loved it, but not everyone. Not Suzy.
“I’m not really used to having the location stuff at the bottom…I’m used to having it at the top left corner”—Suzy (alias)
In this case, I chose to take Suzy’s response with a grain of salt and stick to UI best practices. This was one of those cases that reminded me of the importance of conducting multiple usability tests to gain perspectives. As a UX designer, I take the users very seriously. However, that doesn’t mean I have to act on every single feedback my users give me, especially when a specific user is an anomaly.
Closing Thoughts: “It’s Still Day One”
Amazon may have become one of the biggest tech (and much more) giants in the world. But for more than 10 years now, Jeff Bezos have been saying the same thing: “It’s still day one.”
This may be the end of ThirdSpace’s life as a concept project (Or not! Who knows!), but in the real agile world, there are always more testing to be done and iterations to implement. A product is never finished.
To finish things off, there are more screens of ThirdSpace below 🤓
Thanks for going on this 10-minutes-long UX journey with me! Feel free to reach out if you have any questions or would like to work with yours truly 😉