UsabilityGeek
Published in

UsabilityGeek

Adding a Workout Edit Feature to Nike Training Club App — A Case Study

As a new designer joining a team, we’ll often have to rapidly come up to speed on the product and users and quickly iterate on proposed solutions under tight timelines. Other stakeholders will all have opinions, and us designers have to get used to supporting claims and finding ways to incorporate new features into the existing platform based on user needs.

During this project, we are analysing an already existing app and incorporate a new feature into the existing product. The developed feature will be based on an area of functionality to be explored and compared to user input.For this project, we have been assigned a random feature proposal from our colleagues at Ironhack Lisbon.

Briefing

My client is Patricia Maya, a former gymnast, current yoga practitioner and movement and workout enthusiast. I was assigned to add a new feature to Nike’s Training Club App (Nike Better World). This new feature would enable users to edit the workout plans provided by Nike in accordance to the former’s needs. As a result, after the first meeting with my client, the challenge was set:

How Might We Enable Nike: Training Club athletes to edit their workout plans?

Research

Lean UX Canvas

To start the project, I made use of the Lean UX Canvas in order frame the challenge. I could see the potential of this sort of framework for larger and more complex problems than the one I had at the hand, nonetheless, it provided me with solid foundations of what I had to work on and who I should focus on.

Lean UX Canvas

Interviews & Surveys

As a result of the Lean Survey Canvas, I knew there were two important things that I had to know about the users, which were a) what are the main motivations of users to use such app and b) if ever, what prompts users to adapt and change their workout plans. This was specially relevant to create empathy with them and to understand what kind of people are part of this Nike Training Club world. This was then translated in both interviews and an online survey.

For the survey specifically, I set the goal of answering the following questions:

  • Which Fitness Apps are people using to workout?
  • Why is a specific app the one they prefer to workout?
  • When was the last time they felt like changing their workout plan?
  • Why was that a necessity?
  • How would people improve their Fitness Apps experience?
Results from the online survey, which gathered 35 answers.

The results of the online survey showed that:

  • 42,9% of the people use fitness apps mainly for guidance
  • 46% feels the need to switch up their workout plans
  • Of the previous bunch, 62,4% does find having an editor feature as relevant and 48% explains it due to medical reasons.

Competitor Analysis

Finally, I wanted to know what Nike’s competitors were doing in this field. In this analysis, my goal was specifically to target the following points:

  1. How are these competitors structuring the workout layout
  2. Are they providing users the chance to edit their workout plans?
  3. If yes, how do they do it?

The competitors I looked into were Adidas Training, Thenx, Freeletics, three popular fitness apps similar to Nike. None of these have an editor feature but still I wanted to look at how they structured their workout layout. But still I didn’t have a lot to compare Nike to.

Curiously, it was my client Patricia who highlighted this other app Female Fitness Workout, the only app that did allow their users to edit exercises. Although not the most functional nor aesthetically pleasing, it gave me a hint of how the feature could be.

Fitness Female Workout Screenshots of the editor feature

Definition

Value Proposition Canvas

Value Proposition Canvas for the Workout Edit Feature

Persona Design

With the information that I had been gathering throughout my research phase, I was able to determine the kind of person that this workout edit feature would do wonders to. It was in this phase that the online survey that I had carried out previously proved to be particularly helpful — I could empathise with a clear persona, his/her motivations and pains. Therefore, Walter decided to set up and help me in moving on with the challenge.

User Flow

Finally, it was relevant to understand exactly in which part of the user flow this feature would appear in. Hence, looking at the current path inside the app, it seemed reasonable that users could access to the feature once the workout is presented to them. Hen

User Flow that includes the Workout Editor feature (in green)

Low Fidelity Prototype

>> Link Low Fidelity

Low Fidelity Prototyping

For the low fidelity of this project, I sketched a few screens from Nike in order to mimic its original flow until the appearance of the editor feature. Thus, I defined a few goals for this particular phase:

  1. Where should the placement of the editor be and which form?
  2. Does the usability of the editor work?
  3. How can users switch the reps and time of the exercises?

First lessons learned

How I displayed the menu to edit exercises — very much inspired by Female Fitness
  • The inclusion of an icon representing “edit” in the upper corner seemed to be quite obvious to the user, so that was a green light for me to move on to mid fidelity
  • The way in which the actual editing worked wasn’t that straight forward, for instance, the “dash” placed next to the exercise change the order of the exercise (almost like a drag) wasn’t that obvious.
  • Editing the number of exercise repetitions or time with a simple “plus — minus” command could be annoying. I imagined someone say “What if I wanted to go from 10 to 30 reps, do I have to click 20 times”?

Mid Fidelity Prototype

>> Link Mid Fidelity

Mid Fidelity Prototyping

For the mid-fidelity prototype, I felt that I could start already making something closer to what the high fidelity and final version of the app would feel like. Thus, I designed most of pre-defined user flow. At this stage I had two questions, based on the previous learnings:

  1. How are users going to insert the desirable amount of reps or time to perform and exercise?
  2. How can users pick a new exercise?

For the second point, I pitched the hypothesis hat the most practical way of reaching such goal was to use the normal phone keyboard.

Secondly, the dashboard that had failed previously only included two stripes and that was changed to have three stripes. Those three stripes, according to testers’ feedback, were recognisable to them as if it was saying “drag me”.

More lessons

  1. The first big lesson here was that the “editor icon” that I had thought be straight forward actually became less obvious once I designed a more loyal version of the Nike App. In truth, the icon was hidden / overshadowed by other commands within the app — in this case, a lot of the users in the testing phase were going for ‘settings’ thinking they could find the workout edit there.
  2. The usage of the keyboard proved to be quite flawless, testers were quite pleased with how easy it was to use.
  3. The three dashes did make the mark and were recognised as a “drag me / change order” icon.
Low Fidelity didn’t represent the visuals of the original Nike App. As a result, the settings (circled in red, right image) were more visible and not clear for the user.

High Fidelity Prototype

>> Link High Fidelity

High Fidelity Prototype

Finally, moving on to High Fidelity (finally), I was able to put a final prototype together. From previous tests, I had to think of how to make the edit feature more obvious. A quick solutions was to actually replaced the placement of the settings and edit in my version of the app. Based on the tests, it proved to be bullseye!

Replacement of the Edit and Settings icons (original version on the left)

Another thing that I had to consider was the aesthetics of the original Nike App. The visuals in my mid-fidelity were very rectangular, thus, I switched it a bit to make more circular and in accordance with the original design.

Staying loyal to the original design is relevant!

Final Prototype

Below, you can find the final version of the prototype! It will show you the whole user flow from the moment you access the app, to editing the workout. Inside that step, there are three tasks:

  • To increase the number of reps of an exercise
  • To switch one exercise by another one
  • To change the order of the exercises

Key Learnings

I had a great time with this project, and I learned way more on how to use Adobe XD (Learn Adobe XD) and the importance of components as a way to save time and be way more efficient in the work.
Also, once again, I was shown that I should trust the process — from the research to the first prototype and tests, I learned tons that only added to the project.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Thank you for reading :-)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rafael Martins

I’m a UX/UI Designer with 2+ years of experience in design thinking practices by conceptualising and crafting innovative services