Photo by JESHOOTS.COM on Unsplash
Context
Ergonomic users with sit-stand desks are used to having a fixed panel on their tables to move their desks up and down. Though it is functional and does the job it is designed for, it is very limited with its feature list. It cannot do anything else other than change desk positions.
Wellnomics came up with the idea of replacing the fixed panel with a touch-enabled LCD gadget, much smaller in size but much richer with features. In addition to changing desk positions, this gadget will track how long the user is sitting or standing and remind users when to switch positions or when to take a break. There’s much more to it than this but it is for a future date.
Challenge
To design the experience of an touch-based ergonomics gadget with limited capability, which, when paired with a sit-stand desk, guides the user to save their sitting, standing positions and allows them easily switch between the two.
My Role
Role: Competitor research, UX design, Visual design, Interaction design, Interactive prototype
Tools: Axure, Figma, Photoshop, and Illustrator
Duration: 6 weeks
Market study
Most of the sit-stand desks in the market today have these common features:
- Move desk up/down
- Display desk’s current height
- Save height as memory preset
- One-touch move desk to a preset height
- Display error codes
These are the typical controls these devices have:
- Up arrow
- Down arrow
- Height display
- Memory presets (3-4 buttons)
- Save to preset button
Capabilities and constraints
To delivering a top-quality product to the market while maintaining an affordable price to appeal to customers, I and the dev team had to work within certain capabilities and constraints.
| Capabilities | Constraints |
|---|---|
|
Touch interface with the ability to capture tap events and long press events
|
The LCD panel is divided into a 2x2 touch matrix. Any defined user action has to be confined to this matrix |
|
LCD panel supporting text display and animated graphics |
Low LCD refresh rate may not support smooth animations |
|
Bluetooth connection with users’ smartphone or computer |
Use texts only if necessary to avoid translation issue |
|
USB-A cable connection |
Touch surface only captures single-tap and long press events. No double tap or swipe events |
|
Accelerometer to detect motion |
Graphics only support fill colours, not gradients |
|
RGB LED lights around the gadget to notify status |
|
|
Audio feedback |
|
|
Microphone to capture ambient noise |
|
Design guidelines
Here are some considerations that I had to keep in mind while designing:
- The dimensions of the LCD screen is 4.8 x 3.6 cm
- UI aspect ratio is 4:3 (320 x 240 px)
- Maximum of two action buttons alongside the horizontal or vertical axis
The approach
Before working on the designs, I started defining the user stories based on the proposed feature list. That helped me with the UI elements needed to accomplish each story.
Style-guide
Defined the colour tokens and button components
Design evolution
Defined the colour tokens and button components
The visuals
Interactive prototype
I designed the UI in Figma and exported it to Axure for building the interactions. Since the prototype was planned to have complex conditions based interactions, Axure was the right tool for the job.
Note: To save sit position, lower the height value to 95cm or less. And, to save stand position, increase the height value to 105cm or more.
Wireflow
To make it easier for the dev team to understand, I created an interactive user flow explaining the relation, action and behaviour of each element.
Working demo
The product is scheduled for a market launch this year (2023). Here’s a working demo: