User Interface Rebuild
UI Rebuild
Introduction
Introduction
This project involved a comprehensive overhaul of Roche's “navify Digital Pathology” application, using a new design system.
The project faced significant compatibility issues between the old application and the new design system, which were compounded by a major version update (2.0.0) of the design system released shortly after my arrival.
This "User Interface" rebuild involved a comprehensive overhaul of Roche's “navify Digital Pathology” application, using a new design system.
The project faced significant compatibility issues between the old application and the new design system, which were compounded by a major version update (2.0.0) of the design system released shortly after my arrival.
TL;DR? Here are some highlights:
TL;DR?
Here are some highlights:
I established structure
I established structure
Successfully implemented a structured design process within a short timeframe.
Successfully implemented a structured design process within a short timeframe.
I addressed UX challenges
I addressed UX challenges
Designed and validated updated UI ensuring consistency with the new design system and an improved user experience.
Designed and validated updated UI ensuring consistency with the new design system and an improved user experience.
I led my team
I led my team
Successfully onboarded and mentored a new team member for immediate impact and long-term success.
Successfully onboarded and mentored a new team member for immediate impact and long-term success.
Challenges Faced
Challenges Faced
Upon joining the project, it became evident that the transition to the new design system was more complex than anticipated. Initially, developers were left to make design decisions without UX input, resulting in a less than ideal user experience.
My initial role was to answer developer questions regarding specific issues. However, it soon became clear that full UX support was necessary to address the project's complexities.
Complicating matters further, a major version update (2.0.0) of the design system was released shortly after my arrival, requiring significant adjustments.
Upon joining the project, it became evident that the transition to the new design system was more complex than anticipated. Initially, developers were left to make design decisions without UX input, resulting in a less than ideal user experience.
My initial role was to answer developer questions regarding specific issues. However, it soon became clear that full UX support was necessary to address the project's complexities.
Complicating matters further, a major version update (2.0.0) of the design system was released shortly after my arrival, requiring significant adjustments.
Peer Mentorship
Peer Mentorship
During the project, I was tasked with onboarding a new designer to the Roche team. Within one week, the designer was fully integrated and actively contributing to upcoming sprints.
Together, we established a streamlined process for reviewing and refining previously developed screens, ensuring consistency and quality across deliverables.
My effective coaching and mentorship not only set the new team member up for success but also demonstrated my leadership capabilities.
During the project, I was tasked with onboarding a new designer to the Roche team. Within one week, the designer was fully integrated and actively contributing to upcoming sprints.
Together, we established a streamlined process for reviewing and refining previously developed screens, ensuring consistency and quality across deliverables.
My effective coaching and mentorship not only set the new team member up for success but also demonstrated my leadership capabilities.
Actions Taken
Actions Taken
Recognizing the need for a structured approach, I was reallocated to the project full-time to design all remaining UI components. Within three weeks, I established a comprehensive process for designing, reviewing, and implementing screens ahead of development.
Recognizing the need for a structured approach, I was reallocated to the project full-time to design all remaining UI components. Within three weeks, I established a comprehensive process for designing, reviewing, and implementing screens ahead of development.
Technical Reviews
Technical Reviews
Ensuring technical feasibility and alignment with development goals.
Ensuring technical feasibility and alignment with development goals.
Business Reviews
Business Reviews
Confirming that designs met business requirements and user needs.
Confirming that designs met business requirements and user needs.
Terminologist Reviews
Terminologist Reviews
Ensuring consistency and clarity in terminology across the application.
Ensuring consistency and clarity in terminology across the application.
User and Expert
Feedback Sessions
User and Expert
Feedback Sessions
Gathering insights from end-users and subject matter experts to inform design decisions and improve usability.
Gathering insights from end-users and subject matter experts to inform design decisions and improve usability.
Feature Examples
Feature Examples
Here are a few high-level examples of my design in action:
Note: The majority of this product was designed in “dark mode” to reduce visual strain on pathologists and lab technicians
Here are a few high-level examples of my design in action:
Note: The majority of this product was designed in “dark mode” to reduce visual strain on pathologists and lab technicians
Navigation Cleanup
Though this feature was strictly UI focused, there were some key opportunities to improve the experience beyond updating the look and feel.
Multiple Points of Navigation
Multiple Points of Navigation
The Problem:
In the previous UI, there were only a few key navigation options from the landing page and each of them had their of nav structure within.
Through user feedback sessions, I found this created significant issues as users had to use multiple navigation menus to switch to a different part of the tool.
The Problem:
In the previous UI, there were only a few key navigation options from the landing page and each of them had their of nav structure within.
Through user feedback sessions, I found this created significant issues as users had to use multiple navigation menus to switch to a different part of the tool.
The Solution:
Consolidated all navigation into one unified sidebar
Utilized expandable lists to include the second tier nav items that were previously quarantined
The Solution:
Consolidated all navigation into one unified sidebar
Utilized expandable lists to include the second tier nav items that were previously quarantined
Various User Types
Various User Types
The Problem:
There are four default user types for this tool. They each have differing workflows which require their own permissions and access. Additionally, custom user types can be created with any combination of permissions.
This meant I had to create a solution that would look good and be functional for each user type whether they had access to everything in the tool or only one screen.
The Problem:
There are four default user types for this tool. They each have differing workflows which require their own permissions and access.
Additionally, custom user types can be created with any combination of permissions.
This meant I had to create a solution that would look good and be functional for each user type whether they had access to everything in the tool or only one screen.
The Solution:
Comprehensively mapped out the existing user types
Designed and tested one cohesive nav bar that would be accessible and clear with any level of detail using a fifth “super user” to demonstrate a user with all permissions active
The Solution:
Comprehensively mapped out the existing user types
Designed and tested one cohesive nav bar that would be accessible and clear with any level of detail using a fifth “super user” to demonstrate a user with all permissions active
Modal Redesign
Modal Redesign
In this example, you can see a modal where a user can choose recipients and share a case.
Due to timeline and technical limitations, there was always a give and take on features like this, but I was still able to push for some key improvements beyond the updated styling:
Conversion of case info into a table format since multiple cases can be selected and shared
Separation of age and gender in the table for easier visual scanning
Action-oriented CTA label (“Share” in place of “Done”)
Substitution of better search functionality in place of single filter (in accordance with research findings)
In this example, you can see a modal where a user can choose recipients and share a case.
Due to timeline and technical limitations, there was always a give and take on features like this, but I was still able to push for some key improvements beyond the updated styling:
Conversion of case info into a table format since multiple cases can be selected and shared
Separation of age and gender in the table for easier visual scanning
Action-oriented CTA label (“Share” in place of “Done”)
Substitution of better search functionality in place of single filter (in accordance with research findings)
Data Table Search Functionality
Data Table Search Functionality
This example actually covers a few features, but at a high-level, I was redesigning the “Case List” where pathologists and other users could see the patient cases that were assigned to them.
This was a vital redesign as it is essentially the pathologist’s guide as they are working.
Due to time and budget restrictions, I had to make my recommendations in a phased approach with a “Phase 1” being the MVP design fixing the biggest pain points and “Phase 2” being an ideal state that would fall further down the backlog.
This example actually covers a few features, but at a high-level, I was redesigning the “Case List” where pathologists and other users could see the patient cases that were assigned to them.
This was a vital redesign as it is essentially the pathologist’s guide as they are working.
Due to time and budget restrictions, I had to make my recommendations in a phased approach with a “Phase 1” being the MVP design fixing the biggest pain points and “Phase 2” being an ideal state that would fall further down the backlog.
The Problems
The Problems
Filter Functionality
The previous format relied heavily on “custom filters”which were simultaneously overcomplicated and lacking functionality.
ex. a user had to type the name of the tissue type they wanted to filter for and could only use one filter at any given time
Column structure
The hierarchy of columns and their contents made little sense to the user
Icons were used to indicate attachments and reports linked to the case but were not clickable
Multiple tables for one data type
Cases with different statuses were kept in separate tables and difficult to search
If a case was assigned, it could be found in the assigned table UNLESS it was marked urgent. Then it would not be in the assigned table, but in the URGENT table.
Filter Functionality
The previous format relied heavily on “custom filters”which were simultaneously overcomplicated and lacking in functionality.
Example: A user had to type the name of the tissue type they wanted to filter for and could only use one filter at any given time
Column structure
The hierarchy of columns and their contents made little sense to the user
Icons were used to indicate attachments and reports linked to the case but were not clickable
Multiple tables for one data type
Cases with different statuses were kept in separate tables and difficult to search
If a case was assigned, it could be found in the assigned table UNLESS it was marked urgent. Then it would not be in the assigned table, but in the URGENT table.
The Solutions
Simplified Filters with more capable Searching
In my research, I found that if a user is looking for a specific case, they can find it without any filters.
In reality, searching is the most flexible form of filtering and when it works properly, it’s often the easiest.
Filtering is only used when a user is looking for a specific SET of cases or if they don’t know the case they want.
As a result, I simplified the filters to preset options that tied to specific use cases such as dates or assigned pathologists
Cleaned up columns with working links
I simplified the columns to show only the data that was needed according to my research
I changed the attachment icon to be clickable so users can view case attachments straight from the list
Proposed a One-Table Solution
Why have 7 different tables for different case statuses when they could all be in the same case and filtered?
Example: Archived cases had their own table.
Based on my research, I found that it would make more sense to set “archived” as a status and simply have it off by default so a user sees a simplified table with the information they want, but they can show archived cases with one click.
Simplified Filters with more capable Searching
In my research, I found that if a user is looking for a specific case, they can find it without any filters. In reality, searching is the most flexible form of filtering and when it works properly, it’s often the easiest.
Filtering is only used when a user is looking for a specific SET of cases or if they don’t know the case they want. As a result, I simplified the filters to preset options that tied to specific use cases such as dates or assigned pathologists
Cleaned up columns with working links
I simplified the columns to show only the data that was needed according to my research
I changed the attachment icon to be clickable so users can view case attachments straight from the list
Proposed a One-Table Solution
Why have 7 different tables for different case statuses when they could all be in the same case and filtered?
Example: Archived cases had their own table.
Based on my research, I found that it would make more sense to set “archived” as a status and simply have it off by default so a user sees a simplified table with the information they want, but they can show archived cases with one click.
Outcome
Outcome
This project was a success, resulting in a well-structured, user-friendly interface that aligns with Roche's goals and user needs. The project demonstrated my ability to navigate complex challenges, establish efficient design processes, and mentor team members for long-term success.
As a result of my contributions, I have been given increased responsibility and am now leading the design of the UI for Roche's entire suite of staining instruments. This project highlights my capability to lead large-scale design initiatives and foster collaboration within teams.
This project was a success, resulting in a well-structured, user-friendly interface that aligns with Roche's goals and user needs. The project demonstrated my ability to navigate complex challenges, establish efficient design processes, and mentor team members for long-term success.
As a result of my contributions, I have been given increased responsibility and am now leading the design of the UI for Roche's entire suite of staining instruments. This project highlights my capability to lead large-scale design initiatives and foster collaboration within teams.
Conclusion
Conclusion
This project exemplifies my ability to address complex UX challenges, implement structured design processes, and mentor team members effectively.
By leveraging strategic design principles, fostering collaboration, and incorporating user feedback, I contributed to the project's success and prepared the Roche team for continued progress.
My role in this project has led to expanded responsibilities, highlighting my capability to lead significant design initiatives.
This project exemplifies my ability to address complex UX challenges, implement structured design processes, and mentor team members effectively.
By leveraging strategic design principles, fostering collaboration, and incorporating user feedback, I contributed to the project's success and prepared the Roche team for continued progress.
My role in this project has led to expanded responsibilities, highlighting my capability to lead significant design initiatives.
Thanks for checking out my work!
So, where do we go from here?
Thanks for checking out my work!
So, where do we go from here?