top of page
LX_4.png

Shedding New Light on Neurosurgery.

Client

A neurosurgical technology corporation

Focus

UX/UI Design

Industrial Design

Branding & CMF

Role

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

Timeline

5 months

Overview

Overview

A neurosurgical tech company was looking to update both the physical design and digital interface of a neurosurgery device system as part of a new model update to their existing 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.

Outcome(s)

  • A completely refreshed user interface incorporating the new features of the latest surgical system model.

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

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

Final GUI Prototype

My Process

Research & Discovery
Define & Synthesize
Ideate & Validate
Design & Refine
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.

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.

Existing IA

Existing IA

Existing Workflow

Information Architecture

Iterations

Final

After exploring a variety of iterations with the client considering different user experiences, we refined & finalized the IA:

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

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

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.

Standby Mode

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

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

Visual Interface Exploration

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.

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

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. 

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.

Explore More Projects

Next

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