Sip Sync
Local Cafe App
Project
Apr 2025 - May 2025
Role
UX UIDesigner
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.
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.
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.
Josef Alber’s “Interaction of Color” was my primary source for when my project was still focused on learning color theory.
The Temperature Blanket was a big influence on my final project. The website generates a color palette based on the weather of a certain area. It’s what inspired me to link my project to the circadian rhythm and assigning shades of violet.
In the final outcome, the hero animation was created using a break down video by MotionXP.
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
02 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.
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.
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.
The final project resulted in an interactive website that showcases 45 thoughtfully curated violet shades linked to the circadian rhythm. Users can easily explore and create personalized color palettes that resonate emotionally and visually. The design balances minimalism with expressive color use, encouraging reflection and connection through color. This project highlights violet’s potential as a versatile and meaningful design element.
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.
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.
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.
The final project resulted in an interactive website that showcases 45 thoughtfully curated violet shades linked to the circadian rhythm. Users can easily explore and create personalized color palettes that resonate emotionally and visually. The design balances minimalism with expressive color use, encouraging reflection and connection through color. This project highlights violet’s potential as a versatile and meaningful design.
Personalized Quiz
I created a gallery with 72 design experiments currently, using different mediums like type, motion, and texture. These were a way for me to test how violet could work in different styles and moods, and they helped me explore the color’s flexibility through hands-on making.
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.
Gallery
Local Cafe
The final site includes a color generator that helps users create their own palettes using 45 violet shades tied to the circadian rhythm. It’s designed to feel intuitive and personal—guiding users through a process of selecting colors based on time, mood, or visual preference.
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.
The final site includes a color generator that helps users create their own palettes using 45 violet shades tied to the circadian rhythm. It’s designed to feel intuitive. Guiding users through a process of selecting colors based on time, mood, or visual preference.
Generator
No Hidden FeesD
A section for popular palettes, so users can browse and get inspired by the combinations others are drawn to. It turns the palette-building process into something both creative and shared.
Sip Sync is transparent about costs—there are no hidden fees, so users know exactly what they’re paying for every order.
Palette
Track Order
Colorway section, where I organized the 45 violet shades into smaller, themed sets. Each colorway highlights a specific mood, energy, or time of day, helping users understand how violet can shift depending on context.
Users can track their order status in real time, so they know exactly when their coffee will be ready or arriving.
Colorway
Past Order
Colorway section, where I organized the 45 violet shades into smaller, themed sets. Each colorway highlights a specific mood, energy, or time of day, helping users understand how violet can shift depending on context.
Users can easily view their past orders to reorder their favorite drinks or keep track of what they’ve tried.
Colorway
Profile
Colorway section, where I organized the 45 violet shades into smaller, themed sets. Each colorway highlights a specific mood, energy, or time of day, helping users understand how violet can shift depending on context.
Users can check their order history and rate their experience with each café. This helps personalize future recommendations and improves the overall app experience.
Colorway
