Reimagining a User Interface, Part 2

Thinking mindfully about the type and nature of the data displayed to the user is a critical initial step in reimagining a user interface. Can you render the data in a new way to the data to make it more available to the user? Can you present it in a new form to provide users with the opportunity to gain fresh insights into the data?

The World Champ Tech Swim+ app presents a short case study of this vital element of the user interface design process.

One metric swimmers occasionally track is the number of strokes per pool length. Strokes per length is a useful metric to focus on for improved swim technique. As a swimmer improves their swim stroke, each stroke will propel them further through the water. Additionally, when a swimmer can refine their position in the water to improve hydrodynamics, they will glide farther with each propulsive stroke. The net result will be a greater distance traveled with each stroke, or few number of strokes per pool length. Prior to the advent of smart watches and swim tracking devices, you could simply count the number of strokes you took for each length of the pool. Over time, any reduction in the number of strokes per pool length would indicate improvement.

But, what should a swimmer do if they swim in different pools of varying lengths? How do the judge improvement when the length of pool is different? What should a swimmer do if they occasionally swim in open water such as a lake or river? How do you judge the distance to even make a measurement? As noted in the first post in this series, pools typically come in three primary lengths: 50 meters (long course meters or LCM), 25 meters (short course meters or SCM), and 25 yards (short course yards or SCY). It’s relatively simple to compare stroke counts between 50 m and 25 m pools - just double the value or divide by two depending on how the swimmer best wants to compare the data. But, how do you compare the stroke count of a 25 yard pool to a 50 meter pool when you are converting from English to metric units? The conversion factor - 2.187 - is not terribly easy to memorize, nor simple to multiply in your head.

Baker pool at the Stanford Avery Aquatic Center pool complex configured for short course yards

Most of the design and development work for the Swim+ app took place at Stanford University at the Avery Aquatic Center pool complex. The design of World Champ Tech’s workout apps always starts outside of a sterile lab in pools, lakes and oceans across the globe. This real-world design process shapes every element of World Champ Tech’s apps. The Avery pool complex has four main pools: Belardi pool which is a standard Olympic pool that can be configured for either 50 meter or 25 meter lengths, Baker pool which can be configured for either 50 meter or 25 yard lengths, the Avery pool which is a water polo tank, but occasionally used for lap swimming, and the Maas diving center pool which is a diving tank, though also used on rare occasions for short, very warm water sprint workouts. This wide range of pool length options provided ample opportunity to think about how best to present stroke length data and prototype possible solutions.

The main challenge to address is how to present the data to allow swimmers to compare stroke performance across a range of pool dimensions and length units. One option would be to use one pool length as the standard metric. So, if the chosen pool length was 50 meters, you would display 40 strokes in one 50 meter pool length as the value 40. For a swimmer in a 25 meter pool, 20 strokes would also be displayed with the value 40. The issue becomes a bit more complex when the swimmer is in a 25 yard pool. 18 strokes in a 25 yard pool is equivalent to 39.4 strokes in a 50 meter pool. Do you round that value down to 39 strokes, or up to 40 strokes? 19 strokes is equivalent to 41.6 strokes in a 50 meter pool. This could be displayed as either 41 or 42 strokes depending on the rounding method. Note that problem with this approach: there is no integral number of strokes in a 25 yard pool that directly translates into 40 strokes in a 50 meter pool. This approach does not address the main goal of allowing swimmers to compare stroke performance across a range of pool dimension and length units.

Now, consider a simpler metric: the distance the swimmer travels per stroke, or simply the distance per stroke. This is the inverse of the normal stroke length metric. Traditionally, swimmers compare the number of strokes per pool length, or strokes / distance. What about flipping that metric on its head and comparing the distance per stroke? This has one distinct conceptual advantage: the bigger the number the better. With strokes per distance, a swimmer attempts to minimize that value to improve. With distance per stroke, swimmer tries to maximize that value to hone their stroke technique. Using this new metric, a standard value of 40 stroke per 50 meter pool length becomes 1.25 meters per stroke. 20 strokes in a 25 meter pool is also 1.25 meters per stroke. 18 strokes in a 25 yard pool would be 1.27 meters per stroke.

Final Swim+ stroke distance data design

Thinking critically about how data is formatted and displayed to the user is an important, and frequently overlooked element in optimizing a user interface. Most user interface designs provide multiple redesign opportunities to enhance the ability of the design to convey information to the user, and a chance to improve the clarity of the data displayed by the design.