Case Studies:  1. Complex Medical Device UI  2. Mobile eCommerce Website   3. Large Information Website  4. Smart Energy Product Suite

 

Complex Medical User Interface

In this example, Sage Research & Design was hired as a sub-contractor to create the user interface design of a medical application used to program a medical device surgically implanted in patients. This is a very complicated tool used by several different types of users (surgeons, customer representatives, and clinicians) in very different environments such as in the operating room, during post-op recovery, and during clinic visits.

 The Challenges

• This tool had to support several different user groups who had varying goals and tasks to perform.
• Very complex data and processes needed to be supported in the user interface.
• New features needed to be accommodated which significantly increased the complexity of the product
• The client wanted to move away from providing a significant amount of classroom training to a no-training-required, walk-up-and-use design.
• Advanced users needed to be able to move around the tool as they desired while new users would require step-by-step instructions.

What We Did

OR

1.  User Research

We went out into the field to observe the product being used in the OR, post-op and during clinic follow-up visits.   Product users were interviewed about their current use with the product and their ideas for improvement.    To allow for input from a larger number of users, we also conducted an online survey of current users.
What we learned:

• A deeper understanding of the users, their environments, and their tasks
•  Users don’t have what they need when they need it
•  Flow through the product is cumbersome and ambiguous
•  Product flow does not equal task users task flow

Documents

 2. Use Case & Task Flow Development

Based on user research findings, we next created use cases and task flows to confirm that the nuances of the users’ tasks were fully understood.   These documents also served as a communication tool with the product team when discussing new features and product improvements.  They also served as a foundation for the product’s interface design.

wireframes

3.  User Interface Design

Wireframes were created and iterated based on team and usability testing results. The new UI design accomplished the following:

• A Welcome screen is provided where there was none
• Users are provided with a clear path through the product with numbered tabs at the top of the screen
• The flow through is task-based. Users are asked what they would like to do and then moved through the appropriate sequence of screens.
• Interactive images are added to help uses visualize lead placement in the patient and to confirm their value entries are correct.

• Parts are now displayed as images rather than a difficult to remember model numbers
• The data is presented vertically to match the orientation of the device in the patient and help surgeons quickly diagnose problems
• Out of range values are highlighted in red for quick identification and tips are available for users how to bring values back in range
• Simpler language is used throughout the UI

video

4. Paper Prototype Usability Testing & Design Reiteration

Our first usability session was conducted very early in the design process using paper prototypes where the test moderator played the part of the computer and displayed appropriate paper screens based on participant’s actions.
What we learned:

• The basic architecture and flow through the product was successful and easy to learn by new users
• One of the task flows was confusing and needed minor changes and clearer on-screen assistance
• Several ideas to make the design even more useful and easy to learn and use

visual

5. Visual Design Management

While the wireframe design was maturing, the visual design began. This work was outsourced because we didn’t have visual designers on our team like we do now.  The visual designers needed guidance and management to ensure the UI design remained easy to use.

We’d love to be able to show you more screens, especially before and after shots.  Unfortunately, this product is highly confidential.

6. Usability Testing & Design Reiteration

A high fidelity prototype was created by the product team and we usability tested again.  In this study participants were able to interact with a functioning UI and respond to the visual design.
What we learned:

• New users could walk up and successfully use the product
• Experience users were excited by new features and a more convenient UI
• A few more tweaks were needed to some of the instructions and screens

The Results

• While on-screen training prompts were needed for some users, most users were able to use the basic feature of the product with no training, a vast improvement from the original product
• Images and controls were more accurately mapped to what the user was seeing on and in the patient, thereby reducing errors and speeding along troubleshooting
• The UI was transformed from a dated, visually unappealing appearance to a sleek, modern, professional design

Case Studies:  1. Complex Medical Device UI  2. Mobile eCommerce Website   3. Large Information Website  4. Smart Energy Product Suite