Ballroom

Ballroom is an app designed to let beginner dancers learn different dance steps. The app contains a guide for each dance step within the ballroom syllabus, and it lets users practice by following along with the app in-hand.

You can play with the Invision prototype here.

Background

To compete in ballroom, it's necessary to learn several different dance genres. Within these genres, dancers must go through four different levels of proficiency before before he or she can start freely dancing. These levels are: Newcomer, Bronze, Silver, and Gold. Each of these levels has a syllabus with specific figures (or dance moves) to go along with it.

The Ballroom App consolidates these figures and puts them in easy-to-digest routines so that a dancer can learn both the figure itself, and how it connects with other figures. These routines are accessed by tapping the medal icons in the home page. Each medal will take the dancer to the corresponding routine.

Practice Makes Perfect

The App shows a visual demonstration of the figure, as well as a written guide under it so dancers can follow along as they read. Once they're comfortable with the way that it looks, they are able to tap the Practice button and be taken to a step by step guide.

In the practice screen, dancers are able to see how feet move in each count. If the demo is moving to fast, they can slow it down using the tempo gauge at the bottom. If they'd like to pause and move through it at their own pace, they are free to do that as well. Once they've gotten a hang of it, they can tap the record button and follow along with their own feet.

After the dancer has finished recording, the app will grade them on their performance. Using the phone's gyroscope, the app should be able to calculate the dancers rise and fall (height), aligment (rotation), and tempo (speed). In the report card screen, dancers will be able to see how they match up to a professional dancer's form and technique.

Interaction Design

For the Ballroom App, I chose to use a card based design on top of a gradient background. Users are able to flip through information as new cards appear. To go back, a user simply has to tap on the previous card that acts as both a back button and a header. Because the app is relatively lightweight, I was free to do a more simple navigation system relying mostly on visual and animate cues to guide the user.

The practice screen was probably the most interaction heavy piece of the app. The main challenge was to figure out how to list the buttons in an easily digestible way without cluttering the app and taking focus from the main point: the feet.

Improvements for the Future

Given more time, I'd like to work more on the figure detail card a little more. There's just so many resources that can be distilled into this card. As of right now, it contains the bare basics: a video demo and the written instructions. In the future, tips from more experienced dancers or a way to view your previous recordings could definitely live in this card. I also think that the navigation system might have to be tweaked to allow for more depth within the app. Maybe it's something as simple as an X arrow in the upper right hand corner, but simply tapping to go back will only feasibly work for cards that are three or four layers deep.