Redesign My Coach Feature on Nike Run App — a UX Case Study

Danny Hudi
12 min readDec 3, 2020

How I gave my ideas for improving the Coaching feature for making more fun and relatable running experience for productive age users.

This case study is a final project for UI/UX Course at Purwadhika Startup and Coding School. The project was evaluated on 20 November 2020.

I did the research phase with my teammates and, we were mentored by a lecturer throughout the course. (We work individually after finishing the research phase)

Introduction — What is the project about?

Overview

Nike Run is a running partner app that can be used to track your running results, get coaching that adapts to you, and bring your friends along for the ride.

Challenge

Redesign the coaching feature for more relatable and more fun running experience for productive age users.

Project Goal

Provide solutions that would improve the user experience of using coaching feature in Nike Run.

Personal

1. To see my capabilities of giving the solutions within a limited time.
2. Expanding my portfolio.

Project Duration

  • During the program (27 Jul-20 Nov), but it starts to focus in October 2020

Role

  • UX Researcher
  • UI Designer
  • Interaction Designer

Methodology

The applied methodology in this project is the Design Thinking process.

Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems, and create innovative solutions to prototype and test. Involving five phases — Empathize, Define, Ideate, Prototype, and Test — it is most useful to tackle problems that are ill-defined or unknown. To dive deeper into this version of Design Thinking, you can read the articles from the Interaction Design Foundation.

I’m using design thinking as my methodological approach to the case study. It’s powerful for finding the right problems by tackling the complex and unknown variables in a human-centric way. Through design thinking, I believe I can achieve a balance between the three main focuses: desirability, viability, and feasibility.

Stage 1 — Empathize

The first step of any project involves gathering as much research as possible to better understand the design problem. This step is necessary to deeply empathize with our target users. So, my teammates and I conducted a study on participants with the following criteria:

  • Millennial or productive age between 20 to 35 years old.
  • Runner in all levels (Beginner, Advanced, Intermediate).
  • Using Running App
  • Technology Savvy

Therefore, we decided to research three ways:

  • An online survey, via Google Forms.
  • In-depth interview, via Zoom.
  • Comparative analysis, compare the app with its competitor.

By doing these, we uncovered users’ motivation, behavior, preferences, and similar apps they use.

Online Survey

Through Google Form, we reached 76 respondents. We gathered quantitative data from them, and here’s what I learned:

  • 62.1% of respondents (36 people) have a goal to ‘Stay Fit’ while running, followed by ‘Lose Weight ’ with a value of 29.3%.
  • 62.1% of respondents (36 people) always use running apps while running.
  • Only 31% of respondents (19 people) have used Nike Run as their Running App.
  • Apparently, only 25.9% of respondents (16 people) have used Coaching feature of Nike Run App.

In-depth Interview

We have interviewed 8 participants that we filtered from the online survey and our team friends. From this method, we gathered qualitative data. These are insights that I gained from the interview sessions.

Response from an interview session

From some of the insights above, I decided to execute the insights which are related to the coaching experience.

Comparative Analysis

Actually, there are so many types of running app, but after comparing many of them, I decided to compare Nike Run with a running app that only has coaching features.

Comparative of Running app that has a coaching feature

Here’s what I learned from the comparison:

  • Exercise recap is rarely provided in the coaching feature.
  • Running app with a free subscription is rare.
  • Most of running app has provided a plan recommendation to their coaching feature.
  • The tutorial video is rarely provided in the running app.
  • Most of the voice of a virtual coach doesn’t sound natural.

Stage 2— Define

In this stage, we define the users using the information that we got from the Empathize stage before. We did this by doing these steps:

  • Affinity Mapping to categorize the pattern.
  • Choose the Top Findings.
  • Create individual User Persona and User Journey Map.
  • Then using ‘How Might We’ method to get the problem statements.

By doing the following steps above, I examined what problem seemed to be important. Then I explained the type of user who was having problems.

Affinity Mapping

I use the Affinity Mapping method to synthesize the data collected to showcasing trends, themes, and areas of opportunity for discovery and improvement.

Affinity Mapping.

