Evolution of gps bike computers
Embedded display UX and UI design
Bike computers are little devices that sit on the handlebars of a bike and tell the athlete things like speed, distance, duration of ride and show maps, turn-by-turn directions, elevation profiles, etc.
This is the original ELEMNT BOLT, launched in 2017.
Wahoo’s very successful, well-loved, sophomore bike computer. This predates my time at Wahoo by a few months, but is important background for my work.
I joined Wahoo and we created ELEMNT ROAM, Wahoo’s next bike computer.
Prior Wahoo bike computers had only black and white displays, but ROAM’s display had eight colors. It was my responsibility to determine where to use color — where it would be most effective, and add to the experience rather than flippantly adding color because we could.
Our audience tended to be folks aged 40-60 (who may use reading glasses), so retaining high contrast and readability was critical when adding color.
Even with such a limited palette, I added carefully color in a few key places.
Text messages appear on-screen. Added green here to match iOS’ and Android’s messaging app icons.
HR and power data fields. Colors correspond to zones.
Changed highways to yellow, nearby friends and favorited locations to blue.
Strava Live Segments get some orange.
Fun fact: Orange is not one of the eight colors ROAM could display, so each usage of orange is actually a pixel-by-pixel checkerboard of red and yellow. It’s pretty convincing to the naked eye!
In 2020, I was promoted to Head of Product Design, and we launched ELEMNT BOLT 2.
The display on ELEMNT BOLT v2 had 64 colors (very exciting!).
But again, my focus remained on adding color only where it mattered. Legibility had to be high, so users can read the screen while flying down a hill at 35mph, or grinding up a climb with sweat in their eyes.
Next change, typefaces.
More grey values meant our text could be anti-aliased, which allowed me to use a rounder typeface (and allowed me to use that typeface in sentence case rather than all caps).
This rounder typeface in sentence case translated into huge gains for legibility!
BOLT 1, monochrome, all caps type
BOLT 2, 64-color, sentence case
BOLT 2 on the right, BOLT 1 on the left. The engineers did a great job improving screen tech, which was also a huge win for legibility.
Anti-aliasing tricked this reviewer into thinking the display was higher resolution than it actually is.
“Wahoo are saying there’s the same amount of pixels under each screen but it really does look like night and day… it looks like this one is so much clearer than the original. I’m struggling to believe that there’s actually the same amount of pixels underneath there because it looks so much better… Maybe it’s just down to that updated user interface and typeface that it just looks so much cleaner. Either way, a really nice touch.”
Source
Next up, adding more color throughout the UI.
Having 64 available colors meant I could handpick colors that would have the best contrast against black and white, and be differentiated amongst the other colors.
For instance, here are the available blues:
I chose this blue to highlight menu items, which makes the highlighted row more obvious.
Folks appreciated the thoughtful additions of color:
The BOLT has joined the Wahoo ELEMNT ROAM and the majority of the Garmin Edge line up in featuring a colour screen, as opposed to the old, er, grey and light grey one.
Now I must admit quite like the reverse coolness of having a monochrome-screened bike computer. Real men neither eat quiche nor need a colour display.
However, like many of my opinions, this proved to be built on shaky foundations, and with the new BOLT I’ve changed my mind.
It’s not like Wahoo have gone full psychedelic, rainbow unicorn. The text is still black rather than Elephant Fart.
But for the palette stat fans, the new BOLT screen features 64 colours. Which is a lot more than the 8 on the ELEMNT ROAM (56 more…).
The additional colours are used sparingly in the updated UI design, and overall improve the experience.
The colour maps are more detailed and easier to understand than the original BOLT monochrome ones.
Colours are used as the background for data fields like heart rate and power to denote what zone you are in. Assuming you’ve set them up correctly (using the Wahoo ELEMNT partner app on your smartphone), the changing colours make it easy to work out which zone you’re in versus trying to work it out based solely on current heart rate (or power).
Source
For accessbility purposes, the fields with colored backgrounds can be disabled.
I also changed the lines between data fields to grey to keep focus on the data.
The next big change was to the map theme.
Due to their monochrome displays, our previous computers’ map themes struggled with information hierarchy and density, especially in city centers.
I took advantage of the greys (and other colors) to create a theme that is more glanceable, but retains the same amount of information.
The color certainly makes the map screen easier to read, as the original Bolt’s black directional arrows often got muddled on the black road lines. But the color is also used for prompts when training, such as changing colors to reflect which power and/or heart rate zone you’re in. I found that feature to be helpful in easily staying on track without having to stare at numbers. Just a quick peripheral glance gives color-coded feedback.
Source
With all of these UI changes (typefaces, colors, maps), I built a robust atom-molecule-template design system and extended it. It needed to handle components from older ELEMNTs, newer ELEMNTs, and components that are shared. It needed to be rebuilt in Figma, from our circa 2015 Sketch files.
In 2022, Wahoo released the ELEMNT ROAM 2. While I was no longer at the company at release, I led design of the product’s UI and product-specific features.