WorkfloPlus - Wearable
Working alongside stakeholders, product owners and a development team, I helped to design, prototype and deliver WorkfloPlus - Wearable, designed specifically to work on RealWear's HMT1, the market leader in industrial wearables, since its launch in 2018. Purpose-built for the modern frontline workforce, it connects the frontline worker to information and expertise needed to complete job tasks safely and efficiently.
The Problem
As we were replicating the functionality of our mobile application WorkfloPlus, the user journey and requirements were already well established. However, our main challenge resided in adapting this feature-rich project to function seamlessly on a compact head-mounted tablet without compromising on form or function. The task involved carefully scaling down the application to ensure optimal usability and performance on the smaller device, while preserving all the essential features and functionalities. This required a meticulous approach to maintain a seamless user experience and deliver the same level of efficiency and effectiveness as the original application.
Research & Development
When gathering requirements from stakeholders, it became evident that the application needed to replicate all the existing features of the mobile application while effectively functioning on a small head-mounted tablet.
To ensure a seamless user experience, it was crucial to present everything within the safe area, paying attention to factors such as colour, contrast, and font sizing to guarantee visibility on a small screen.
Moreover, in the wearable application market where form is typically overshadowed by function, it was important to create an application that not only excelled in usability but also stood out visually. By prioritising both usability and aesthetics, we aimed to deliver a product that was not only brilliant to use but also visually appealing, setting it apart in the competitive wearable application marketplace.
The Safe Area
Even though users should be able to see all four corners of the GUI, it is a good idea to keep any important information inset ~30 to 40px from the outer edges. (854×480 resolution minus 40 = 774×400 safe area). To take this approach even further, centralising information in the centre of the GUI is the greatest chance for success and visibility by the user.
“Say What You See” (SWYS)
The Say What You See concept provides an easy method for voice interaction. It means that a user can literally look at the screen and speak the words they see in order to control the device.
It is sometimes difficult to avoid visual clutter with too many commands, however, having the voice commands displayed on the screen makes it virtually impossible for a user to have trouble using the device and is exceptionally valuable at increasing user comfort, particularly for first-time use.
Font Size
Through user testing, I found that the very minimum font size that should be used is 18px but generally speaking, it’s better to go with 24px and upwards to play it safe.
Localisation
I found Localisation to be a particularly tricky area since colloquialisms, character styles, formats and counts can vary across languages and cultures. A phrase or word in one language might fit perfectly but be completely inappropriate or too long in others.
Wireframe for Landing screen / Settings screen
Wireframe for Schedule screen / Jobs screen
Wireframe for Job Details screen / In-Job screen
The Solution
Designs for the Sign-In process
Designs for the Landing screen (Including New Scheduled Job alert)
Designs for the New Job List screen (Including loading/error states)
Design for the Schedule screen
Design for the Job History screen
Designs for the Settings screens
Designs for the Job Detail screen / Comment screen
Step Types
Designs for an Instruction step / Assets view
Designs for a Text Input step / Failed Validation modal
Designs for a Decision step (Including different configurations for different option amounts)
Designs for a Selection step
Designs for a Media step
Future Concepts
With WorkfloPlus recently moving to the new PWA-based web format, the wearable application is currently being entirely redesigned from the ground up to bring it in line with the rest of the platform. As part of the redesign, a new light and dark mode feature is also being added.
Examples of the redesign of the wearable app, showcasing light and dark mode variants