Jiggle Jiggle

Jan-May 2023

A dancing tutorial app provides accessibility, AI-powered movement tracking, and incorporates cultural context, allowing users to immerse themselves in diverse dance styles.

Jiggle Jiggle addresses the problem of limited resources and qualified teachers for niche dance styles. Through pose recognition and smart controls, it provides accessible tutorials with prompt feedback, empowering confident self-expression and preserving cultural diversity.

Web app

Deliverables

User research, UX/UI design, development, usability testing

Design Tool

1 back-end engineer, 1 front-end engineer, 2 designers

Team

User research, UX/UI design, visual design, front-end development

Responsibility

Dance is a powerful cultural transmitter, fostering self-expression and inclusivity. ‍

Voguing empowers the LGBTQ+ community in a supportive environment, while hip hop serves as a tool for empowerment and resistance among marginalized groups. Despite various styles, dance unifies through self-expression, emotional connection, cultural representation, and pure enjoyment.

What problem are we trying to solve?

Limited resources

However, for less mainstream dance styles, there are limited resources or qualified teachers available, making it harder to find guidance and instruction.

Lack of confidence

In addition, when it comes to styles that require precise movements, people don't feel confident about following the dance moves in the video. This also loses the meaning of dance culture itself.

Cultural context unknown

Some niche dance styles are tied to specific cultures and may require an understanding of the cultural context and history in order to be performed correctly.

We encourage you to embrace your self-expression when the spark ignites. We hope to safeguard every dance culture. We are dedicated to contributing to the enrichment of cultural diversity and celebrating its vibrant tapestry.

How does JiggleJiggle benefits customers?

Dance at your own pace.

Gamification of the dance learning experience with multiple controls, skeleton movement tracker and error collection makes for a joyful and effective tool.

*showcase the final implementation here, not the final design.

See it, learn it.

See any interesting dancing video that you want to follow? Upload it to JiggleJiggle and start to learn it!

Respect the culture

Go deeper into the community and know not only how to dance, but why to dance. Be a truly confident community member.

How did we get here?

What challenges does JiggleJiggle aim to tackle?

How might we design a dance learning platform that empowers confident self-expression, preserves cultural diversity, and provides a fun and engaging experience for beginners exploring new dance styles?

What insights do we gain from observing our target users' learning journey?

1. Challenges in finding related tutorials for unfamiliar dances.

People discover an intriguing dance video online, but struggle to identify its name or describe the dance, making it difficult for them to find related dance tutorials online.

2. The learning process is disrupted by the constant manual control of the videos.

Users often repeatedly checking or pausing the video during practice, requiring constant back-and-forth between the laptop/iPad and the practice area.

3. The need for more controls to learn at their own pace.

Users desire features like a mirror view, looped playback, and slowed speed for dance video improvement.

4. Finding teachers or clubs for niche dance style is challenging.

our three interviewees:

Zhe Hao: A Girl-Style dancer has a hard time finding someone with common interests.

Brandon: An inexperienced individual is seeking an engaging onboarding experience for voguing instruction.

Huang: A B-Boy who is interested in learning House Dance finds it annoying to go to the dance studio.

Easy Task

Video playback control

Enable user-uploaded dance videos with adjustable playback speed, loop, and mirror options.

Dance genre recognition

Upload video clips to analyze the dance genres and show the user the backgrounds of this dance genre.

Moderate Task

Pose Checking

Our app utilizes motion capture technology to extract body keypoints, visualizing user dance imitation.

Recording and sharing

Enable users to record dancing for checking the movements, and share the video on social media.

Difficult Task

Voice commands

Enable users to access most functionalities with voice commands.

A 3D dance tutor (Deprecated)

Perform motion capture on the user-uploaded dance videos and project the dance poses to a 3D virtual dance tutors.

What did we learn from competitive analysis?

Market analysis reveals the absence of our concept, combining body tracking and dance culture information, making it a viable opportunity.

Most dance apps lack body tracking and dance culture information. They primarily offer instructional videos, personalized plans, and learning communities. Some successful apps integrate body tracking with activities like parties, games, or medical rehabilitation. Overall, market analysis indicates the absence of our concept, making it a feasible opportunity.

We sketched the conceptual flow to integrate the tasks mentioned above. The draft integrated platform usage tips during video processing to mitigate boredom, impatience, and provide guidance for optimal utilization. We also explored how to layout features for a seamless learning experience.

How did we conducted heuristic evaluation (a method for identifying design problems in a user interface)?

We revisited the initial three interviewees and had three new candidates for a heuristic evaluation of the first prototype. This test assessed ten aspects, following the established evaluation criteria below.

Severity of Usability Problems
‍
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on the project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before the product can be released

Image is made by Vladislav Gavriluk from Arounda.

What feedback did we receive from the test and how did we plan to respond to it? (listed five tasks that have high priority)

(Severity 2)

No back button between views

Violates:

User control and freedom

Response:

Adding a back button between views.

(Severity 3)

Confusion between “Tutorial” and “Detailed Tutorial” mode

Violates:

Consistency and standards

Response:

We should give a more proper feature name to keep internal and external consistency. Originally, Detailed Tutorial means tutorial with body pose reference. It’s better to simplify selection experience by using one radio button.

(Severity 2)

Insufficient visual indications for error moves detection.

Violates:

Aesthetic and minimalist design

Response:

To avoid unnecessary elements distract user understanding primary goal, the error moves information should be placed separately and make it easier to discover.

(Severity 3)

Fail to recognize the webcam will be used

Violates:

Help and documentation & Visibility of system status

Response:

Add sufficient visual indications, like a pop-up page, to communicate the webcam opening status with the user, and suggest standing at a proper distance from the laptop to track dancing states.

(Severity 2)

The layout of camera view and tutorial video doesn’t meet user expectation

Violates:

Match between system and the real world

Response:

Follow the learning experience at dance studio, place two windows horizontally.

Design iteration

Heuristic evaluation revealed learning experience issues, which the iterated design addressed.

We conducted another user testing after design iteration, and realized the words 'Missed,' 'Good,' and the animation were not very delightful, which we addressed during the later implementation process.

Implementation

Using only HTML, CSS, and JavaScript for the first time, I learned valuable UI design implementation lessons despite time constraints and limited coding knowledge, later applying these in my product design internship.

Coding with Visual Studio Code

Homepage implementation

Culture Intro Pop-up implementation

For the frontend framework, we chose React to implement all the web app interface. We experimented with a couple of APIs to support video playback, webcam, and general app controls.

For the backend framework, we chose Django, as it allows for easy integration with machine learning pose estimation APIs using Python. We built a video processor class that is capable of estimating the pose of the uploaded videos and store the data into the SQLite dataset. We also enabled real-time pose estimation using the user's laptop camera and the pose estimation model. Due to this technical implementation logic, we decided to remove the "video processing" feature.

Learning page implementation

Demo day

JiggleJiggle had the opportunity to showcase at Jacobs Institute for Design Innovation. It attracted many people to try the interactive demo, and we received a lot of comments on the fun learning experience.

Reflection

1. Active listening, clear and concise messaging and empathy leads to effective team communication and efficient process. We usually excelled, but allowing more time for design implementation discussions could further enhance our performance.

2. Utilizing Heuristic Evaluation in prototype testing was helpful. I'm pleased that we conducted multiple tests and iterated based on the results

3. The delight of the learning experience stems not only from the overall flow but also from details such as wording.