Overview

Problem

Five months into the redesign of the 2018 Woodway Curve treadmill, AthliOS faced a significant challenge: How do you design an intuitive and impactful interface for a manual treadmill? Now you’re probably wondering what "manual" means.  I'll tell you. Traditional treadmills use a motor to set a constant speed and incline. But the Curve, a manual treadmill, is different--it is entirely self-powered. You (the runner) are the motor which allows you to experience a more realistic run that burns up to 30% more calories than a conventional treadmill.

By the time I joined the project, we were three months from our first trade show and development was in full swing. Woodway had approved the initial interface concept, but there were significant issues with executing the vision. AthliOS called me from the bullpen to make the interface usable, to refine its visual aesthetic, and to design a responsive notification system.

Challenge
  • Audit the design's usability and make improvements without "redesigning" the interface
  • Refine the visual aesthetic
  • Design the notification system for responsive programs
Success
  • Debuted 2018 redesign at IHRSA 2018
  • Shipped on all Woodway Curve treadmills January 2018

RESEARCH

Usability Audit

Before meeting with the team, I spent some quality time with the original artwork. I purposelessly neglected to look over any design notes so that I could run an independent “first look” test. I organized my insights into three categories and used them as a launch point for our first conversation.

In my opinion, two major issues caused this design to be unusable:

  • Too much information: There was a lot of noise. I found that it was difficult for my eye to focus on one aspect of the design.
  • Nothing is Labeled:  An average user would have a difficult time deciphering what each data field represents.
Prototype Experience on Curve

After examining the static mockup, I had the opportunity to test the prototype on the Woodway Curve treadmill. During the test, I focused on the product’s holistic experience--what it felt like to interact with the design and how the Curve influenced the interaction. From this exercise, I discovered the following insights:

  • The Screen is Small: The tablet display is only 10 inches wide. Because there is so much information on the screen, the font size of the data fields was microscopic.
  • The Screen Shakes: As I increased my speed, the frame shook, causing the data to blur.

To design a usable product, I had to keep this experience in mind throughout the entire design process.

Creating a visual hierarchy

Woodway outlined the requirements for each view, but there was no clear visual hierarchy. I worked with Chelsea, AthliOS’ VP of programming, to list the data in order of importance so that we could present the data in the most meaningful way.

ITERATION #1

Jazzin' Up The Color Wheel + Grouping Elements

My first mission was to declutter the center of the speedometer to create a clear focal point. I then focused on the visual hierarchy. I split the screen into three vertical sections and put the most actionable information in the top sector. I had learned from previous user research that the top portion of the treadmill screen is where the runner stares most often. My last and the easiest fix was grouping like elements to reinforce their implied relationship.

ITERATION #2

Simplifin' + Makin' It Bigger

Although the first iteration was a step in the right direction, there were still significant issues with the design, the greatest being the flexibility of the layout between free-run and program view. I saw this as an opportunity to simplify the design further and increase the font size. This decision took some convincing. Woodway wanted to display all of the data values from the original prototype. My position was that we needed to design for the average consumer. Generalized workout data is more valuable to them than athletic-specific metrics. My solution was to pitch the idea of customization. By implementing a dropdown functionality for each data value, we could empower extreme users to personalize the treadmill to their specific needs. After some deliberation, they bought it!

Remote User Testing

Dan, the project manager, decided to build out a prototype of the second iteration to create a feedback loop with real users. We were a completely remote team, so cataloging the interactions was of huge importance. Chelsea, the VP of programming, recorded personal and user reviews at a private training facility and uploaded them to YouTube. These reviews produced valuable insights that helped push the design in the right direction.

Insights

Below are key insights that we gathered from our remote user testing sessions.

All Modes
  • Difficult to read speedometer fields. Screen shakes + is small.
  • Need a clear button style. Users don't know what they can interact with.
  • Speedometer does not go over 11 mph.
  • Icons confused users.
Program Mode
  • Target speed field is not needed. Green area of speedometer communicates target speed.
  • Need an interval change notification.
Free Run Mode
  • Need to visually show run progress. Speed over time.

ITERATION #3

Simplifyin' More + Brandin'

Armed with user feedback, I jumped back into the world of pixels to optimize the design to fit their needs. A fascinating insight from our research was that users were intensely focused on the Curve’s screen while running. In our opinion, even more so than running on a conventional treadmill. We believed this reality existed due to two factors:

Balance: The running experience on the Curve is somewhat awkward. The slate belt is (you guessed it) curved, and the belt’s speed increases or decreases as you move away from the center of the treadmill. This phenomenon caused users to lose their balance consistently.

It’s Self Powered: In program mode, the user is tasked with sustaining a level of effort that matches the desired speed. The current speed value changes in real-time and in a way, the rotating speedometer gamifies the experience.

When designing the program notification system, we leveraged this intense screen focus. Chelsea created written coaching cues for each interval that provide tips on running form and efficiency techniques.

IHRSA LAUNCH

Rollin' It Out

In early March '18, we debuted the new Curve interface at the International Health, Racquet and Sportsclub Association (IHRSA) convention in San Diego. For three days, we gathered feedback from potential buyers, trainers, and customers before embarking on the final design sprint. Unfortunately, there were some engineering/aspect ratio issues, but the product did not disappoint.

ITERATION #4

Final Changes Before Launch

After IHRSA, we refocused our approach to designing the notification system. We originally built the system upon the conventions of a traditional treadmill workout. You set a speed, you run, and boom--you feel great. Programmed runs on the Curve produced an entirely different experience. It’s impossible to hold a constant speed on a manual treadmill. Users became frustrated when fatigue set in and felt like they didn’t accomplish their goal.

Chelsea came up with the genius idea of using “real-world” running nomenclature (jog/run/sprint) for the interval notifications instead of miles per hour. This paradigm shift in thinking connected with the user’s “real-word running” mindset. When testing this new concept, she found that runners were pushing harder and getting a better workout.

This product is a textbook example of the power of a cross-disciplinary team. By integrating trainers into the design and development process, we were able to create an impactful and engaging fitness experience.