A & UI redesign case study

It began with a question.

I was lying on the ground in a pool of sweat—only some of it was mine—wishing I could do a pull-up and wondering what my one-rep max for a power clean was. And here’s the thing: I knew the answer was in Wodify. Somewhere. I just didn’t want to scroll through the endless lists of possible components to locate it. Why isn’t there a search feature?

Wodify is an that brings together communities of gym-goers. From the , you can see the workout of the day (WOD), sign up for classes, see the leaderboard for the workout, and track your progress — all customized for the gym you belong to.

Wodify as a service is primarily sold to gym owners as a tool for them to better manage their business. On the backend they can input the week’s workouts, manage memberships, use the payroll features, and ultimately retain members to grow their business.

The challenge & the goal

Even as a regular user, I still find myself struggling to locate my results when I want them, clicking into the wrong screens, and feeling weighed down by the app’s cumbersome navigation controls and UI. I wanted to explore how Wodify could be more usable and delightful. I wanted to make the almost daily use of this app the best part of someone’s day.

Disclaimer: I am in no way affiliated with Wodify. The discoveries and recommendations I describe here are strictly my own. I do not have access to the company’s internal business priorities or operational constraints which have may influenced Wodify’s current core functions and user interface.

Process

Empathize & Discover

App Analysis

I started with making a site map of the app and an in-depth analysis of its current features in order to see how they connected to one another.

Understanding User Needs

My initial round of interviews involved 9 current users of the app, ages 21 to 41 years old, 4 men and 5 women. This is fairly representative of Wodify’s current user demographic: 63% of CrossFit participants are under 44, with 50/50 male-female representation.

  • People only use half the app. “I use the features I need,” users responded. 6 out of 9 people didn’t even know the app had additional features they weren’t using.
  • 9/9 users look at their past results at some point. A core reason people use the app is to see their performance history.
  • Users are on-the-go. ⅔ of people look at their past results and log their results while in the gym immediately before and after they workout. This made for a lot of starts and stops while logging results or looking for them.

Personas: Wodify users with a face

I wanted to design for users like Jake—by making the app feel simple and engaging enough to navigate—that adding something like a one rep max would feel too easy not to use. And I wanted to deliver for users like Steph who are excited to see more and input results.

Defining the problem

Pain points

  • “Will I ever be able to find my results again?” Users had trouble navigating the app to find their results when they needed them.
  • App feels cluttered and lacks personalization. “It feels like there are many unnecessary steps to complete simple actions,” Jason G., 40, said during an interview. The structure of the app is very segmented, with multiple steps needed to navigate between related sections. Every single person I talked to did not use at least 4 of the 9 features in the app.
  • “I never track the workouts I do on my own because it’s just a lot of work to scroll through the endless lists of potential movements.” Inputting results that were not tied to the day’s workout felt difficult with only dropdown scroll bars and no search features or quick-add. Each movement was so segmented, meaning you would need to type in word-for-word the exercise (eg: hang snatch + snatch, hang snatch + 2 OHS, hang snatch + high hang snatch, snatch pull + power snatch, are all recognized as separate exercises).

Ideate: the redesign

Synthesize

I distilled my findings into a few insights:

  1. Help users find their results faster with a comprehensive search feature
  2. Clear the clutter by offering less options with a simple tab bar menu
  3. Add feedback and responsiveness to inputs; more navigable search inputs

Information Architecture

I realized that at the core of the user needs and pain points I had discovered was that the layout of the app was confusing. I mapped out the current information architecture in order to understand more fully how a redesign could work.

Current information architecture

I wanted to tie the ability to add workout results and search past workout results together, for any exercise, for a more seamless experience. I restructured the IA in order to increase the visibility of the key features, eliminating the ones users did not use, and improve navigation.

New information architecture

User Flow

As I thought through how best to tie adding results and seeing past ones together, I focused on 3 key user flows:

Mid-fidelity Wireframe

Fail fast with usability testing

I showed mid-fi wireframes of adding results and finding results to a user for feedback, and realized: there was no possibility for a comprehensive search feature of exercises from the way I had users add results.

