Imprivata
Imprivata
Imprivata
CASE STUDY · 5 MIN READ
CASE STUDY · 5 MIN READ
CASE STUDY · 5 MIN READ
OVERVIEW
OVERVIEW
Imprivata’s design team conducted a comprehensive UI audit to lay the foundation for a unified design system across seven applications, spanning digital identity authentication and access management platforms. Siloed product teams with independent development cycles led to inconsistencies in branding, typography, styling, and UI components.
To address these inconsistencies, we evaluated existing interfaces and prototyped a unified header and navigation pattern, setting the stage for an organization-wide design system to enhance brand consistency, usability, and efficiency
Imprivata’s design team conducted a comprehensive UI audit to lay the foundation for a unified design system across seven applications, spanning digital identity authentication and access management platforms. Siloed product teams with independent development cycles led to inconsistencies in branding, typography, styling, and UI components.
To address these inconsistencies, we evaluated existing interfaces and prototyped a unified header and navigation pattern, setting the stage for an organization-wide design system to enhance brand consistency, usability, and efficiency
ROLE
ROLE
Product Designer
Product Designer
TIMELINE
TIMELINE
8 Weeks
8 Weeks
TEAM
TEAM
7 Product Designers
7 Product Designers
TAGS
TAGS
Desktop
Desktop
UI Design
UI Design
Design System
Design System
Constraints and Objectives
Constraints and Objectives
Constraints and Objectives
To begin establishing a scalable design system, we analyzed UI components across seven applications to identify inconsistencies impacting development efficiency and user experience. Working within a two month timeline, we sought to create a high-fidelity navigation and header prototype while accounting for siloed design systems, outdated app versions, and diverse device requirements.
To begin establishing a scalable design system, we analyzed UI components across seven applications to identify inconsistencies impacting development efficiency and user experience. Working within a two month timeline, we sought to create a high-fidelity navigation and header prototype while accounting for siloed design systems, outdated app versions, and diverse device requirements.
To begin establishing a scalable design system, we analyzed UI components across seven applications to identify inconsistencies impacting development efficiency and user experience. Working within a two month timeline, we sought to create a high-fidelity navigation and header prototype while accounting for siloed design systems, outdated app versions, and diverse device requirements.
Objectives
Objectives
Show how a design system can improve development time and CX.
Show how a design system can improve development time and CX.
Show how a design system can improve development time and CX.
Ensure clear navigation, progress visibility, and automatic saving.
Ensure a consistent UI, clear hierarchy, and user-friendly language.
Analyze components across 8 apps to identify gaps for the design system.
Analyze components across 8 apps to identify gaps for the design system.
Create a scalable Hi-fi navigation prototype to align applications.
Create a scalable Hi-fi navigation prototype to align applications.
Constraints
Constraints
Siloed UI kits, component libraries, and existing systems must be considered.
Siloed UI kits, component libraries, and existing systems must be considered.
Siloed UI kits, component libraries, and existing systems must be considered.
Adherence to Microsoft Fluent Design System and Windows fat client UI.
Adherence to the constraints of Xamarin.Forms and SyncFusion.
Diverse devices and local outdated app versions must be considered.
Diverse devices and local outdated app versions must be considered.
Two month timeline to present hi-fi navigation and header prototypes.
Two month timeline to present hi-fi navigation and header prototypes.
Header and Navigation Audit
Header and Navigation Audit
Header and Navigation Audit
Recognizing inconsistencies across UI components and branding within Imprivata’s seven applications, our team decided that auditing the current navigation and header structure was the most effective first step. This UI audit laid the groundwork for designing a uniform, recognizable, and flexible navigation and header component that aimed to enhance usability across the entire product suite.
Recognizing inconsistencies across UI components and branding within Imprivata’s seven applications, our team decided that auditing the current navigation and header structure was the most effective first step. This UI audit laid the groundwork for designing a uniform, recognizable, and flexible navigation and header component that aimed to enhance usability across the entire product suite.
Recognizing inconsistencies across UI components and branding within Imprivata’s seven applications, our team decided that auditing the current navigation and header structure was the most effective first step. This UI audit laid the groundwork for designing a uniform, recognizable, and flexible navigation and header component that aimed to enhance usability across the entire product suite.
Audit Findings
Audit Findings
Audit Findings
After compiling the findings of our audit, the team decided upon two main categories, "Must Have" and "Nice to Have," based on identified UI patterns across the seven applications. Most notably, the proposed navigation and header redesign would need to accommodate vertical and horizontal layouts while also supporting sub navigation and core features such as profile functionality.
After compiling the findings of our audit, the team decided upon two main categories, "Must Have" and "Nice to Have," based on identified UI patterns across the seven applications. Most notably, the proposed navigation and header redesign would need to accommodate vertical and horizontal layouts while also supporting sub navigation and core features such as profile functionality.
After compiling the findings of our audit, the team decided upon two main categories, "Must Have" and "Nice to Have," based on identified UI patterns across the seven applications. Most notably, the proposed navigation and header redesign would need to accommodate vertical and horizontal layouts while also supporting sub navigation and core features such as profile functionality.
Must Have
Must Have
Critical for navigation
Horizontal/Vertical nav support
Horizontal/Vertical nav support
Horizontal/Vertical nav support
Navigation item pseudostates
Navigation item pseudostates
Navigation item pseudostates
Logo and product name
Logo and product name
Logo and product name
Sub navigation support
Sub navigation support
Sub navigation support
Profile (log in/log out)
Profile (log in/log out)
Profile (log in/log out)
Notifications CTA
Notifications CTA
Notifications CTA
Settings CTA
Settings CTA
Settings CTA
Nice to have
Nice to have
Useful for navigation
Useful for navigation
Future Imprivata dashboard CTA
Future Imprivata dashboard CTA
Future Imprivata dashboard CTA
Togglable glyphs for nav items
Togglable glyphs for nav items
Togglable glyphs for nav items
Help CTA
Help CTA
Help CTA
Initial Wireframes
Initial Wireframes
Initial Wireframes
With these findings in mind, the team created low and mid fidelity wireframes show casing the structure and placement of each crucial navigation and header item, as well as, their corresponding pseudostates.
With these findings in mind, the team created low and mid fidelity wireframes show casing the structure and placement of each crucial navigation and header item, as well as, their corresponding pseudostates.
With these findings in mind, the team created low and mid fidelity wireframes show casing the structure and placement of each crucial navigation and header item, as well as, their corresponding pseudostates.
High-Fi Prototype
High-Fi Prototype
High-Fi Prototype
At the end of our two month sprint, our team presented a styled high fidelity prototype of our proposed navigation and header patterns to lead engineers and product managers across multiple products with the goal of iterating on our design in preparation for a companywide presentation at HIMSS Global Health Conference & Exhibition later that year.
At the end of our two month sprint, our team presented a styled high fidelity prototype of our proposed navigation and header patterns to lead engineers and product managers across multiple products with the goal of iterating on our design in preparation for a companywide presentation at HIMSS Global Health Conference & Exhibition later that year.
At the end of our two month sprint, our team presented a styled high fidelity prototype of our proposed navigation and header patterns to lead engineers and product managers across multiple products with the goal of iterating on our design in preparation for a companywide presentation at HIMSS Global Health Conference & Exhibition later that year.
Next Steps
Next Steps
Align with Front-End Development
Align with Front-End Development
Collaborate with developers to consolidate component libraries and ensure design system alignment.
Collaborate with developers to consolidate component libraries and ensure design system alignment.
Define Edge Cases
Define Edge Cases
Work with PMs and engineers to identify edge cases the new navigation may not address.
Work with PMs and engineers to identify edge cases the new navigation may not address.
Define Implementation Guidelines
Define Implementation Guidelines
Establish clear timelines with product managers across teams for design system adoption and integration.
Establish clear timelines with product managers across teams for design system adoption and integration.
Key Takeaways
Key Takeaways
Build Trust Across Teams
Build Trust Across Teams
Foster transparency and shared ownership early with product teams to reduce friction, and ease change.
Foster transparency and shared ownership early with product teams to reduce friction, and ease change.
Prioritize High-Impact Patterns
Prioritize High-Impact Patterns
When fostering design system adoption prioritize high use core patterns, such as, navigation.
When fostering design system adoption prioritize high use core patterns, such as, navigation.
Communicate Proactively
Communicate Proactively
Establish consistent communication with siloed teams early on to minimize misalignment and prevent delays.
Establish consistent communication with siloed teams early on to minimize misalignment and prevent delays.