Project: Individual Class Project
Role: Product Designer
Timeline: Mar-Apr 2025
Tools: Figma, Miro, Google Docs, Google Forms
Background
As a cafe explorer and a resident of Ann Arbor, I felt a lack of attention and resources for discovery of local and small coffee shops in town.
Goal
I aimed to design a product that. encourages users, especially local coffee lovers and students, to explore and support local cafés in Ann Arbor through a gamified, reward-based experience. DripTrip also aims to make discovering cafés more engaging by combining a visual map, exclusive offers, and a reward system that incentivizes visits.
Problem Statement
Ann Arbor residents who are casual cafe-goers struggle to discover new local cafes that match their preferences for ambiance, quality, and experience. Existing discovery methods, such as word-of-mouth, Google searches, and social media, do not provide a centralized platform specialized to provide an efficient and personalized way to explore and find cafes
User Research
Interview Questions
To identify the needs of U-M students and Ann Arbor residents, I conducted user interviews to gain deeper insights into their experiences with buying and selling second-hand items. My goal was to identify key pain points, preferences, and behaviors of visiting cafés and trying new coffee and drinks. I wanted to understand existing resources and how they were meeting user needs.
I conducted interviews with 3 U-M undergraduate students for 30 - 45 minutes each.
Examples of questions include...
1. How often do you go to a cafe/coffee shop?
2. How often do you buy drinks/coffees? Why?
3. Do you often seek out new cafes/coffee shops? Why or why not?
4. What methods do you use to find new cafes/coffee shops?
5. How much money do you typically spend at a cafe/coffee shop? Why?
6. What do you look for in a cafe/coffee shop?
7. How much do you typically travel to go to cafes/coffee shops?
8. How far are you willing to travel for cafes/coffee shops?
Survey
An anonymous survey was sent out to communities within Ann Arbor such as club group chats, class email list, and general friends as another method of collecting insights. Questions targeted the same topics as the interview questions, but participants were presented with answer choices. 50 responses were recorded.
How often do you go to a cafe/coffee shop?
How often do you seek out new cafes/coffee shops?
What methods do you use to find new cafes/coffee shops?
What do you look for in a cafe/coffee shop?
Insights
1. Cafés are seen as both a beverage purchase and a lifestyle choice (study space, social space, mental treat).
2. Word of mouth and media such as Google Maps, Yelp, Instagram, and TikTok heavily influence choices.
3. Convenience and experience are balanced — nearby options preferred for everyday visits; special places are occasional excursions.
User Personas
User Journey Map
Ideation
Sitemap
Low Fidelity Sketches
Low-Fidelity Wireframes
Design Guidelines
Feedback and Iteration
After developing the initial designs, I conducted user testing to gather feedback on usability, functionality, and overall experience.
Through testing sessions and feedback surveys, I collected insights...
Feedback: Titles on the pages would help convey the main purpose of the page. (Instructor)
Iteration: This made me reconsider my designs from a user’s perspective, and I realized that pages that seemed obvious to me might not be clear in their purpose for users. I added titles such as “Maps”, “Offers”, and “Account” to clarify this.
Feedback: Have a clear selection state for your navbar. (Instructor)
Iteration: This is something that I often overlook because it’s a detail, but something that could give the users a better idea of where they are in the app. I added a reaction to the navbar so that when the user is in a certain location of the app, the navbar icon changes to brown.
Feedback: Make the test content the center point of this page, and make the decorative/visual styling elements work supplementary with the information you're trying to convey. (Instructor)
Iteration: I changed the location circles to be different colors, reflecting the color of the boxes. The boxes are also two different colors, depending on whether the user has visited the cafes on the map. I also added a stroke to each box to incorporate more colors to make it visually appealing.
Final Design
Takeaways
1. Interactive Design
Through this project, I deepened my understanding of how interactive elements enhance user engagement. I focused on designing intuitive interactions that not only made the product more dynamic but also aligned closely with user behaviors and expectations. This experience reinforced the importance of purposeful interactivity in creating memorable and user-centered digital experiences.
2. Design Skills Development
This project served as a key opportunity to advance my Figma skills, particularly in building scalable design systems. I gained hands-on experience with components, variants, and advanced prototyping techniques, allowing me to deliver a more polished, high-fidelity prototype. I also refined my ability to create designs that are not only visually cohesive but also technically ready for handoff to developers.
My next steps for this product are integrating features that allow the users to post their DripTrip progress or invite friends to join them on café hops.