UX / Product Design:
Hands-Free Wearable Communication Device
An end-to-end product backed by research, user testing, and UX best practices.
The Process
Research
-
Prior to designing, the marketing team, product team, and UX research team collaborated to find avenues for new products and new revenue in digital and physical device spaces.
-
A hands-free wearable communication device was one product that was proposed by these meetings.
-
Competitor analysis was conducted by the UX research team.
-
My role began after research was completed.
Defining
-
Multiple product requirements for the new features were drafted on Jama by me, a co-UX designer, and the product manager.
-
Based on the user research and interviews, the device was to be voice controlled, but an interactive screen was also included.
-
I primarily designed for the device screens while assisting a co-designer on the voice flows.
-
The product requirements drove the design process but were continually revised based on ongoing research, the physical limitations given by industrial designers, accessibility concerns, and user testing.
Designing & Prototyping
-
My primary contributions were:
-
Creating the UI library components.
-
Designing what was displayed on the screens and the on-screen flows.
-
Designing the Configuration Portal (i.e. directory of users, device configuration, settings, system health, and facility selector).
-
Assisting with voice flows and defining light color choices.
-
Choosing the device sounds and alerts.
-
UI Library Components
Design System
-
The existing design system was primarily for web and mobile apps, so the new 2" by 2" interface needed its own components.
-
While creating the UI library, the design system was referred to for existing icons and typography.
-
Buttons, scrollbars, and headers were all created specifically for the device UI.
On-Screen Display
Optimizing
-
For the small display size and resolution that we had to work with, we looked to create simple and high-contrast designs.
Flows
-
The flows were designed while keeping a logical, intuitive progression in mind, and with simple ways to back out of actions.
-
Once a primary menu item was selected, the "Back" button was displayed except in cases where voice command items were selected, such as turning on Do Not Disturb or turning Volume down.
Device Configuration Portal
Overview
-
The Configuration Portal had multiple configurable options in the left nav area, and there were sub-tabs for each item that a user could select from the left nav.
-
The My Settings item would allow a user to log in or out a device, select assignments (e.g. roles, teams, units, or rooms they were assigned to), add nicknames for other users to voice activate a call by using the entered nickname, or update their profile information.
Design System Components
-
Some components were used from the existing design system (e.g. buttons).
-
However, many new components were created, such as cards for admins to check the overall system health (i.e. the number of devices in use, downtime of devices, etc.).
-
Other components created were new headers, modals, left nav, icons, and tooltips.
Additional Designs
-
Many of the Configuration Portal pages were made up of graphs, charts, and lists, depending on what a system admin or user would need and have access to.
-
Rows and columns were editable and sortable. In cases where large amounts of data were accessible, filters and pagination were included.
Device Challenges
OLED Burn-In
-
The engineers brought to our attention that the OLED screens were displaying burn-in issues after a few months of use.
-
After discussions with multiple teams, the designs were adjusted to replace the large row-highlight with a right-arrow offset to the left of the highlighted row.
-
Screens would automatically dim and go blank after 5 seconds and 10 seconds respectively.
Color Accessibility
-
The LED alert colors were chosen and analyzed based on various possible vision impairments so as to make them easier to discern.
-
Colors that could be commonly confused or that were too close on the spectrum were ruled out.
Screen Size
-
The 2" by 2" screen created its on challenges compared to designing for something like a mobile app.
-
Multiple discussions, meetings, and workshops with the UX team and engineers were had to ensure the most pertinent information was always displayed.
Validation & Release
Validating
-
Issues such as how voice activation would handle two people with the same name or how strong accents might be mitigated where only a couple of a myriad of decisions that went into designing the product.
-
Two rounds of user testing and interviews were held during the design process. Participants were nurses from a local hospital. Testing questions were discussed and created during UX team meetings, and responses were analyzed in subsequent meetings.
Build & Release
-
Daily and weekly meetings were held with developers, engineers, the product manager, and industrial designers to ensure all work was on schedule.
-
This device is currently being marketed and in commercial use.
