Pattern Library and UI

Fuse user experience

A new software product created for Relay Health, a subsidiary of McKesson. Fuse is a wire data and analytics monitoring product that would standardize health care data messages. The back end had been under development for 6 months, and myself and one other UX designer, were brought in to design the front end before the initial release.

Project Details

Client: Relay Health (McKesson)
Product: Fuse
Tools: InDesign, Illustrator, Bootstrap, HTML, CSS

Step 1: Review existing assets.

The first step is reviewing the existing wireframes created by a previous designer (before the backend was built), and current Bootstrap implementation. To the left, you can see what I had to work with.

Step 2: Overall look and functionality

Working within bootstrap framework, but now exploring custom elements and a new user interface, including doing alot of research on the product, health care systems, use cases, end users and so on. Here you see three different options, which not only differ in navigation style, but also how the core content is presented. Later iterations merged the best of each design until a final design was approved.

Step 3: Create specifications and build

Creating specs for the custom navigation and true responsive user interface, and passing that information on to a team of developers who are building the product.

Step 4: Custom CSS and Style Guide

Along with the specifications was delivered custom CSS code that would customize the Bootstrap interface to look truly unique and custom for this product. This was compiled as a LESS file by the development team, but they needed specific CSS values. Also created was a style guide built on HTML, so that future features built under the product would look consistent, and allow developers to use the custom framework.

Step 5: Custom Components

Several aspects of the application needed custom designed components that would specific for the use cases presented by the product. Creating these will put the power in the hands of the user. This includes a powerful responsive table, table toolbar, filter, and time and date range picker.

Step 6: Template & Component Library

Future designers of new features would need to have something to work with that relates to the custom components built in the code. For this, a high fidelity template was created in both InDesign and Sketch, so that designers would have master pages and style sheets to work with. As well, the Adobe Creative Cloud Library and Craft Library were utilized to create a library of all the colors, styles, and components so that designers could drag and drop components on to the template and quickly create high fidelity branded wireframes and walkthroughs.

Step 7: Application Walkthrough

The early product utilizes different application features (referred to as different applications as each has it’s own product team). Shown here are two applications that I created as part of the project, showing the steps walking through the user story, and then passed on to the application developers to build.

Step 8+: Iterate and Test

Design doesn’t ever stop in agile product development. Things are learned along they way that effect the iterative process, and new features are added. A dashboard with visalualizations, a secondary navigation, and status are shown on the left, with a database selector and the testing that was done to get to the final result shown on the right.