Project type
End-to-end mobile app
Role
Research
UX/UI design
Brand identity
Tools
Figma
FigJam
Maze
Timeline
5 weeks
Designed for the coffee enthusiast, professional and casual coffee drinker, Dabbio allows for exploration through maps, guides and social avenues. Users are able to browse casually or take a deep dive into the specialty coffee scene.
Search by city or cafe, see what’s close by, browse Dabbio’s curated guides, and filter your search to find the type of cafe you have in mind. Looking for a cafe serving drinks in ceramics and not paper? There’s a filter for that.
Create and organize lists for yourself and to share with others, discover users with similar tastes and follow user-created lists to use as guides and engage with the Dabbio community.
Background
Coffee shops are unique in that they serve different purposes for different people. They can be a quick stop for a caffeine boost, a remote office, a study hall, a creative space, or simply a place to sit and enjoy coffee. It’s for this reason that people frequent coffee shops where they live and when they travel. Visiting a coffee shop is the perfect combination of familiarity and intrigue.
Problem
Both casual coffee drinkers and enthusiasts seeking to elevate their coffee experience find it challenging to discover new shops, find shops that align with their preferences, and keep up with coffee trends due to the lack of a centralized space for discovery, education and community within the world of coffee.
Goal
Design an informative and engaging app that elevates the coffee discovery experience and encourages users to explore and enjoy coffee culture at their own pace, while enhancing the visibility of specialty cafes and fostering a stronger connection between the specialty coffee scene and its community.
“I always enjoyed going to wherever the nearest specialty coffee place was and getting espresso and tasting it and seeing ‘well, how do they do it here, what beans are they using’ so it was always a way to kind of augment my travel experience…”
– Brian, interview participant
01 ResearchExploring the problem space
Research goal
Learn what coffee drinkers look for when deciding which coffee shops to go to both at home and while traveling, to better understand what information is deemed valuable, and how to best present that information in a way that enhances the user experience of coffee drinkers and enthusiasts of all levels.
One of the first things that stood out to me while looking at the coffee focused apps of European Coffee Trip, Roasters and Best Coffee, was that although they have decent sized databases, the available information can be lacking or inconsistent. While these apps identify specialty coffee shops, the amount and type of information displayed varies from shop to shop.
It’s when I looked into the adjacent apps of Untappd and AllTrails where I was able to see the benefits of combining exploration via maps with community or social features to create a more well-rounded and engaging experience.
To supplement the competitive analysis, I conducted remote interviews via Zoom. The five participants ranged in age from 24-38 years old and fell under at least one of the following categories:
People who visit specialty coffee shops
People who research coffee shops for upcoming trips
People who integrate coffee into their travel experiences
People who seek out specialty coffee shops while in a new or different city
People who consider themselves coffee hobbyists
Research insights & synthesis
02 Define“I know it’s a lot to consistently make good espresso over your shift, so I do put a lot of stock into the barista that’s on the machine.”
— John, interview participant
I found that users:
will fit specific coffee shops into their travel itinerary
are willing to travel a little out of the way for a better or unique coffee experience
want to know the shops. What equipment is used? How is the latte art? Are the baristas friendly and professional? Where do they source the beans from? What’s the general vibe?
place a lot of stock in baristas and value their knowledge
The travel-pointed questions were important to understand how, or if, I could integrate this with a user's travel experience. So it wasn’t just a way to find coffee shops, but a way to create an experience around it.
“It’s really nice to talk to the baristas about where else to go because it’s a more localized experience then just like using Google Maps.”
— Brian, interview participant
“While traveling, I’ll look at their Google listing usually, I’ll look at the images to see if there’s latte art. To me, that means the barista knows something about what they’re doing. I’ll look at the furniture or stuff in the background like the equipment that they’re using. If it’s good equipment or not, you know and then that’ll be an influential factor.”
— Julius, interview participant
Through affinity mapping, the following themes emerged:
Purpose: emotional, social and necessity/routine aspects of coffee shops
Cafe: logistics, atmosphere, quality and offerings
Coffee: taste and beans used, as well as consistency
Discovery methods: how participants typically find shops
Travel: what role coffee shops play in the participants’ travel experiences
Challenges and pain points: the general frustration of misleading or lack of information.
A Coffee Tourist and a Casual Sipper walk into a cafe…
I created two personas, each with different levels of coffee enthusiasm, to capture the needs and frustrations of target users for reference throughout the design process.
So, where do the opportunities lie?
How might we provide a streamlined discovery process for coffee enthusiasts to utilize when searching for specialty coffee shops at home and while traveling?
How might we enhance the travel experience of coffee enthusiasts when visiting a new or different city?
How might we highlight and present the local coffee scene to coffee enthusiasts at home and while traveling?
Brainstorming & information architecture
03 IdeateI wanted to design something that was informative and approachable with a communal and social aspect. However, when it came time to prioritize feature ideas, those communal and social aspects fell below the informative features. My rationale being that the informative features would lay a foundation of which to build upon.
For the time being, I settled on the following:
Map of specialty coffee shops
Coffee shop profiles
Ability to save and share shops
Curated guides
The curated guides would play a huge part in setting this app apart from the others by providing a personal, valuable touch to the user experience.
I created a sitemap to get an idea of how everything could be laid out and organized…
Then a more detailed sitemap to get a feel for how the screens could look and flow…
Next, I mapped out two user flows to show the movement through the tasks of saving a coffee shop and sharing a coffee shop profile.
04 DesignWireframing
I decided on key screens and began hand-sketching different layout options. I had a couple of different ideas for the explore screen, but ultimately decided on the first version since it followed a familiar design pattern used in Google Maps and other commonly used navigation apps.
I brought the wireframes from low-fidelity to digital mid-fidelity.
I began to notice design patterns emerge and started creating components. Fully aware that it was still relatively early in the design process, I put a little extra love into creating those components knowing they would only make my life easier later on.
At this point, I opted to validate my work with the first round of user testing. I created a prototype to test the two flows.
*While waiting for usability test results, I worked on branding to keep the process flowing.*
Defining Dabbio’s brand while attempting to steer clear of coffee puns
I recently learned that “Dabbio” is what my 4 year old niece says instead of “cheers” simply because it’s silly and makes her laugh. For some reason it stuck with me and I began loosely calling the app Dabbio. While it’s a made up word (don’t tell my niece), I liked the idea around the meaning of cheers and the sense of community that comes with it. Which got me thinking about values and branding elements.
I put together a moodboard and found myself gravitating toward the bold colors of travel posters, passport stamps, luggage tags, and old city maps. I took the bold orange found in many of these sources and made slight adjustments to make it more earth-toned to complement the natural aspect of coffee.
For the typography, I was inspired by the “Field Notes” notebooks. I liked the idea that Dabbio could be almost like a traveler's coffee journal.
Recalling from interviews that latte art is usually a sign that a drink is prepared with a certain level of care and knowledge, I went with a latte art inspired logo. The three lines used throughout the sketches are an ode to third-wave coffee.
05 ValidateTesting with mid-fidelity wireframes
I reached out to the interview participants and made a post on Discord looking for participants that fit the target audience. In the end, five participants completed a remote usability test via Maze testing platform.
Users were presented with the following scenarios:
“The last time you were in Richmond, you went to a cafe and had a great experience. You want to show Paix Coffee’s profile to your friend ‘cortado4evr’ on the app in case they hadn’t heard of it.”
“You see Paix Coffee mentioned in a Barista Guide and want to save it to one of your lists of coffee shops. Please show how you would add Paix Coffee to your existing list for ‘Richmond, VA’.”
Two things stood out when reviewing the results:
Priority revisions & taking the design to the next level
For this round of testing, I set aside some time to educate myself on building a more accurate prototype, thinking about the timing and transitions between actions. I focused on the task of sharing a coffee shop since that was the one users gave the most feedback on and the only major change that was made. The tests were conducted the same as the first round - remotely and via Maze.
The results of this usability test were positive with feedback featuring key words such as: easy, simple, straightforward.
Since I started building components early on in the process, I had a nice little library to pull from. I was able to piece together the “Saved” screen to round out this project a little more.
“I’ve had some great travel days that started with me sitting outside a cafe, watching the world go by.”
– Sam, interview participant
Reflection
As someone who loves a good cortado and seeking out specialty coffee shops while traveling, this was a passion project for me and I was so glad to tag in other coffee lovers for the research phase. This was the first set of interviews I conducted where I realized how neat it can be when you tap into something someone is passionate about.
I wanted to establish familiar design patterns while still creating something that felt personable. Leveraging patterns allowed me to efficiently develop components and iterate while staying on track with the timeline. The personable touch came with the idea of guides and the basis that they are curated by not only the Dabbio team, but also baristas, locals and other coffee professionals. From the beginning, I knew Dabbio needed something to set it apart from other coffee shop discovery apps, and I believe I found that with the honest, community-driven approach presented throughout the design.
Moving Dabbio beyond it’s current state as a minimum viable product:
Ideate on and build out community features and screens
Test and iterate on new features and screens
Reach out to and partner with coffee shops, brands, blogs and other facets of the specialty coffee community to get the brand name out there
Next case study
Adding a budgeting tool that allows users to confidently plan, save, and navigate their finances.