Sip Sync Local Cafe App

Dylan

Dylan Yu

Sip Sync

Local Cafe App

Project
Role
UX UI Designer
Company
Personal Project
Tools
Figma, Figjam, Miro, and Illustrator
Sip Sync is a mobile app that connects your coffee preferences with local cafés. It learns what you like, recommends new drinks, and helps you discover spots that match your taste.
Originally a group project for class, I worked with three other classmates and was in charge of designing the log in and homepage. This included notification, search history, and the ordering process. After the semester ended I decided to remake the entire app.

Problem

Food delivery apps offer endless choices, which can be overwhelming—and they rarely highlight small, local cafés. There’s a gap for an app that focuses on personal taste and helps people discover nearby coffee spots that match what they actually enjoy.

Resources

I analyzed popular apps like Starbucks, Dunkin’, and Uber Eats, and visited local cafés around campus to observe real-world workflows.
The intro animation was created using a breakdown of an animation created by seven.

01 UX & Structure

The design of Sip Sync focuses on easy navigation and clear user flows. We created personas to understand different user needs and motivations, which helped shape the experience. Site visits to local cafés provided real-world insights that influenced the design choices. By simplifying the ordering process, users can quickly find local cafés, browse menus, and make purchases without extra hassle. Card sorting and affinity diagrams helped shape the content layout, making sure the most important info is easy to find. This straightforward structure connects users to nearby cafés smoothly and naturally.

02 Wireframes

I created wireframes early on to map out the app’s layout and key screens. This helped me focus on clear navigation and smooth user flows, making sure users could easily browse cafés, view menus, and complete orders. The wireframes acted as a blueprint to guide the visual design and keep the experience simple and intuitive.

03 Testing & Iteration

We held a user testing session in class where people tried out all the apps, including Sip Sync. One common piece of feedback was that some parts felt confusing and users didn’t always know how to navigate. Using this input, I refined the layout and navigation to make the app clearer and easier to use.

04 Visual Guide

I chose Refile for display text because its bold and distinctive style grabs attention and adds personality to headings and titles. For the body text, I used Montserrat since it’s clean, modern, and highly readable, which makes longer paragraphs easy on the eyes.
Sip Sync’s branding uses a warm, familiar palette inspired by the inviting atmosphere of local cafés. Variations of orange convey friendliness and energy, while a soft off-white background keeps the interface clean and approachable. A deep purple is used for text to ensure strong contrast and visual clarity. The color choices echo elements found in well-known platforms like Dunkin’ and Grubhub, creating a sense of familiarity while being adapted to reflect the local, community-first values of Sip Sync.

05 Outcomes

The final app offers a simple way for users to discover local cafés, explore menus, and place orders quickly. The design improvements based on user feedback made navigation clearer and the experience more enjoyable. Sip Sync successfully fills the gap for a personalized coffee app that connects people to nearby spots matching their tastes.
Personalized Quiz
The personalized quiz helps users discover their unique coffee preferences by asking simple questions about taste and habits. Based on the answers, Sip Sync recommends local cafés and drinks tailored just for them.
Local Cafe
Connects Sip Sync with nearby cafés to keep menus, specials, and availability up to date. This ensures users always see accurate options and can easily support local businesses.
No Hidden FeesD
Sip Sync is transparent about costs—there are no hidden fees, so users know exactly what they’re paying for every order.
Track Order
Users can track their order status in real time, so they know exactly when their coffee will be ready or arriving.
Past Order
Users can easily view their past orders to reorder their favorite drinks or keep track of what they’ve tried.
Profile
Users can check their order history and rate their experience with each café. This helps personalize future recommendations and improves the overall app experience.
MORE WORK
Like this project

Posted Jun 22, 2025

Designed Sip Sync app to connect coffee preferences with local cafés, enhancing user experience and navigation.