I categorized the information that my team got from the in-depth interview. we collect the data to affinity mapping above and I learned that experience of using coaching features and improvement of that feature is the main problem here.

Top Findings

After collecting the data with Affinity Mapping, I and my teammates got so many findings, but here the top findings.

Top Findings

After taking the findings from both methods of quantitative and qualitative research, I identified the insights as follow:

  1. Stay fit is the main reason for someone to start running.
  2. Just a few Runner uses the coaching feature.
  3. Runner loves to challenge themselves.
  4. Running experience with the real coach still can’t replace with the virtual coach.
  5. Runner needs more two-way interaction (feedback) with the virtual coach.
  6. Runners lack the motivation to complete the running plan that they have joined.
  7. Runner wants a virtual coach can evaluate and give running plan recommendations based on their running progress.

User Persona & Journey

So, who is this redesigned app for? From the data I synthesized the persona based on the findings, then I created the ideal target users to represent the user's goals. I decided to divide the persona into two personas, meet Monica Angela, a ‘Friendly Runner Coach’ and David Wang, the ‘Rookie Runner’

Advance Runner Persona & Journey
Beginner Runner Persona & Journey

Stage 3— Ideate

At the ideate stage, we generated the ideas from the HMW-notes. After that, I choose the ideas which match our user persona’s needs. I did this stage using these methods:

  • Decision Matrix, to prioritize ideas and determine the suitable solutions into a 2x2 matrix.
  • User Flowchart, to determine the user flow within the app and specify where my ideas could be.

Decision Matrix

Decision Matrix

These prioritizations are made within my opinion and capabilities. I chose the feature which has a high impact because I think that’s the feature that can improve coaching experience on this app.

User Flowcharts

Some charts below explain the plot from the features I want to execute, I divide it into three parts to make it more accessible to the plot.

Running Plan Suggestions Flowchart
Be Coach Flowchart
Point Exchange Flowcharts

Stage 4— Prototype

Lo-fi sketches

Before designing the Hi-fi prototype, The first thing I did was make low fidelity wireframes according to the user flow. Wireframe’s purpose was to give a visual understanding of a page in the initial phase of the project before beginning the design process.

A. Running Plan Suggestion

B. Be Coach (Running Club)

C. Exchange Points

Components

These are some of the components that I made according to Nike’s Design System.

Hi-fi Prototype — 1st version

Based on the lo-fi sketch, I made the hi-fi prototype.

A. Running Plan Suggestions

This running plan suggestion has a concept if the runner didn’t reach their running target before, it will appear a running plan suggestion that can adapt with the runner’s run.

Running Plan Suggestion Screen

B. Be Coach (Running Club)

It is the screen view for coach that already make a running plan and joined member, the Coach can answer or giving feedback to his member and check their running progress.

Running Club Screen

C. Point Exchange

To enhance the runner’s motivation for completing their running plan, I made this point exchange feature, so this feature can give the runner a point after they finish their running plan, the acquired points can be converted into a cashback coupon that can be used at several Nike Store.

Point Exchange Screen

Stage 5 — Test

I use usability testing method to test my prototype, I have 23 participants,

  • 20 for Unmoderated UT using maze.design
  • 3 for Moderated UT using zoom meeting

Unmoderated UT

So, I’ve created 9 blocks of missions and opinions on maze, I got an 80% average success rate.

Unmoderated UT Result — Maze Usability Report.

And I also created the table for success rate (only for mission block), so we can know the detail for each mission.

Mission Success Rate— Unmoderated Maze Usability Report.

From the report, I learned that most of the participants were having a problem with the first and final mission. So I think, I will focus on that. But for now, let’s see the result from Moderated Usability Testing.

Moderated UT

Here I’ve interviewed 3 participants, same as the previous test, which is using maze.design, from this table below, we know that most of the participants have trouble on the first and last mission(task number 6). *task number 7 is an additional task on moderated UT. So, it confirms that it would be my priority to redesign the feature.

Moderated UT Result — User Completion Table.
Mission Success Rate — Moderted Zoom Usability Report.

