Project overview / my role
Establish responsive guidelines
Redesign 100+ icons
Audit the UI and document visual inconsistencies
Establish consistent states and colors that are clean and modern
Create design system guidelines for documentation and quality assurance
User needs and pain points
Radiology and clinical workstations are set up using a wide range of monitor sizes and resolutions, including high-res diagnostic monitors. However, fonts and icons were not rendering properly across the wide range of monitor sizes and components across the application were fixed dimensions creating several usability issues.
Iconography redesign
There were over 100 icons currently in use in the application that needed to be refined and redesigned to support scalability and visual consistency.
Icons should be clean and simple, therefore any unnecessary complexity was removed:
Icons should have consistent styling for elements such as arrows and lines weights:
Keyline grids were used to ensure proper visual weight, alignment, and spacing. All icons were rendered on a pixel grid to eliminate pixilation:
Icons were delivered in scalable format and responsive breakpoints and sizing guidelines were established in order to support high-res monitors:
Creating UI consistency
For this project, I knew that many parts of the UI were going to be updated, so I took this opportunity to establish visual design guidelines and create consistency that was lacking in the current implementation.
There were a variety of menu styles and selection states that created confusion for the end user and made the application look messy and unprofessional:
Cohesive guidelines were created to ensure menu style and state consistency:
The original icons were not created on a grid which was creating size and spacing issues:
Proper size and spacing creates better usability. Colors were updated and gradients were removed in order to create a more modern, clean look and feel:
User feedback
Many of the updates for this project were based on established best practices (size, spacing, alignment, consistency, and readability). However, I still wanted to validate the decisions with our users. Users were shown a working version of the existing application, and a prototype version of the new design. Users were given control of the application, performed some tasks and then were asked questions about the legibility and overall look and feel of the two options.
Here’s what users had to say about the new design:
“I prefer the new design, absolutely. Somehow it’s much more clear. The old design looks really busy and complex.” – Abdominal Imaging Radiologist
“It’s bigger and more readable without taking up too much real estate, which is a win.” - CT Rad Tech
“Easier to read, easier to see, and easier to click on. The icons appear much more crisp and clear. And the colors are more contrasting.” – Women’s Imaging Radiologist