Recognition over recall. Recommended journey page
was designed to better visualise a journey.
Forms became multiple choice.
Progress bar was added to
show transparency of system
structure.
Sensor Status
Problem
The Sensor Status screen is part of the main app navigation and is intended as a central hub for all sensor-related information.
In previous app which supported the previous iteration of sensors (MS 2.0), the primary focus was on sensor battery levels because users had to charge daily. In MS 3.0, the emphasis shifts to periods of sensor wear (wear cycle, up to 12 days) and various error states.
Brief
The UI, in-app messaging, icons and flows must clearly communicate the sensor’s state and guide users to appropriate next steps if an action is required. Maintain visual consistency where possible to ensure development effort remains low.
Analysis of the Problem
I was part of the design team who worked on the equivalent screen for MS 2.0. To maintain visual consistency as per the brief I retained the heirachy in the final design and reused some of the visual language to denote the various states which still applied. Concerns I had with the 2.0 design included the bottom message lacking prominence.
Sensor Screen - MS 2.0
Sensor Screen and Days Worn Counter
During a wear cycle, users wear the sensors for up to 12 days. The app should visually display the number of days worn and provide clear instructions to remove the sensors after 12 days.
Additionally, during an active wear cycle, the battery section in MS 3.0 should show two distinct pieces of information:
-
Sensor connection status
-
Battery level (e.g., Battery level = XX%)
Displaying both metrics is essential, as findings from MS 2.0 showed that users often assumed the sensors were disconnected or malfunctioning unless the app explicitly confirmed otherwise.
Design Concepts
Sensor Icons
In MS 2.0, sensor icons were placed in the top navigation bar and appeared when the user was not on the Sensor Screen, with each state mapped to a corresponding icon. For MS 3.0, I kept this approach but updated the icon to match the new sensor design.
In my first design, the icon lacked the distinctiveness of MS 2.0 and didn’t clearly resemble the sensor. I also learned that firmware would only support a low-battery state (10% or under), making a fill indicator unnecessary.
Break State
I realised my initial designs lacked an icon to represent a wear cycle break (when users break from sensor wear). Without it, users might assume the sensors weren’t working. From earlier versions of MS 2.0, we knew users tended to check connections when each state wasn’t clearly shown.
The challenge was to design an icon that clearly indicated a wear cycle break without suggesting a malfunction or low battery.
Final Design
Navigation to Sensor Screen
Dismissible, in-app banners (right) were added to notify users of state changes that required user action. Tapping the banner CTA, icon or push notification opens the Sensor Screen where details and next steps are provided. This keeps the Sensor Screen as the central hub for status management. This was an improvement over MS 2.0, where it was less clear when user action was required.
Updates to the Sensor Screen from MS 2.0
-
A clockwise counter provides a visual indication of the number of days elapsed in a 12 day wear cycle
Messaging was standardised and simplified for clarity across all screens. For example, 'Make sure your sensors are in range before proceeding was revised to 'Make sure your sensors are near you'
-
The bottom message, including the CTA, was placed inside a container for better organisation
-
Break state content was displayed on a lighter background, providing clearer contrast with the wear cycle and error states
Updates to the Icon from the Initial Design Round
-
Increased the visual distinction in the outline, making it clearer that the icons represent sensor status
-
Added the “Pip” status indicator so it accurately reflected the state when the user was not on the Sensor screen
-
Introduction of a W/C Break state
