InformationPlay

User interface design strategy and guidelines that can scale to two different ventilators products.

ROLE
UI Design Lead, working with the Ziba design team and client team. Defined the UI project plan and collaborated closely with the user researcher, project manager, and visual designer throughout the project. Managed and owned the final UI style guide development.

PROBLEM
Design a single user interface strategy for two CareFusion ventilators—xNV and Dreamline. The product would be replacing the existing ventilator product family, and needed to be customizable for a range of clinical acuity and patient sizes.

PROCESS: DEFINITION
The project started with a global research initiative to understand workflow, discover opportunities, and evaluate hardware and software product requirements.

UI concepts were created to better understand mental models, evaluate three unique UI concepts and new features, as well as high level look & feel preferences.

PROCESS: USER RESEARCH
The design research took place at 11 hospitals in 6 countries, with 57 users being interviewed. The research focused on understanding both the hardware and software experience, and exploring concepts with end users. Interactive PDFs were created for each concept and presented on an iPad for assessment. Findings were summarized and presented in a detailed report. Key UI findings included:

• users preferred a more fixed and structured UI, and
• most were comfortable with the removal of the hard user interface controls to a touch screen only UI.

PROCESS: CONCEPT REFINEMENT
The concept design started with the definition of a set of guiding principles, to create a common language and design criteria for the team.

Initial concepts for the organization and key tasks started as wireframe screen flows.

Three unique concepts were developed, and then evaluated by the project team and clinical specialists. After multiple iterations, one concept was selected by the team.

The final concept was based on a fixed control panel, with multiple data views for advanced and basic users. The panel position and views were configurable by the hospital.

PROCESS: PROTOTYPING
Detail design began after a single concept was approved by the client. Interactive PDF wireframes were used to design and evaluate key features, task flows, and to test and evolve the design system. The developers on the client team, created prototypes to test gesture interactions, transitions, transparency, and touch area sizes.

PROCESS: VISUAL DESIGN
Visual design development began after a single concept was finalized. The information architecture and interaction design was finalized before the visual design was complete. This helped the team plan for the number of screens and UI elements needed to be addressed by the visual design.

The visual design needed to support the configurability of the UI, work with a dark or light background, and align with the existing Carefusion product identity and the new hardware design.

RESULTS
A user interface style guide was created to communicate the design principles, screen types, task flows, screen and control behavior, and visual design.

The design system could support scaling to different monitor sizes, the institution could configure the layout, and advanced and basic feature sets.