Feed_Hero.png

POOL SWIM FEED AND METRICS REDESIGN

A redesign aims to tell a better story of each user’s swim, and a better navigation system and information structure for users to view their swim in the easiest and the most informative way.

Why the Redesign?

OldFeed.jpg

As the social aspect of FORM Swim App, it is very important for the face of the app to tell a compelling story for all kinds of swims. The problem with the previous design is that visually it only tells the story of what stroke types the swim contains. As much information as we can share when users tap into the feed tile, the feed tile itself is telling a very weak story without attracting users into looking into the detail of other people’s swim.

Another problem with the previous design is the amount of data being thrown into user’s face, for someone who has doesn’t have that much urge to look into swim data, such as fitness swimmers, the previous design shows too much data, it is overwhelming. And the complexity of switching among the different categories of data.

To solve these problems, we decided to redesign the pool swim feed and details screens.

My Role

UX/UI Designer

Designer

Manny Xu

Tools

Paper, Pen, Sketch

My Design Process

Process.png

Competitor Research

Garmin.jpg

To decide how competitors are showing users their swim data, I looked through different competitor apps such as TrainerRoad, TrainingPeaks, and Garmin. All of which are strong competitors in their fields.

A common thing I noticed is that all of their graphs look very complicated, and the cognitive load is massive for users. It got me thinking about how we can show a swim story without making it look as crazy as some of these graphs. TrainerRoad has a relatively simple and rich story graph. It tells the whole story of that bike ride, but it is also not overly complicated that makes users wonder what they are.

A very interesting finding is that they all overlay graphs over graphs, which at first doesn’t make much sense to me from a design perspective as it complicates the graph. But from a storytelling perspective, it actually tells a super strong story, it tells the pace of each position an the heart rate progress. The graphs grow together.

Strava is the biggest fitness online community there is. We referenced it a lot back when we were first designing the app. But this time, we were more looking into what its running analysis is and what we can learn from that.

Strava’s swimming data and visualization are really bad, that’s not what I want. Instead, I looked into Strava’s running analysis. It shows all the main metrics and data points in this one long screen where users can just scroll down and see. There are numbers, there are graphs, and there are buttons.

It is a smart idea that they don’t show all the data at once, because of the cognitive load and the attention span users have. Also, not everybody cares about those deep analyses. For a lot of people, just want to know how long they ran and how fast they ran. That’s it. Embedding deep data into secondary screens is definitely something FORM’s app can learn from.

Strava.jpg

How Do Swimmers Swim?

Metrics_old.jpg

Based on the swimmer, a swim can be very different.

For triathletes and competitive swimmers, their swims usually follow a plan, breaking into sets, each set includes several intervals, while each interval includes several lengths.
Based on the swims we collected within the app over the last year and talking with several competitive swimmers (including one Olympic Swimmer!), triathlete, and fitness swimmers. The conclusion we got was that competitive swimmers usually start with a warm-up set, then dive into each set with a target on either pace, heart rate or other metric, then they will use other swimming equipments to do kicks, and then going up to another level of intensive set, at the very end, it will be a cool down set to calm down.

For fitness swimmers, an interval is usually not how they swim since their goal is to stay fit or just for fun. So their swims are usually length based, they swim several lengths without a coach or detailed plan.

How to Tell Their Stories?

To decide how to tell swim stories, we need to know what key elements are included within a swim, they are:

Group 6.png

More importantly, what do swimmers care about? What metrics do they want to see in their swims?

Group 7.png

Sketch and Ideate

Sketch_1.jpg

When I started sketching some ideas for the Pool Swim feed tile, the first thing I think about was curves. Like every other designer, I like curves, it’s pretty, continuous and, pretty!

Unfortunately, pretty doesn’t mean everything. Especially in this case. Data visualization needs to be true to the data. And that’s why curves don’t work. A swim is length-based, which means we can have one piece of data at a time, and it is not continuous, so using curves doesn’t make sense at all in this case. As pretty as it is, this does not represent the truth of the swim.

After that iteration, I pivoted to a point where each interval will get one data point, where it still shows the progress, and maybe even still have some smooth curves on some of the graphs.

I also tried using pixels to illustrate the graph since the goggles is using a very pixelated screen. As cool as it is, it took away the advantage of how much pixels we have on a screen and limited it to a certain amount. It seems more of a limitation I set for myself.

In the end, none of these graphs work because they don’t tell the full story of a swim. A swim is made of different length, where these options only showed interval numbers, it didn’t even mention any length.

Sketch_2.jpg

Wireframe and Testing

Feed_Wireframe.jpg
Swim Detail Wireframe.jpg