Coffee Dance | Xinchenhu

Project

Coffee Dance Website Re-design

summary

Coffee Dance Studio, a Seattle-based K-pop dance studio, needed a website redesign to enhance user experience. I collaborated with the studio’s founder to create a dynamic, user-friendly platform that simplifies navigation and better represents their brand.

Resposibilites

UX Design

UX Research

Front-end Developer

Project Overview

Coffee Dance is a conceptual UX design project aimed at redefining the experience of ordering coffee on the go. The project explores how mobile applications can integrate convenience, personalization, and seamless interaction to improve the user journey.

before we start

THE CHALLENGE

The existing website had:

Complex user flow: Information was hard to find.
Outdated design: It resembled a static PowerPoint.
Lack of engagement: No dynamic interactions or visual appeal.

The goal was to simplify navigation, modernize the design, and showcase the studio’s unique offerings effectively.

Screen Shot 2022-08-30 at 10.23.08 AM.png

Screen Shot 2022-08-30 at 10.24.17 AM.png

Screen Shot 2022-08-30 at 10.23.32 AM.png

meet with the business owner

I conducted an in-depth interview with the studio’s founder, Tory, to align business goals with design decisions.

Key Takeaways:

Why redesign?
“The website looks static, lacks interaction, and isn’t visually appealing.”
Success Metrics:
- Attract users through dynamic visuals and effects.
- Encourage Instagram following and class bookings.
Target Audience:
- 80% young professionals (19–32 years old).
- 13% teenagers (12–18 years old).
- 7% older students (32–40 years old).

TALKING TO REAL PEOPLE

To validate assumptions, I conducted usability tests and qualitative surveys with 10 participants (ages 19–32).

Major Findings:

Booking system: Needs simplification.
Navigation: Users struggled to locate essential information.
Visual appeal: The website lacked an engaging and professional look.

define: problem statement

The Coffee Dance Studio website fails to deliver a professional, user-friendly experience. Users struggle to navigate content, book classes, and engage with the brand, leading to frustration and missed opportunities for growth.

explore the solutions

Based on Tory’s feedback and research insights:

Visual Identity:
- Explored multiple color schemes (pink, yellow, orange, blue).
- Tory selected a combination of yellow and orange for a dynamic, welcoming look.
Simplified User Flow:
- Refined navigation to prioritize essential tasks (booking, events, team intros).
Interactive Features:
- Added dynamic animations for a more engaging user experience.

After reviewing the designs, Tory selected yellow and orange for the color scheme but wanted to see how the booking page would look. To help her finalize the decision, I began designing the booking page, ensuring it aligned with the overall vision while prioritizing usability and aesthetics.

Website User flow

I had a short meeting with Tory, and I asked her:

"What should be kept from this current website?,

"What should be removed?"

"What should be added?"

Then I created a user website for new website, and discussed with Tory if there's anything I should change. The final website user flow look like this:

Hi-fi wireframes

I delivered high-fidelity wireframes with:

Improved navigation: Simplified paths for class booking and studio exploration.
Dynamic visuals: Eye-catching animations and bright color themes.
Enhanced user engagement: Features like partner events, instructor introductions, and FAQs.