Modernizing an Enterprise Design System Web UI
As Vizient rolled out a new design system, I led redesign of the web UI serving as the primary access point for developers and teams. I created clean, scalable visual styles under tight timelines that allowed for faster development.
I designed the web UI to translate the updated brand into a consistent foundation for 250+ developers and product team members across marketing, web, and SaaS products.
Timeline
10/25–12/25
Role
Lead UI Designer
Outdated System Homepage
The homepage acted as the primary entry point, but struggled to surface key resources and guide users effectively.
Weak Visual Hierachy
Important content and actions compete for attention, making the page difficult to scan.
Poor Content Prioritization
Critical resources, actions, and workflows lack emphasis, reducing efficiency.
High Cognitive Load
Dense content and minimal prioritization force users to process too much information at once.
Fragmented Component Library
As the library expanded, inconsistent organization made components harder to discover and compare.
Information Overload
Large component lists create a cluttered experience that is difficult to scan and navigate.
Limited Guidance & Feedback
Interaction states, active context, and user progress are not clearly communicated.
Weak Visual Structure
Inconsistent emphasis and static layouts make important information harder to find.
Shallow Component Documentation
Component pages provided examples and specifications, but offered limited guidance on usage, behavior, and best practices.
Disorganized Structure
Components are grouped inconsistently, making variations and relationships difficult to understand.
Limited Guidance & Feedback
Provides basic examples but lacks clear usage recommendations and best practices.
Inefficient Navigation
Missing in-page navigation and persistent UI elements make documentation harder to browse.
My Approach
Due to the tight timeline, I started with a competitive analysis of established design systems like Polaris, Fluent, and Atlassian to understand how to approach the UI before anything else.
The competitive analysis revealed that the strongest design systems relied on clear component documentation, consistent visual patterns, and well-structured content to create cohesive and scalable experiences.
Constraints
Tight Timeline
We had to implement the new design direction while the rebrand was actively rolling out across the company/marketing.
Frontend Gaps
Engineers on the design system team had limited frontend/UI experience≥
Solutions
Phased Rollout
We shipped in phases aligned to release cycles, starting with competitive analysis and iterating based on feedback.
Reusable Patterns
We created flexible, reusable layout templates to speed up development and ensure consistency.
Phase one launched on schedule with minimal development issues thanks to early collaboration and layouts built around technical constraints.
The next iteration is already in progress, with more components, a code playground, and more interactive features on the way. Since launch it's been well received across the company and is now being used by over 250+ developers.
outcomes
The next iteration is already in progress, with more components, a code playground, and more interactive features on the way.
Patient Journey Tracking
Follow patients from intake through treatment
Clear Treatment Status
Quickly understand where patients are in the care.
Shared Patient Visibility
Keep patient information accessible across ter.
next
The next iteration is already in progress, with more components, a code playground, and more interactive features on the way.
Patient Journey Tracking
Follow patients from intake through treatment
Clear Treatment Status
Quickly understand where patients are in the care.
Shared Patient Visibility
Keep patient information accessible across ter.