Practise Screen

Practise

View the full working prototype here.

Practise is an app designed as a companion to a hypothetical activity monitor designed specifically for highland dancers. The app visualizes data from a dancer’s practice sessions, allowing the user to view progress over time, location of feet on the floor, and specific technique corrections. The user can build their own practice sessions, view visualizations while practising, and return later through the “Progress” section to view past practice sessions and their accompanying data. With this app, I seek to improve a dancer’s quality of practice, enabling them to work smart and achieve their full competitive potential. As a highland dancer myself, this is an app I would love to have.

Practise Screen

Dancer Visualization

This is the first visualization viewable from the practice session, and presents to the user as if they are looking in a mirror. This allows the user to better translate the corrections onto the context of their own body. Problem locations are highlighted in red, with annotations providing details. The timeline along the bottom indicates in red when in the dance a mistake occurred, allowing the user to easily navigate to corrections in real-time. Numbers above the timeline list the completed repetitions of the dance, allowing the user to toggle between them to compare the quality and differing corrections of each. At the top left is an small indicator of the second visualization.

Practise Screen
Practise Screen
Practise Screen
Practise Screen
Practise Screen
Posthuman Typeface

Floor Visualization

The second visualization to be viewed shows the position of the dancer’s supporting foot on the floor. Lines of direction are indicated, providing reference points for exactly where missteps are landing. The inner ring indicates the ideal position of the supporting foot, with landing location shown in green. The outer ring indicates the allowable margin of error, with landings shown in yellow. Any landings outside this margin are displayed in red. The user can view all landings in real time by sliding along the timeline, along which the colours reflect the quality of the landing.

Swiping to the next page, the user can see an aggregate of all landings for the entirety of a single dance repetition. The user can also toggle to view by a single step at a time.

Practise Screen
Practise Screen
Practise Screen
Practise Screen
Practise Screen
Practise Screen
Practise Screen
Practise Screen
Practise Screen

Progress Visualization

The final visualization, viewable from the “Progress” button on the homepage, details the user’s practice history over time in a format similar to that of a Gantt chart. The days of the month are indicated along the bottom in a timeline with a slider interface. Each row of rounded rectangles contains the practise history for a single dance, with the colour of the rectangles indicating the overall quality of the dance performance during that day’s session. As the user slides along the timeline, the column of dances practised that day will become highlighted. From here, the user can “View” the saved data visualizations from that session. Using the button at the top left of the screen, the user can filter how many dances they want to view at a time, allowing for easy comparison of practice history for specific dances. This visualization gives dancers the power to easily see which dances they practise the most, and which ones need more attention. In this way, practice sessions can be thoughtfully created so as to maximize improvement over time.

Process

1

I began the development of this app by brainstorming the different functions it could perform, and the ways in which it could 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’s journey as they navigate through the information.

2

After considering the structure of the app, I explored the possible ways of communicating the collected data via visualizations.

3

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.

1

Practise Sketches
Practise Sketches
Practise Sketches
Practise Sketches

2

Practise Sketches
Practise Sketches

3

Practise Sketches
Practise Sketches
Practise Sketches
Practise Sketches