Project Time: June-August, 2017 Role: Lead UX & UI DesignerProject 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.
Stakeholder: Fitzroy Health
Client: Weill Cornell Medicine
Existing Problems and Improvement Solutions:
1. Information ArchitectureThis 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 HierarchyHow 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 FlowThe platform needed to contain both desktop and mobile responsive versions but the web and mobile version’s user journeys were drastically different.4. Visual IdentityFor branding, this platform represents the end users, but should also indicate that it’s powered by Salute. So how to choose the branding colors?
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.
2. Once the client approved, I began selecting images and extracted related colors.
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.
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.
Some excerpt from the UI kit and layout guidelines:
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.
The web interfaces are for users when they are doing the on-site inspections with a smartphone. It condensed lots of the functions.