Back To Top

How I redesigned software UI to improve hardware calibration experience

Spring 2021

Hardware CS home
Before CS quote detail
After CS purchase progress

Project Overview

OMATA One is a unique bicycling fitness tracker which only has a mechanical dial with 4 needles(speed, distance, riding time and elevation accent). Like anything that has a mechanical dial with needles, calibration is a task that needs to be dealt with from time to time no matter how precise the movement is. OMATA companion mobile app is the tool to calibrate, download data, social share and manage other paired sensors.The Omata App doesn't quite live up to the level of simplicity, ease of use and intuitive experience it's physical counterpart offers. The calibration process is a unique user experience which involves both a hardware and a software.

My Responsibilities

  • Research & Discovery
  • Ideate & Ideate
  • Testing & Reporting

Tools

  • Miro
  • Axure RP
  • Figma
paper mockup

Problem Statement

Cyclists need an intuitive way to calibrate their OMATA One needles quickly and accurately. The current calibration feature is confusing to understand and use. How can I improve the existing calibration experience to facilitate better UI understanding, improve efficiency and reduce user mistakes?

Goals

To form a good understanding on the user mental model and craft a new calibration feature which bridges the user experience gap between the hardware and the software and improves the usability of the calibration feature.

Design Process

Research

  • Task Analysis
  • Mental Model

Ideate

  • Collaboration
  • Design Workshop

Design

  • Wireframe
  • Design Mockup

Test

  • Feedbacks
  • Prototype Testing

Calibration Task Analysis

I observed a few fellow cyclists and watched them calibrate the red Speed needle on the mobile App. All of them tried to tap the two headed green arc arrow next to the Speed needle to calibrate. The Mental Model was simple for them: If I want to move up the needle to zero, then I need to tap the up arrow. Up is up, and down is down...should be that simple...that's the Mental Model here.

Unfortunately, the two headed green arc arrow is non functional on the UI. The Left and Right circular arrows at the bottom of the screen actually moves the Speed needle up and down. These two circular arrows control calibration. But those two buttons were overlooked. All of my fellow cyclists mistook those left and right buttons for switching the different needles for calibration due to the close proximity to the words "Next Hand". The hardware System Model mismatched with the user Mental Model. The UI(Conceptual Model) was unable to bridge the gap.

Sketches & Ideations

Omata Sketch and ideations

The OMATA One dial has 4 needles. They fall into 4 quadrants on the dial respectively. Speed(Left), Distance(Top), Elevation(Lower Right), Ride Time(Lower Right). The new calibration UI design is about mimicking the physical dial needle layout and showing all four needles in one screen. This improves the visual mapping between the hardware and the software and also eliminates the need to navigate between 4 separate needle calibration screens.

Speed

Upper Left

Distance

Upper Right

Elevation Gain

Lower Left

Riding Time

Lower Right

Design Prototype

I crafted a clickable UI prototype in Axure RP. Additional improvements were also added such as the Connect Mode switching reminder and a calibration onboarding screen to guide the first time user. I took this prototype to a few cyclists for feedback. Everyone of them liked the new calibration screen. They think it’s very intuitive. All three of them tried to tap on the blue arrows and check the needle on the dia to see if it moved or not. This quick guerrilla testing validated my design solution.

Omata UI - Screenshot 1 Omata UI - Screenshot 2 Omata UI - Screenshot 3 Omata UI - Screenshot 4 Omata UI - Screenshot 5

OMATA Prototype

Impact, Results & Next Steps

My new design was very well received by the product stakeholders. By mimicking the hardware interface, the software calibration interface bridged the gap between the user mental model and the hardware system model. The result was an intuitive calibration experience which is easy to understand, efficient to perform and less prone to make mistakes.

Back to UX Work