Project Timeline:

May - November 2019

Tools:

Figma

InDesign

Illustrator

Passion Project

Joyfully

Solo Project

Roles:

User interviews

Market research

Low-fidelity wireframes

High-fidelity wireframes

User personas

Information architecture

Background

Being on three different dance teams at UIUC has taught me a great deal about how to become a better dancer through constant practice and review. Even though all of these dance groups focus on different dance styles, one factor that connects all of them is the sincere love for dance. When we dance, we don't simply focus on what looks right - we also focus on what feels right.

 

When we use dance as a form of self-expression instead of constantly comparing ourselves to what looks "right," we are fully able to embrace what makes dancing so enjoyable in the first place. 

User Interviews

I interviewed dancers with varying amounts of experience to understand why they enjoy dancing. Based on these interviews, I was able to pinpoint three main categories as to why people enjoy dance. 

One of the largest insights that I gained from these interviews is that dance isn't just about the physicality of learning and executing the choreography - it is also about one's mentality, the connections they gain, and the emotions that they feel. 

One of the main subjects that was mentioned in these user interviews was confidence. Confidence grows from how one feels about their dancing and being comfortable with themselves, which doesn't have anything to do with how "perfectly" they can dance. Because of this, I wanted to center Joyfully more around self-reflection and give the user tools that they can use to grow as a dancer both mentally and physically. 

Revisiting "ChoreoMe"

I reflected back on my first UIUX exploration, ChoreoMe.

Its main components were:

  • Learning

  • Reviewing 

  • Critiquing 

While these are very important aspects of dance, its view was from a purely technical perspective -- there were no motivations that enticed people to keep dancing, other than to keep practicing to dance "perfectly." 

ChoreoMe's dance journey also focused on comparing oneself to original choreography videos in order to improve. A beginner dancer ay not be able to pick up on comparison details as well as an experienced dancer. To assume that a dancer can improve by simply comparing themselves to others is unfortunately idealistic.

 

Instead, an effective way to improve one's dancing is by strengthening foundational techniques. Most beginner dancers do not know where to start with foundations because they are not given the tools to practice them. One of the changes that I wanted to make for Joyfully was to incorporate exercises in order to strengthen foundational techniques. When dancers are able to apply these foundations to their movements, this enables them to become more comfortable with themselves while learning choreography. 

Market Research

I searched "learn to dance" on the App Store to see what kinds of dance apps already exist. After going through each app, I realized that there is a lack in apps that raise self-awareness of one's dance growth. The apps listed below feature tutorial videos made specifically for the app, but there is little freedom for people who want to learn choreography outside of the ones featured. 

STEEZY Studio

Pros:

  • Users can learn speed up and slow down videos to learn at their own pace

  • Instructors create their own videos that explain choreography step-by-step

  • Keeps progress of classes that the user has started and which they have not

  • Variety of different dance styles and instructors

  • Offers video tutorials for basic techniques

Cons:

  • App is free to download, but is not functional at all without a paid subscription ($99.99/year or $19.99/month)

    • Users might invest their money in actual dance classes at this price​

  • All choreography is pre-made, so users cannot learn other choreography that is not made for the app

Trance

Pros:

  • Users can follow along with pre-made videos for popular songs

  • Users can make their own choreography to share

  • Choreography has easy, medium, and hard modes

  • Users can record videos directly from the app

  • When following a dance video, there are highlights at the bottom that let the user know which moves are coming up

Cons:

  • Limited songs on the app

  • Choreography is only created by other users on the app

  • No speed up/slow down/mirror options 

  • Advertised as a dance community app- not for self-growth

Onedance

Pros:

  • Users can follow along with tutorials different dance techniques by instructors

  • Front and back view tutorials - no need for mirroring

  • Beginner, intermediate, and advanced modes

Cons:

  • Users cannot learn their own choreography

  • Variety of different dance styles, but still limited 

    • Hip hop, salsa, bachata, footwork, house​

    • Missing: Ballet, jazz, contemporary, etc.

  • Videos are not mirrored

  • Only 15 videos on the app

Flow Map + Wireframing

