Groove

UX/UI Design
See Prototype
Project Overview
Groove is an app for beginner dancers to learn how to dance in an easy to follow manner with a focus on community creation and peer to peer support and feedback.
Constraints
8 week timeline
iOS platform
Mobile first design
Problem Space

Throughout the years I have come across many people who have expressed an interest in learning to dance and have "learning to dance" as an item on their bucket list. Many of my friends have even taken dance classes, yet due to challenges that they have encountered such as finding classes too difficult to follow and psychological barriers such as believing that they are not skilled enough to pursue dance, they have given up. I believe that everyone has the ability to express themselves through dance and just need to have access to the right tools.

Design Process Overview

Design process overview - empathize, define, ideate, prototype and test

User Interview Findings

Illustration of user profile

Dance community

Dancers do not feel comfortable sharing their dance videos over social media and would want a separate judgement free platform where they can receive support and feedback.

Illustration of an upward graph

Foundation classes

Dance classes usually do not go over foundations and go straight into learning the dance routine. Beginners find that without knowing the basics it is difficult for them to learn the actual dances.

Illustration of a lock

Psychological barriers

There are a lot of psychological barriers that individuals have with dance such as embarrassment, and fear of judgment. New dancers compare themselves to other dancers in the class and feel embarrassed if they are at a lower skill level.

Illustration of a media screen

Flexible class duration

Working adults are busy and do not always have a full hour, which is the usual dance class length to devote to dance. Most interviewees expressed interest in having 20–30-minute dance classes so that they can easily squeeze dance sessions into their days.

Market Research

Competitor comparison chart
T.Milly TV
Underground Dance
Steezy
Criteria
Virtual Classes
Foundational Programs
PROS
CONS
Dance Style Variety
Live Classes
🙅‍♀️
🙅‍♀️
🙅‍♀️
🙅‍♀️
🙅‍♀️
🙅‍♀️
Peer Groups
A lot of foundational programs
Dance classes tailored towards advanced dancers, no peer groups
Lack of foundational classes, no peer groups
A lot of bugs, no way to connect with peers within app
Famous instructors, good interface
Well known in Toronto, many classes
🙅‍♀️
From analyzing the competitors, there is an opportunity to create a platform with a community element which will serve as a differentiation point and a competitor advantage.
Which leads to the question...

How Might We...

Create a digital dance experience for new dancers which focuses on creating a sense of community and easy to follow dance programs, so that beginners have the right tools to grow as a dancer.

Task Flow

The task “post my dance videos in a judgement free community” from the core epic of motivation was chosen, as this is the differentiating feature of my app compared to other dance platforms. Having a judgement free community will allow new dancers to provide support for each other  during the learning process, and thus will help dancers stay motivated to keep taking classes and posting the results in the community.

As a new dancer I want to post my dance videos in a judgement free community so that I feel comfortable sharing my progress and won't be judged

Task flow chart, showing the process of completing the task of posting a dance video to the community page

Ideation Sketches

After establishing my task flow, I started sketching some ideation sketches of what the application could look like when translated digitally. I made multiple versions, shown below is the chosen sketch that I based my wireframes on.

Translation of task flow in to hand drawn sketches

Digital Wireframes

Low Fidelity

I then translated my chosen sketch into my first set of low fidelity digital wireframes and conducted my first round of usability testing to test the flow of the app and catch any issues early on.

Low Fidelity version of the wireframes

Mid Fidelity

After receiving and applying feedback regarding the flow and functionality of my low fidelity wireframes, I created the second version which is mid fidelity and conducted another round of user testing.

Mid Fidelity version of the wireframes

Testing

After my initial wireframes were complete, as part of the design process, I conducted 2 rounds of usability testing with 5 users in order to obtain practical, real-time feedback to improve the design and provide a more optimal user experience.

Design Fixes Round 1

Highlighted design fixes after the first round of user testing

Design Fixes  Round 2

Highlighted design fixes after round two of user testing

Visual Identity

I created a mood board to embody the feelings I wanted to convey with the app, along with words that describe the design feel.
Urban
Expressive
Raw
Authentic
Color palette, purple, pink and greyMoodboard for the app

High Fidelity

I then started inputting the determined visual identity into my high fidelity wireframes.

High fidelity app screensHigh fidelity app screens

Prototype

View Prototype in Figma

Learning Outcomes

From working on this project, I learned how crucial it is to go into the research phase with no biases and no solution in mind. The interviews and secondary research will likely provide insights that were not apparent before, and that is what the solution should be based on. It is easy to think of a solution beforehand, and only takeaway information from the research that confirms your initial beliefs, however, this will not solve the users true pain points.

I have also learned that it is critical to experiment early on, especially during the sketching process, because as you progress in the project, it becomes increasingly more difficult to make changes. Taking your time to experiment with different app designs early on, will save time down the road.