Multi-stage Fitness Test

Few screens clubbed together as a Hero
Yo-Yo App Screens

Introduction

The Yo-Yo test was created by Luc Leger of the University of Montreal way back in 1983, as a simple running test designed to test a person’s fitness levels. Over 30 years later it’s still in popular use because it remains a great way to measure a person’s all-important VO2 max levels. So, what does the Yo-Yo test involve? Simply, the test involves running back and forth between two points 20m apart. Each run must be synchronised with a pre-recorded audio track which plays BEEPS (the test is also called a beep test) at regular intervals.

Over the course of the test, the athlete progresses up through various levels (lasting just over a minute each), with the Yo-Yos Getting faster at each new level reached. At the point where the athlete fails to reach the line before the BEEP, this becomes their highest score and the test is over.

The great thing about the Yo-Yo test is it won’t take you long at all. The vast majority of people will be done before they reach level 13, which takes less than 14 minutes. If you made it to this stage, you’d have run just over 2.5 km, which is equivalent to 1.6 miles.

The Problem

Coaches are writing down the test result on a physical piece of paper and later entering Yo-Yo test results in a web application. This is very time consuming and inefficient. This app make it easier to enter Yo-Yo test results for coaches and to display the test result to other persons (e.g. athletes, parents to athletes, etc.).

Design Process

Look, every person in this world has different way of doing the same task, isn’t it? Why to follow other’s step if you can make it good in your own way? Only stick to the right thing that makes your work easier and consistent thoroughly.

I do follow few important steps during the design process:

01. Research

02. Sketch & Wireframe

03. Prototype & User Testing

04. Design

01. Research

To have a better understanding of how an app can be more intuitive, I need to go through some research and collect data on the same. You need to understand first what you are working on and then their peers; how they are managing their things and showing data all together so neatly. You need to have look at least three similar products and record their good and bad points. For that open up your note book, pick your pen and start writing similar apps good and bad points. Good points can be added in your features and bad points to make sure you’re stay away.

Once you are satisfied with your data collection and you’ve your concept clear towards your work in progress app then you are good to go. This way you’ll have enough idea what to add and what not. Let’s go!

Competitor Analysis Template

02. Sketch & Wireframe

Keeping your goals in your mind and the data you’ve collected; it’s time to turn all those data into a rough low fidelity wireframe. Okay, many people have assumption that wireframe also need to be designed properly. Wait, there’s no need to fill colours, put stones and fabrics in that wireframe :D
Wireframe should be so quick & dirty and understandable to you (the placement of elements and flow) even you don’t need to worry about the text content (can use dummy text).

But yes, If you need to present that wireframe before some client or stakeholder then it needs to be little more cleaner and easy for them to understand. In this case you can use some softwares (Axure, Balsamiq, Xd, Sketch etc.)

Wireframe
Wireframe

03. Prototype & User Testing

See the waves of real Prototype handles

Prototyping is an important part of all stages throughout the design process and your designer should do it as early and often as possible.Being a critical step in every design process, prototyping phase brings not only speed, but also further design evaluation and feedback in early stages of the project.
I personally recommend to go through prototype once you have set of screens ready (low/high fidelity). During the interaction you’ll get chance to cover-up the mistakes that you would have done it later and so you will get fine product to interact with.

And, once you’re happy with your prototype then you can have get this app tested with your colleagues, friends, family.

Interaction Animation

Choose any five people from your surrounding and give them a set of tasks to complete in this prototype. This is the time to validate your design, if 3- 4 out of 5 users have successfully completed your task it means you are in good shape towards completion.

So, that set of questions can be like:

  1. I want to be able to create a new Yo-Yo test and assign athletes to the test.
  2. I want to be able to start a Yo-Yo test and assign athletes test results while they are running. This will make sure that test results are added faster to the system, so my team can see their results.
  3. I want to be able to edit test results for an Athlete in a specific Yo-Yo test. This way I can fix a mistake.

and so on…

04. Design

Now it’s time to invest your energy on interface but before you start, you need to define how people will use it. With the wide spread presence of touch-based devices, it’s a more crucial concern than you might think. If we talk about Tinder: the app’s user experience is literally defined by the ease and impulsivity of a simple swipe.

With addition of how the app will actually work, it also needs to look attractive and compel user to touch & feel. Although Interface designer are very skilled in this task, they know perfectly what colour to use, which CTA needs to be more prominent etc.

Interaction flow of different tasks in user testing

Conclusion

I think you guys have some idea about this app now, what this app does, who are the end users, functionality of this app & how to start and end this entire design process. One thing I would recommend, if you want to have user testing then please don’t skip any screens in between, try to complete all the screens and each button should have proper linking with each other so that the user find zero trouble during testing.

Suppose you also want to test your VO2 level (Volume of Oxygen) you can definitely try these types of app.

Thanks & Happy Learning :)

I hope you guys have something good to learn today. Please share your response here with me. You can also see some excerpt of my work here:
https://dribbble.com/Virabh
You can always contact me: virabh1992@gmail.com

Senior User Experience/ Product Designer, India