I created a flow map to get a sense of what basic functions I wanted for the app and the components that go into them. I used terms that appear friendlier (ex: "Reflect" instead of "Critique") to decrease intimidation. 

Study for Video App Layouts

The layouts for video apps are mostly similar, so I studied layouts from Vimeo, Dailymotion, and YouTube. When users use Joyfully, I wanted the layout to be familiar to apps that they have used before for less confusion. 

Dailymotion

Pros:

  • Text is different sizes for hierarchy 

  • Timestamps are included 

  • Clean layout for easy reading 

Cons:

  • All text is bold 

  • Only 2 lines for title text - when there is overflow text, it is indicated by ellipses despite having room for 3 rows

  • Left-aligned timestamps are separate from other text to the right of the preview image

  • Dates and views of each video are unknown 

Vimeo

Pros:

  • Hierarchy of text with bold, thin, and grey 

  • Video share button to the right of each video

  • Timestamp is right-aligned and closer to the text 

  • Text is top-aligned to the preview image

  • Dates inform when the video was posted

  • Sorting categories are clearly displayed at the top

Cons:

  • Video views are unknown

  • Video share button takes up more space than it should on its own (it could be vertically oriented)

YouTube

Pros:

  • Views, date, creator, and title are all present

  • More space for long titles with 3 rows

  • Hierarchy for text with different two text sizes and colors (black vs light grey)

  • Light grey background instead of completely white for better readability ​

  • Time stamps in bottom right corner of video preview 

  • Share button is vertically orientated to allow for more space for text

Cons:

  • Even though a lot of video information is available, it may look cluttered 

When deciding what information to include for Joyfully's video lists, I decided that only the title, date, and duration of the video were the most important for the app's function. For better readability, I was inspired by YouTube and Vimeo's top-left aligned text, as well as YouTube's light grey background for more comfortable readability. 

High-Fidelity Screens

For the Figma prototype, I was not able to configure interactive screens for both horizontal and vertical views. The horizontal screens for certain features of the app are shown below. 

Joyfully Main Functions

Warm-Up - Users can focus on fundamental skills and stretches before learning choreography. Although this section is labeled as a "warm-up," users can revisit this section any time for a "cool-down" or to strengthen their fundamental skills. 

Learn - Users can add videos that they would like to learn choreography from by uploading their own from their phone's library or by adding a link to a video online. Videos are ordered by the date that they are opened, but the date shown is when the video was added to Joyfully. When a video is tapped on, the screen enters a horizontal mode with a settings menu. This menu includes 3 options: Mirror the video horizontally, Speed up/slow down, and Add a video for side-by-side comparison. 

Reflect - Users can add their own videos to reflect on by adding a video from the Learn library or by uploading their own video. They can also share this video with other users by linking them to the feedback page. This screen can also be viewed horizontally. Like the Learn menu, videos are sorted by the date which they were opened last.

Project Recap

For this project, I wanted to focus more on how the user can enjoy and be motivated to use app rather than simply focusing on function.

To do this, I explored:

  • The Love of Dance - why do people dance/why do they keep dancing?

    • Interviewing dancers of different backgrounds and experience to find out what they value

  • Existing Apps - apps specific to dancing and general video apps

    • Research opportunities in the market and keep a consistent layout in relation to familiar apps​

  • Visual Design - text placement, hierarchy, color, shadows 

    • For clear and aesthetically pleasant design

Future Explorations

After talking to peers and recruiters, this is some of the feedback that I would like to focus on as I continue to work on this project: 

  • If this app were to actually be developed, what is some of the back-end work that would go into it? Talk to developers about what is and isn't possible.

  • What would motivate people to keep coming back to this app, such as emails and notifications?

  • Try to make a working prototype that dancers can actually test, and then see what improvements could be made  from their real-time feedback. 

Through this project, I re-evaluated the user experience compared to the version of this concept, ChoreoMe. While focusing on what makes dance enjoyable, I investigated the visual layout of different video apps. I also experimented more with color and readability compared to ChoreoMe. The ChoreoMe prototype using Adobe Xd, so with this project, I also had the opportunity to become more comfortable with Figma. While I challenged myself to experiment more with visual interface design for this project, there is still a lot more than I have yet to learn.

ALYSSA AUW

UX Designer