View the full working prototype here.
An app designed to visualize the data collected by a hypothetical activity tracker designed specifically for highland dancers. Qualitative data interpretations allow a dancer to improve their technique through feedback on practice sessions.
A mirrored view of the body allows the dancer to better translate corrections onto their own body. Areas for improvement are highlighted in red.
A timeline along the bottom of the screen represents the full dance. Red segments indicate where corrections are provided. The dancer can scroll through the dance using this timelines, accessing all data visualizations generated.
Numbered buttons above the timeline indicate the dance repetitions for the current session, with colour indicating the overall quality of dance technique.
A view of the floor, indicating the position of the dancer’s supporting foot throughout the dance. Axes indicate the dancer’s left and right, as well as fourth-intermediate position, which extends at a 45 degree angle on each side of the dancer.
The location of the dancer's supporting foot is indicated by a solid circle. Green indicates a correct placement, yellow is within the margin of error, and red is an incorrect placement. The ideal foot placement is indicated by two concentric circle outlines. The inner circle is “perfect”, while the outer circle is the margin of allowable error.
The second section of the floor visualization shows the aggregate of all landings for the entirety of the dance. The dancer can filter the dance into individual steps using the broken “timeline” along the bottom.
I began by brainstorming the different functions this app could perform, and the ways in which it could best interpret data for a competitive dancer. From here, I did rough wireframe sketches to get a sense of the layout of the app, and the user journey.
After considering the structure of the app, I explored the possible ways of communicating the collected data via visualizations.
I translated these rough sketches into high-fidelity wireframes, and created a more organized site map. These wireframes formed the basis for the final design.