Choreo

Background

Choreographing a routine takes a lot of memorization, and being knowledgeable with music styles, beats and rhythms. There are many apps that help with choreography - such as apps with metronomes, music player apps, and apps that let you record your routines to save for later - but there isn’t just one app that is useful for a choreographer all-around. Being able to find songs of similar styles and BPMs (beats per minute), to visualize the different counts of the beats, and the ability to write or record moves of a routine could help choreographers be more efficient when creating a performance for themselves or for others.

Objective

Design an app that streamlines the process of creating a routine to music by combining all the necessary features used when finding and editing songs, and to visualize the routine.

Project Details

Tools:

  • Figma

Duration:

  • 4 weeks

  • 20 hours/week

Role:

  • Solo UX Researcher & Designer

  • UI Designer

Phase 1: Research

How Might We:

  1. Visualize the counts to a song for more efficient choreographing?

  2. Find similar song styles and rhythms to be able to organize and create routines for varying dance styles?

  3. Help choreographers remember their routines?

Competitor Analysis

I conducted a competitor analysis to gain insight on current apps on the market that help with choreographing dance routines. My top competitors were Spotify and DanceMaster.

Spotify, being one of the leading apps for discovering music is limited by the inability to edit the songs or see relevant choreography information such as BPM or tempo. On the other hand, DanceMaster allows to add in notes to a song and change the tempo to learn the choreography, but does not allow for the discovery of music.

Other competitors were Choreoloop (loops songs), DancePicker (provides song information and can choose songs by tempo), GR8 Count (provides the 8-counts of a song and manipulation of BPM) and DanceTime Deluxe (explains dance styles and has the ability to manipulate tempo).

All of these apps help with separate aspects of a making a routine, but I found that there isn’t one app that does it all - visualizing or adjusting tempos, discovering music by styles or BPM, and memorizing the choreography (either by video or notes).

Interviews

I had a very diverse group of interview participants who would create routines for children, themselves, or friends for performances. They offered insights on what it means to be a choreographer, and what are the most important factors when creating routines. View the all of the insights to the interviews here.

Participants

  • 5 interview participants

  • Ages 24-65 years old

  • From Illinois, California, Colorado

  • Backgrounds in choreography ranging from circus arts, dance and drill teams

Top Insights

Finding music for routines:

  • Finding good music is important

  • Categorizing music helps for easier finding

  • 2/5 participants would manually edit their chosen songs either for routine requirements or to add together more than one song

Memorization of routines:

  • Memorization of the routine comes in many forms - mental, repetition, counting the beats

  • Choreographers mentally map-out the steps. A few take notes/recordings of themselves on the cues/counts of the music

Phase 2: Define

Persona & Story Board

My persona, Sammy, is based off of the insights from the researching phase. He is a combination of all of the important characteristics of being a choreographer (with a background in dance).

In his story board, he is tasked to choreograph routines as a dance instructor. Sammy uses the Choreo app to help him find music, edit the songs for the routines, and then shows his class the notes and videos he saves. Creating the persona and story board helped to envision a typical user of the Choreo app.

Sitemap

Creating a sitemap helped display the pages of the app and to determine the user flow. The main features of the app were going to be finding music and editing routines - so after researching a few design patterns for music players, I determined the navigation for the app to consist of:

  • Music - the discovery of music and ability to like and add songs to playlists. I wanted this to be the homepage because finding music is usually the first step to creating choreography. I also wanted to add in CTAs of the library page as another way to navigate to routines faster

  • My Library - a place to find all the liked songs, and the created playlists and routines. I decided to place My Routines under the library to condense the navigation menu and place it with other personalized features

  • Settings - where the settings of the app can be found

  • (Music Player - this navigation only pops up above the main navigation at the bottom when a current song is being played)

View the sitemap larger here

 

User Flow

Although there are many paths that a user can take within the app, the main user flow that is implemented in the prototype flows from the login screen to continuing to edit a routine. I chose making a user flow to help understand the connections between CTAs and pages in the Choreo app.

 

Phase 3: Design

Sketches & Lo-Fi Wireframes

Once establishing the flow and features of the app, I researched design patterns of music players, cameras and song pages that matched closely in aesthetic and features. I started sketching possible versions of the app pages, decided on which showcased the features the best, and then created lo-fi wireframes of the primary pages.

I decided against the never-ending scrolling to find a song on the homepage and wanted horizontal scrolling. I also decided to let the song track run horizontally as well to less the number of taps to zoom into the notes.

I tried implementing a few Figma animations to my wireframes to showcase more characteristics of the app through the prototype.

Mood Board

From the very beginning of thinking about the app’s UI, I wanted the app to be colorful and bright, however I was unsure whether dark mode or light mode made the most sense for my users. I was drawn to gradients which seemed to evoke a sense of energy and movement while remaining trendy.

For my mood board, I combined images of both modes and different types of gradients in order to help me decide how to proceed with the imagery, aesthetic and color scheme.

 

Logo

Creating the logo was a fun but challenging process because I wanted to combine symbolism from the app’s features as well as musical and dance symbolism to demonstrate motion. Like the mood board, I wanted the logo to be colorful and bright. The adjectives I used to visualize the app were:

  • Creative

  • Fun

  • Energetic

  • Clean

 

UI Kit

The UI Kit was the very last decision-making point on light mode versus dark mode. Comparing Choreo to other music apps, and also taking into consideration the idea of long-term reading from the Nielsen Norman Group article “Dark Mode vs. Light Mode: Which Is Better?”, I decided on dark mode.

Dark mode is less strain on the eyes for longer-term reading or scrolling and it also brings in the center of focus on images.

The UI Kit was not fully complete until after I had finished the hi-fi wireframes, and seeing how all of the components worked together on the screens. Some changes along the way were increasing the contrast of the CTAs gradient with a darker orange color, as well as establishing the look of the buttons for adding notes and videos.

Phase 4: Test

Usability Test

I conducted a usability test on the hi-fi prototype with choreographer participants, who overall liked the app concept and thought it was helpful for fellow choreographers to find songs and edit in-app.

Because I was on a time constraint with this project, I decided to use the findings for consideration of future design improvements instead of implementing them into my current prototype.

Future Design Improvements

  1. Create onboarding or tutorial screens to explain how to use the app and its features (in the beginning of using the app the first time, or during the song editing process)

  2. Ability to slow the speed of the song when listening to it

  3. Ability to see an un-expanded (compressed) version of the song full length

  4. Differentiate the "add notes" button from the "add-to" button to add the song to a playlist

  5. Put "My Routines" in My Library first before "My Playlists"

Takeaways

I enjoyed working on this project for several reasons:

  • One reason was that it was a passion project to create an app that I could potentially see myself using for choreographing contortion performances

  • I felt very proud of coming up with a logo design that conveyed the symbolism within the app as well as the adjectives of the app

  • I learned a lot about application states on dark mode while creating the UI Kit and hi-fi screens

Although I was on a time constraint for the usability test, I am happy to have gathered some important information for design improvements that could be used for future testing of the prototype.

Interested in hearing more? See my contact information in the footer below!