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
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
Final GUI Model
Prototype Learning:
Light intensity value should "stick" to specific wavelength
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. The new device is now live on the market and receiving overwhelmingly positive feedback from users.
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.
-
Implement design decision tracking for record of what features were added or removed and why.