Testing Stories

On testing these stories I’ve been collecting feedback from the Moderated UT that I’ve done before. And it’s a couple of feedback that I get from every participant's task.

A. Running plan suggestions testing stories

In this section, participants are having difficulty while finding Running Plan Suggestion feature, most of them don’t aware of the trigger action.

Running Plan Suggestions testing stories

B. Select and join running plan testing stories

I got the feedback for User Interface in this section, so the cards below look so transparent, and on the detail page, the naming of the day is confusing and there is no detailed information for each run.

Select and join running plan testing stories

C. Be Coach (Running Club)

In this task, most participants don’t know if there is a notification badge, and in the next task, participants also confuse to differentiate between a chat that has already been read and hasn’t.

Be coach testing stories

D. Point Exchange

From Usability Testing, either moderated or unmoderated, participants confused about how to move to points exchange, they don’t know which icon to choose. And when they get to the point exchange page, they said that the coupon lacked the details.

Point Exchange testing stories

Iteration — Design Improvements

From a few feedback I got, I’ve fixed the design and I decided to focus on the task of getting the bad feedback, that is Find running plan suggestions and navigate to the point exchange page. I did the second moderated UT with the same participants as the first moderated, So this is the prototype and also the testing stories after the design improvements.

A. Running plan suggestions and testing stories

So the previous problem is, the participant wasn’t aware of the running plan suggestion feature, So, I was thinking, “How to make the participant aware of that feature?” and the result is I create the prototype below. Then I got the feedback from the second Moderated UT, Participants already aware of this feature.

Running plan suggestions and testing stories

B. Select and join running plan and testing stories

In these design improvements, I fixed the card opacity, naming of the day and give the running detail. Some improvements got positive feedback and also critics.

Select and join running plan and testing stories

C. Be Coach (Running Club) and testing stories

Here I just remove the notification badge and replace it inside the chat, so participants can differentiate a chat that has already been read and hasn’t.

Be Coach (Running Club) and testing stories

D. Point Exchange and testing stories

We know from the feedback before, participants confused about how to move to points exchange and they don’t know which icon to choose. So, I decide to change the icon to what can represent a point, I think the Coin icon is the right choice because I got the idea from the feedback. But, my Coin icon still needs improvement to make it easier to understand.

For the Point Exchange page, I remove the exchange button from the card and make the coupon detail page, So the participants can know more about the information of coupons that they would exchange.

Point Exchange and testing stories

Finally, we reach the end of My UX Case Study, I really appreciate all of you who take your time to read.

Just click here if you want to try the prototype 😉

Conclusions & Personal Reflections

The lessons I learned from this project are, I have to learn more about the design basics, understanding the basic principles of design and visual elements. Because it will speed up your learning process, strengthen your skills and way of thinking about decision making when designing. But here are the things that I can highlight:

  • Stay consistent with your design, ensuring users easily understand how to use the product -without getting confused- and ultimately, ensures the product matches customer expectations.
  • Research and research, because every design decision should be backed with the reasoning that can only come from research.
  • Always do testing to avoid the issues, observing the way someone interacts with your product interface provides you with an opportunity to course-correct your design and set development priorities from the get-go.
  • The iteration process is a must, it brings out user feedback to ensure that system requirements meet user needs.

Thank you for reading my Case Study! 🤝

The project was a great experience and the first step for me to start a career in UI/UX Design. Huge Thanks to My Mentor Mas Kenneth Mahakim who always help and evaluate my project with Mas Khrisnawan Adhie. Thanks to my teammates, Mas Benhard Sinanu and Mas Demetrio Lenka. Also, thanks to my classmates from JC UI/UX Class at Purwadhika Batch 4, Even though we’ve never met in person, but I’m sure we’ll meet in Success

#IBelieveWeKen 😎👊

Again, Thank you for reading my case study. I would love to hear any feedback. You can reach me on LinkedIn or via Gmail (uix.danny@gmail.com)

Did you know? 🤔

You can give up to 50 Claps for an article? Tap and hold the clap button for a few seconds and BOOM! Try it out 😎

--

--