Ankle injuries are the most common injuries across a wide variety of sports, like soccer, basketball and hockey. About 25% of all sport injuries across all sports are ankle injuries. When an athlete suffers an ankle sprain, the risk of that it will happen again is significantly increased. Develop an app that will help athletes with the prevention of ankle sprains.
The Ankle app provides a scientifically developed exercise program for athletes. The exercises are bundled in an eight-week program. The athlete will perform 3 sets of exercises each week. The Ankle app helps the athlete to complete each set, by giving them rewards. Next to that, the athlete can also track his or her training progress. By using push notifications, the athlete is alerted on the day he or she has to perform the exercises.
Client
VUmc
Created at
Partout d.n.a.
Role
Interaction & Visual Designer
During this project, I was in charge of the interaction and visual design of the app. I started with making wireframes to determine how the app should work. I thought of interactions, flow, logic and brought it together in a clear interface. The tool I used for making the wireframes was Omnigraffle.
The app shows the user a clear view of their progression during the program. The program is divided in eight weeks. Each week has different exercises. Feedforward is of big essence when using the app.
The app provides feedforward in a couple of ways. The user can see the estimated duration of the session at the top.
In the list of exercises, the checkmark indicaties that the athlete has completed this exercise. The next (active) exercise is highlighted with a blue number and arrow. The upcoming exercises are disabled and are therefore grey.
At the bottom, the user can access the total program process. This overlay shows the full eight week program and the current progression of the user. What did the user complete, where is the user now and what’s still left?
The core of the Ankle app are the exercises. We used a 3D model to explain the exercises in a visual and understandable way. Before starting an exercise, it is made clear to the user how the exercise needs to be done. With your eyes open or close, on an even or uneven surface and how many sets.
The play button is within thumbs reach. In the upper right corner, a tooltip highlights the fact that there is textual explanation available about the exercise.
For the design I used a lot of white space and bright colours, that fits the flat design style.
A set of exercises exists of 6 short exercises. After each exercise, the user has the possibility to redo the exercise. If the user is done with an exercise it gets a reward (medal). At the top of the interface, the user has clear guidance throughout the set.
If the user is done with a complete set of exercises, it gets a trophy and it is reminded when the next set of exercises will take place.
