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
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?
Research & Discovery
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.
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.
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
Final
Using the newly established IA as a foundation, we then narrowed down different user workflow variations to determine primary screens and pertinent content.
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.
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
Final GUI Model
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
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
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.
What I Might Do Differently...
A few things that I learned from this project or would keep in mind for the next time around...
-
Conduct brainstorming sessions with the client early on to hone in on key features and functionality for the updated interface.
