SafeWork Apps
Reimagined Digital Tools to Manage Workplace Safety
Contribution
User Research & Test
UX/UI Design (Web/Android)
Role
Design Lead
Overview
Digital Tools for Safety
SafeWork apps are digital tools to help managers to accomplish their goals to run their worksite safely and productively.
Each app gets the safety data collected from the SafeWork Smart Devices and provides technical support.
There is a Web App - SafeWork Dashboard and an Android Native App - SafeWork Team to support the specific needs of managers.
How does it work?
Dashboard
Team App
SafeWork Dashboard
SafeWork Team App
Background
➔ There had been no such digital tools that managers can easily access and use during their work.
➔ Workplace injury rate went up from 1.5% to 2.3% every year, and so did the injury expenses.
Many managers such as EHS(Environmental, Health, and Safety), Shift, and Ops have constantly requested digital tools.
Each manager had specific goals to reduce injuries and manage their worksite to be productive but more importantly, safer.
As a design lead, I led app design projects with junior designers, UX researchers, and product managers.
Target Users
EHS, Shift Managers
➔ They always try to find ways to improve productivity while keeping the workplace to be safer than before.
EHS and Shift managers care about their employees with any resources that they can use. They are the ones who can communicate between their employees and the directive level.
Persona
Persona
User Research
▪ 10 Targeted Managers
▪ 30 Min in-person Interview
▪ 25 Responses
I collaborated with the internal customer success team to learn what the customer needs and pain points are. I prepared to do surveys and interview sessions with 5-10 managers.
My main focus was to understand their true pain points and learn what tools and methods they are using in order to keep their employee safe and track their productivity.
Discoveries
After performing onsite user interviews and observations, I discovered 2 major findings that eventually became challenges to solve.
90% of managers had been using Microsoft Excel or PowerPoint to track productivity and safety.
No way to track or find the progress over time.
Let’s deep dive into these discoveries!
1
90% of managers had been using Microsoft Excel or PowerPoint to track productivity and safety.
What I discovered was that they had been using office tools like PowerPoint, Word, and Excel to track productivity and create documents to communicate with their employee about safety through data.
This wasn’t surprising because most of the managers only have access to these tools and these were the easiest software to use.
Though the content might work, organization and visualization with this tool were cluttered and often lost so managers needed to re-create the reports or visualizations.
How might we consolidate massive data and insights?
Challenge
I found that the managers preferred a tool like a dashboard that they can easily access from their work computers. We came up with a multi-functional dashboard with the following features.
Single-source of curated reports and insights
Solution
Web Dashboard
Access to the curated reports to get in-depth knowledge and insights based on their needs
Be able to communicate with a company for any support or request
Managing the list of employees using SafeWork System
2
No way to track or find the progress over time.
I discovered that there is no way of seeing the real progress and it was often hard to visualize to understand whether each individual is doing good or not.
Based on the survey, it was apparent that the managers often lose the records or any data that they kept over time. This means that they had been losing valuable data and insights over time.
How can we build a tool that managers can always bring with to record and track without losing momentum?
Challenge
Building a hand-held tool that managers can always bring and interact to track the data at any time.
Solution
I also came up with a tool that managers can use directly with tablets to be able to track their team member’s safety performance and record any interactions for periodic observation.
On-hands Tablet App
Seeing who's working and wearing sensors today
Be able to quickly find who needs attention and guidance
Affinity Mapping & UX Brainstorming
Based on the solutions, I led affinity mapping and UX brainstorming sessions to identify ambiguous challenges of users and collaborate with stakeholders to come up with defined solutions.
After 2-3 workshops with designers, a UX researcher, and product managers, I was able to clarify users’ key needs and defined solutions with potential features.
Need an easy and intuitive way that managers can easily navigate and use during onsite shifts.
Increase the safety awareness of their employees.
Reducing work-related injuries such as musculoskeletal injuries.
Be able to interact in a prompt way with their employees in person and record it.
Tracking the safety assessment over time.
Information Architecture & Userflow
Based on the solutions, I created the information architecture to create a comprehensive structure for the dashboard and app.
I tried to minimize the number of pages by simplifying the organization of contents.
I also worked with the software engineering team to verify the technical requirements and API structures to optimize the content loading time and interactions. This was important because most of the customer uses their own server system and this could limit features significantly.
Safety Score System
An Easy Way to Understand Safety Assessment
The safety score is the scoring system that the data team has developed with 3 ergonomic factors based on William Marras’s, Ph.D., research in ergonomic risks based on movements.
I worked with the data team and UX researcher to create a visual system for the safety score. My major focus was easy identification and insight.
My design for the safety score contributed to increasing user awareness after implementing it throughout the product and educational materials.
Design System
Before getting into developing the UX/UI design, I explored the optimal way to develop the design system for this project.
I used the existing core brand guide and then expanded it to support the different applications.
I created the elements that are necessary for what I need for SafeWork digital tools. Based on the company’s brand style, I extended it to comply with accessibility or usability.
Component Library
I created a comprehensive component library to be shared with the design team so everyone can use the same component for any project. I focused on the following principles for the component library:
Flexibility
Compatibility
Accessibility
Over time, the component library was developed along with several usability tests and adjustments. It was used to communicate between the different stakeholders for the design-development process or to expedite the iterative design process.
Design Process
Based on the defined information architecture and design system, I started a design process for both SafeWork Dashboard and SafeWork Team App.
SafeWork Dashboard
Wireframing
Based on the information architecture and required features, I created a wireframe to develop the complex dashboard interactions.
After a few initial versions, I ran multiple review sessions with internal customer success team and software engineering team to gather their feedback. This was to learn and verify both customer needs and technical capability.
Hi-fidelity Design & Prototyping
Based on the wireframe, I started to explore the visual directions and the components I needed to accomplish the required features.
I chose to use a lighter theme based on the company branding style and then created a design system and component library.
All components had accessibility and initial interaction testing with the internal customer team who had the best knowledge of what the users wanted and need.
External User Testing & Hand-off for Development
After I made a couple of modifications, I planned to do external user testing in order to gather true user feedback and validate the user experiences.
Due to the limited timeframe and the number of users I could run a test with, I used Maze to quickly gather the user responses while seeing how they interacts with the prototype.
90% of the users were able to navigate through the prototype and accomplished goals without any errors.
After this, I started to work with the software engineering team to begin developing the dashboard. The development process was very smooth since I onboard developers as early as possible so they can fully be integrated with the design direction I am going for.
SafeWork Team App
Wireframing
Based on my finding that manager needs a quick and simple app that they can run and use while walking around the workplace.
I focused on simplifying the information and interactions while working with Android developers to ensure that the design implementation is realistic.
Another constraint was that the app needs to work on any tablet that the customers would use. So I tried to utilize the screen assets as efficiently as I can.
Prototyping & Initial Testing
After I developed the wireframe, I reused or re-purposed existing components to be optimized for the tablet experience.
Also, based on the safety score, I came up with a color grade system in 3 simple colors so the user can identify which person needs attention.
Another focus was on recording a session with athletes. I tried to make this interaction succinct and build with minimal components so the user can quickly record any sessions.
With the proposed prototype, I led a couple of in-person interviews and user testing with the internal customer success team. They were able to use the tool as intended without major quests and provided me helpful insights such as improving accessibility.
External User Testing & Hand-off for Development
I was able to get 2 groups of 3-5 managers to do an in-depth video interview and do user testing of the latest prototype at the same time. I used the Maze for quick and easy deployment for testing.
95% of users were able to complete the tasks from the simple functionality of the app and were able to provide me with some future suggestions to be implemented but these weren’t any critical issues.
I also started to manage the hand-off process with android app developers with Zeplin. This tool supported android units so I don’t have to convert the units or manually create all designs to development guidelines.
SafeWork Dashboard
The finished SafeWork dashboard is a web-based app that can be accessed from most web browsers.
My goal was to make the dashboard experience easy and intuitive.
Home
I made a landing page to give immediate safety insights by showing overall statistics and a leaderboard. On this page, managers can easily identify the safety performance and some notifications regarding the SafeWork system.
Admin
The admin page was designed to add or edit the users using the SafeWork system. There is also a feature called ‘Bulk Update’ which allows managers to add or update the users with CSV files so they don’t have to do them one by one.
Training
I also needed to design a page where managers can access videos and PDFs regarding the safety training or the SafeWork System. I designed this page to be simple and easy to search for any available resources.
Analytics
There were demands for custom reports for specific analysis. I worked with the data team to create custom reports with refined visualization and interactivity.
Help Desk
Help desk needed to be designed with Zendesk since the support team has been using it to track the support tickets and resources. I tried to match the style of this page to match with the design system that I built.
SafeWork
Team App
The finished SafeWork Team app would be used in the customer’s choice of regular or rugged tablet.
The overall design direction is a hand-held touch experience throughout the app. This way, managers can easily interact with their employees while taking a reference from the app.
Team List
A landing page is called the team list. On this page, I want a manager to quickly identify his team member safety trends which is the most important information that the manager wants to identify.
So I used the safety score color grade in order to draw attention as a first element. I designed the right side of the row to show the safety score change from the last 7 or 15 days so the manager can check the trend at a glance.
From this screen, managers can interact with the table to filter to show specific athletes. Also, they can touch each row to pull up the individual profile page showing more data and being able to record a session.
-
The description text goes hereThis is to track how many times that the user has checked out the sensor over a certain period of time. This would allow managers to understand the user is engaged with the SafeWork system.
-
I used the safety score color box on top of the number to draw an attention at a glance
-
The focus is to provide which safety factor the user needs to improve in order to increase the safety score.
-
This helps managers to track the lost sensors for inventory tracking purposes.
-
This helps managers to identify who is on shift now and wearing a sensor quickly with icon.
Athlete Profile
The finished SafeWork Team app would be used in the customer’s choice of regular or rugged tablet.
The overall design direction is a hand-held touch experience throughout the app. This way, managers can easily interact with their employees while taking a reference from the app.
Data Segments
Sessions
This page is designed to see all recorded sessions. The purpose of this page is to track and manage any sessions that the manager provides for their employees.
Each session is very important because the manager can use it as an intervention that affects the individual’s safety performance over time.
Deployment & Impact
1.4x
Increase in End-Users Awareness to the Safety
1.8x
Increase in End-Users Engagement to the SafeWork Device
After the first deployment of the SafeWork Dashboard and Team App, the company retained more than 1.5x of managers as part of SafeWork users than before.
This also contributed to maintaining industrial athletes by 1.8x and helped to decrease the injury rate with SafeWork devices.
Also, SafeWork Apps helped to contribute to the increase of sales leads by 24.94% as an additional SaaS product with SafeWork Smart Devices.