Project Title
Subtitle
Contribution
User Research & Test
UX/UI Design (Web/Android)
Role
Design Lead
Overview
Few Words Summary
Paragraph to explain the overview of the entire project.
How does it work?
Dashboard
SafeWork Dashboard
User Flow
Background
➔ There had been no such digital tools that managers can easily access and use during their work.
➔ The workplace injury rate went up from 1.5% to 2.3% every year, and so did the injury expenses.
Supplementary paragraphs to explain the background in more detail
Target Users
List of target users
➔ Goals, pain points of the target users
Supplementary paragraphs to explain the target users in more detail
Persona
Persona
User Research
▪ xx Targeted Managers
▪ xx Min in-person Interview
▪ xx Responses
Detailed explanation of how the user research was performed and what methods were used to extract the data.
Discoveries
Summary of the discovered facts and insights from the user research
Summary sentence
No way to track or find the progress over time.
Let’s deep dive into these discoveries!
1
Summary sentence here
Detailed explanation of discover of #1 insight.
Question to ask
Challenge
Detailed explanations to support the potential solution came up from the discovery.
Potential solution here
Solution
[Potential Tool]
Feature
Feature
Feature
2
Summary sentence here
Detailed explanation of discover of #1 insight.
Question to ask
Challenge
Potential solution here
Solution
Detailed explanations to support the potential solution came up from the discovery.
[Potential Tool]
Feature
Feature
Feature
Affinity Mapping & UX Brainstorming
A brief explanation of affinity mapping and UX brainstorming
Insight
Insight
Information Architecture & User Flow
A brief explanation of how the information architecture and user flow were established.
Design System
Brief Explanation of how the design system was built
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 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.