November 2022 - December 2022

EHSS Digital

Descriptions

EHSS Digital is a mobile application that aims to assist employees in carrying out their work activities. This application has features to view Handover History, Behaviour-Based Safety, Safety Induction, Safety Actions, Work Permits, Safe Work Hours, EHHS Inspections, Work Permits, Safe Work Hours, and Accident Investigation.

Objectives

Currently, when employees carry out their work, they still work manually. Employees use physical paper to make checking documents. With this, employees must have a list of documents first before checking. Apart from that, there may be non-technical factors such as forgetting to save documents or losing them. document. Due to this problem, a digital EHSS was created, which will later help employees unite, update, and report their work in the field via a mobile platform.

Tasks & Responsibilities

  • Collaborate with the product owner regarding the implementation of the brief into the design.

  • Create low-fidelity and high-fidelity designs according to the direction of the product owner.

  • Apply the EHSS Digital system color and style to the design system that will be used.

Tools

Figma

Design Foundation and Component

For the color system I took it from the company logo after that it was generated for its derivatives, For the typography the font type was taken according to the brief from the product owner. For the design system I used the Legion design system because the developer and I had already used it for the UI components of the design and the components were already available to use, just change the color according to the company brand.

Design System: Legion

Typhography

Montserrat

Montserrat

Montserrat

Color System

Primary

Secondary

High Fidelity

Login

On the login page there are two users, namely employees and guests. Employee users can log in using their username or use a Microsoft account, while guest users can log in as guests.

Navigation Menu

On the home page there is a menu that can be opened by employees, namely BBS, Safe Man Hours, Safety Action, EHSS Inspection, and Accident Investigation. The notification page will contain notifications of approval and regarding document theft. The history page will contain a list of documents that the user has sent. And on the profile page the user's identity will appear.

Behavior Based Safety (BBS) Menu

In this menu, users can check behavior-based safety, proactive accident prevention efforts that focus on risk behavior or dangerous behavior that has the potential to cause accidents, then send it to the relevant approval.

Safety Induction Menu

Users logging in as guests can only access this menu. In this menu, the user must input their identity and then work on the test questions provided by the company. After carrying out the test, there will be a result if the user meets the minimum score. There will be a successful validation. If they fail to meet the minimum score, the user must retake the test until they are successful.

History Detail

This menu will contain tracking of documents that are awaiting approval or have already been approved. There are several types of approval, namely processed, rejected, accepted, and approved. Users can also see the details of documents they have sent for approval.

View more design files?

Visit Figma File