Iterate on inputs

In order for there to be a simple, ‘type-anything’ search bar which can yield a user’s results accurately, inputting results must be categorized more specifically.

How might users add results from any type of workout without feeling like it’s too tedious to use?

My goal was to create the least number of interactions needed from a user as possible. I sorted all possible exercises, categories, classes, and locations a user might have into various levels of distinction. This gave me a better understanding for what fields of input at various stages were necessary to sort results.

I realized there might be potentially conflicting goals between users who just want to keep track of their progress any time they workout—whether at the gym or elsewhere, and gym owners need to know if their members are using the gym for a workout (so their membership can be charged). For this reason I added “Location” into the sorting process.

Designing a user interface

As I thought through how the app should look and feel with this redesign, I wanted to keep the dark interface which the app had previously so that it would still be familiar.

Icon design

Beyond just choosing a color scheme, my primary goal was to speak the language of interfaces—I wanted inputs to feel natural and fun.

Prototype

Insight 1#: Find results fast

[Part 1:] Change the way results are added in order to have [Part 2:] a comprehensive search feature

It was difficult to navigate between the various pages of inputting information (a workout’s results) and finding it again in the app because there are two different sections where you can see and record it, and these both show different yet similar results.

Two possible places where you can see & record workouts

Information was displayed this way because of how the app separated categories composed of multiple different exercises (WODs) from categories comprised of only one exercise.

All of the users I interviewed look at their past results at some point, whether every time they work out, or on a less frequent basis, yet this app had no comprehensive search feature. Being able to find past performance results and track progress was a main reason why people used this app. I wanted to see a robust database of all the movements recorded together.

Part 1: Change the way results are added

After iterating above on which inputs are needed, 3 principles guided me in formulating fields to minimize interactions from a user:

  • Dynamic displays: date with a date picker, drop-downs with only the relevant answers provided, search bar with suggestions
  • Relative navigation by starting from the WOD & current day’s date and correcting, not constructing the model
  • Tight feedback loops
Iterating on form inputs

Part 2: A comprehensive search feature

Since adding results are now categorized into more specific inputs, an overall search feature would be possible instead of the previous segmented searches. I iterated on the profile screen for the most concise way to display previous workout data.

Sketches
Profile screen iterations

Insight #2: Tab bar menu

I changed the menu from a hamburger menu to a tab bar for two reasons:

  • Its visibility would keep the app from feeling too segmented. A user could now open the app, see the WOD, and immediately click to sign up for a class or see their past results
  • Increase engagement with the current menu items

Insight #3: Tight feedback loops

In the Add Results section, the “save” button remains active even after recording a score. Nothing happens. I wondered if the system had recorded my results or not, or if while scrolling I could accidentally edit something in a way I didn’t mean to.

Following Ben Shneiderman’s principles of interface design of designing dialogue to yield closure, I changed both the state of the input field and the button text after a result was added.

I also took the opportunity to display both exercises in a WOD on the Add Results landing screen for a faster way to record results on a single page. Only if a user wanted to see more of their data would they click on the movement.

Check out the full prototype in Sketch cloud🤸‍

Next steps

Test & Iterate

  • Conduct usability testing with the prototype at the gym, specifically adding results and viewing results, at the end of a workout. Testing with the prototype in this use case scenario will give me a better idea of how to further improve the design

Reflections

From time to time I’d read a case study and think “wow, writing about it almost seems like more work than doing it. Waste.of.time.” Going through this process I’ve realized—part of design is talking about the why and telling the story. It’s about being able to take (well, generate) large amounts of complex data and distill it into a simple solution that pleases users and generates revenue for companies. Great design is about great communication, after all.

In this process, I enjoyed being able to take full ownership of the various roles of designing a product from end-to-end: user researcher, ui designer, ux designer, product designer. I would love to know what a redesign like this could actually do for the company. Would deeper engagement with the app on the user side align with company goals? How exactly can you turn this into a revenue stream?



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here