UI/UX Design

Revamp of Occupational Safety & Health Mobile Application

HK Labour Department

The “OSH” mobile application aims to provide the latest occupational safety and health information to alert employers/contractors and employees to the occurrences of serious or fatal work injuries and remind them of the relevant safety and health measures needed to be taken to prevent recurrence of the tragedy. 

TARGET AUDIENCE

Employers/contractors and employees in high-risk industries.

RESEARCH

By putting on users' shoes and creating empathy maps, we could better understand their needs. Inputs from interviews and research are used to create each for workers and safety officers working on construction sites.

Empathy Map - Safety Officers

PAINS
  • Overwhelmed by documentation and resources.
  • Overwhelmed by cluttered interfaces with too many features or unclear navigation paths, making it challenging to locate essential tools quickly.
NEEDS
  • Efficient management tools to increases efficiency in reporting and documentation.
  • User-friendly interfaces that streamline safety inspections, audits, and incident reporting processes.
  • Quick access to information, tools, and features, which can facilitate smooth workflow and efficient task completion.
  • Features for sharing safety updates, alerts, and reminders with co-workers.

Empathy Map - Workers

PAINS
  • Limited training and support on using app/internet for resources.
  • Unwilling to spend extra time on exploring the app/internet for resources.
  • Overwhelmed by complex app interfaces or unclear instructions.
NEEDS
  • An user-friendly interface which is easy and intuitive to use.
  • Clear instructions or guidance within the app which can avoid confusion.
  • Easy access to up-to-date training materials and resources.
  • Easy self-learning platform.

GOAL

  • To create an user-friendly interface which is easy and intuitive to use.
  • To create a user interface that enhances efficiency and usability for users in their day-to-day tasks.
  • Improving interface design to enhance user experience and user engagement.

STRATEGY

Intuitive and Clear Navigation
  • Simple and intuitive navigation system allows users to easily access essential tools and information, and move between different sections.
Visual Hierarchy and Minimalism
  • Utilize clear visual hierarchy to guide users' attention.
  • 3 key features are highlighted at homepage.
  • Keep the interface clean and uncluttered, allowing users to focus on essential elements.
Clear and Readable Typography, High Contrast Colors
  • Legible even in bright sunlight and outdoors.
Use of Visual Cues
  • Using recognizable icons with characteristic cues to convey information quickly.
Vibrant Colors
  • Using more vibrant colours to make the interface more visually appealing.
  • Using different colours to distinguish between different features.
Quick Access to Information
  • Search functionalities: filtered by keywords and dates
  • Bookmark page is divided into 3 tabs (Work Safety Alert, Systemic Safety Alert and Important Announcement) for quick retrieval of information.
Share Function
  • Users can share the links easily by clicking the share buttons.
Personalization
  • Users can change language, font size and shortcut preference order to fit their personal needs.

STYLE