Loading... Loading...

banner

EHS Platform for Fitzroy Health

Project Time: June-August, 2017      Role: Lead UX & UI Designer
Project Goal: Translate and redesign 400 plus screen Microsoft Access legacy tool to a modern SaaS platform to make sure that this platform is intuitive, accessible and usable to multiple types of users.

I led this project named Salute when I was an intern designer at HTD.
It is an EHS (Environment, health and safety) Management Platform designed specifically for healthcare and medical research.

Stakeholder: Fitzroy Health

Client: Weill Cornell Medicine

Existing Problems and Improvement Solutions:
1. Information Architecture
This is a legacy product, there were lots of features were designed but never implemented. So there were lots of communications back and forth to identify the correct user journey.
2. Navigation and Hierarchy
How to integrate new features into the existing system while finding a balance between engineering effort and usability improvement plan to reduce complexity for the end user.
3. User Flow
The platform needed to contain both desktop and mobile responsive versions but the web and mobile version’s user journeys were drastically different.
4. Visual Identity
For branding, this platform represents the end users, but should also indicate that it’s powered by Salute. So how to choose the branding colors?

Workflow

process

Branding Mood Board

I started off with a mood board and incorporated the branding styles of Salute (client) and Weill Cornell Medicine (end user). Multiple design styles were presented but the final solution used Salute’s branding as the primary background and icon color, and Weill Cornell Medicine’s red as the primary highlight color. Other secondary colors came from mood board research.

The mode board research was as follows:

1. The image on the right was introduced to the client to represent several adjectives that represent the product emotionally.

keywords

2. Once the client approved, I began selecting images and extracted related colors.

moodboard
moodboard
moodboard
moodboard

3. Based on the image board, I was able to create six color combinations to introduce to the client.

4. After multiple iterations, the client chose the following style guide.

style guide

UI Kit and Layout Guideline

Before getting into details of each interface, I designed this UI kit in Sketch.

I came up with the idea that using the modular design to unify this huge platform so that reduces the design workload, for which Sketch + inVision also helped a lot.

To make the design process more efficient, I created the “Symbol” element for each UI module and grouped them based on functions and styles.
Following the layout guideline I made, designing the interface became as easy as assembling Lego blocks and overriding default texts.
This also made it way easier for any future changes on the hundreds of screens.

sketch
sketch

Some excerpt from the UI kit and layout guidelines:

style guide

Icons 
I chose line icons for this product to look light, and 2px round corners as they are not only appealing but also having an affinity with people without losing the sense of professionalism.

icons

Mobile UX/UI

The web interfaces are for users when they are doing the on-site inspections with a smartphone. It condensed lots of the functions.

ux flow
mobile design

< Home     |     More UX/UI Projects >