top of page
LX_4.png

Shedding New Light on Neurosurgery.

Client

A neurosurgical technology corporation

Scope

UX/UI Design

Industrial Design

Branding & CMF Design

Team

Internal:

2 Industrial Designers (+ me)

External Engineering Specialists:

Project Manager, Mech. Engineering

Client: 

Product Manager, Marketing, Engineering, Developers, Legal & Compliance

My Role

Lead UX/UI designer, + industrial designer & branding / CMF designer.

 

Individually responsible for all UX/UI design & branding/CMF design, as well as initial industrial design concept development.

Brief

A neurosurgical tech company was looking to improve both the physical design and digital interface of an existing neurosurgery device system.

 

The system is used for neurosurgeons to perform both brain tissue resection and locating abnormal tissue through multi-wavelength light. The latest version of this system includes new state-of the-art technology and feature upgrades, and the client wanted those upgrades reflected through a more modern & intuitive interface and a sleek and state of the art physical design.

Challenge:

many players involved across different teams.
Challenge:

highly technical subject matter

Outcome(s)

A successfully launched new neurosurgical system, including:

  • A completely overhauled end-to-end user interface design, incorporating the new features of the latest surgical system model such as multi-wavelength selection.

  • A new physical product design with full-scale prototyping that incorporates functional improvements through a modern updated look and feel.

  • A coherent visual language and strong brand recognition through logo redesign and CMF exploration.

Final GUI Prototype

Process

Research & Discovery
Define & Synthesize
Ideate & Validate
Design & Refine
Challenge:
lack of research budget with highly technical subject matter.
Project Focus
Research & Discovery

What is the current system doing well, and where are areas for improvement?

The design team met with surgical technicians to discuss frustrations, delights, and pain points associated with the current neurosurgery equipment. Users were observed to note areas of opportunity for ergonomic improvements, and designers were able to test the device themselves to better understand the end user experience. 

Key Opportunity Areas:

Existing Interface:
  • More functionality options including wavelength changes

  • Evaluation and restructuring of content hierarchy

  • Incorporation of a more structured menu & system settings access

  • Updated modern design to reflect state-of-the-art technological updates to new system

Existing Device:
  • More optimal viewing angle for screen

  •  Larger screen for more visibility

  • Guide or indicator for correct tube plug-in orientation

  • Cleaner & more modern front facing design

Define & Synthesize

Developing the foundation & structure for the updated interface.

Existing Workflow

Existing IA

Information Architecture

Challenge:

changes in feature scope

Final

Final

Using the newly established IA as a foundation, we then narrowed down different user workflow variations to determine primary screens and pertinent content.

Evaluation of existing information architecture & workflow

Because there were no initial records of the existing information architecture (IA) or workflow of the interface, I created these diagrams as an initial starting point to drive client conversations surrounding new features & functionality.

Iterations

User Workflow

Iterations

Ideation
Ideate & Validate

Exploring content & configuration on primary interaction screen

Establishing Content Hierarchy

What information is most important on the primary interaction screen?

Concept Exploration: Primary Interaction Screen

Design & Refine

Establishing a visual theme and developing final UI kit

Visual Interface Exploration

Exploring & refining a range of visual directions for the primary interaction screen to highlight the modern, cutting edge & high tech upgraded system.

Tradeoff:
 
simplified interface for enhanced ease of operation

Final Design & UI Kit

Procedure Screens

Procedure screens are considered the primary screens in the interface and will be interacted with the most. The procedure screen gives access to intensity adjustment, change of light type, standby mode, and menu options.

Menu

The menu is accessed through the hamburger icon on the upper left corner of the screen. The menu is simple, intuitive, and unobtrusive. It slides out from the left side and covers one third of the screen so that the wavelength information is still visible. The menu provides access to adding/removing a secondary wavelength, settings (brightness adjustment), and servicing.

All components besides the menu lower in opacity. Standby button blinks solid/outline until pressed again to turn light source back on.

Standby Mode
Warnings Mode

Caution and warning messages appear automatically when an internal error or problematic temperature increase occurs. Caution Yellow indicates a cautionary message that is dismissable, while Warning Red indicates a fatal error that must be resolved before the user proceeds.

Wavelength Selection

Accommodating for current state of 2 wavelength options, as well as future state of 5 potential wavelength options.

Other UI Elements

Color, Icons, Font & Typography.

Prototype
Prototype

Final GUI Model

Prototype Learning:

Light intensity value should "stick" to specific wavelength
Industrial Design

Industrial Design

Ideate & Validate

Design Exploration

Exploring form factors, ergonomic improvements, and aesthetic directions through iterative sketching.

Concept Refinement

Narrowing down concept selection through concept placement from "mild" to "wild".

Design & Refine

Final Design & CAD Development

Full-Scale High-Fidelity Model 

Branding & CMF
Branding

Logo Design & CMF

Logo Design Exploration

The client opted for a simple & straightforward logo concept which can be read from further distances - often how someone will view this device.

Final Logo Design

CMF Exploration

Exploring different colors & finishes within the client's brand standards to create visual coherence with brand language.

Reflection
Reflection

Key Takeaways...

The Outcome

The result of this project was a fully redesigned user interface and UI kit which allowed for a seamless translation of design intent to developers. In addition, a new physical housing design was introduced, with final CAD files transferred to engineers for production. The final prototype of both the digital interface and physical product were introduced to surgical technicians in the field for feedback with overwhelmingly positive reactions. The updated designs enhanced usability for end users while also emphasizing the new cutting edge technology included in the latest version of this surgical system. The new device is now live on the market and receiving overwhelmingly positive feedback from users.

LX_4.png

What I Might Do Differently...

A few things that I learned from this project or would keep in mind for the next time around...

  1. Conduct brainstorming sessions with the client early on to hone in on key features and functionality for the updated interface.

  2. Implement design decision tracking for record of what features were added or removed and why.

Explore More Projects

Next

behr_UIoverview.png
Crafting a more enjoyable painting experience.
bottom of page