After launching a component-based redesign of DaVita’s 10,000+ page website, our digital team saw the need for a tool to improve consistency across products. I conducted research, defined strategy, and recommended creating a digital design system and component library. I then worked closely with a designer and developer to build and launch it, creating a single source of truth for the team.
The design system Guidelines section outlines best practices around accessibility, brand colors, and includes links out to other key resources such as our CMS Content Entry Guide.
Following a 2-year website overhaul with a third-party agency, including moving to a new tech stack, shifting all content to a new CMS system, and a brand refresh, our team faced a heavy backlog of internal client projects. We needed to address the backlog quickly, but designers and developers were constantly hunting for component details scattered across the site.
Our Objectives
Research & Discovery
I interviewed UI designers, developers, and 3 UX team leaders across DaVita to understand existing approaches. I learned teams were using everything from Confluence wikis to Storybook. Based on our small team size, existing toolset, and need for easy updates, we chose to build within our existing Content Management System (CMS).
I also drew inspiration from the book Expressive Design Systems by Yesenia Perez-Cruz, which shaped our foundational approach to creating a living, adaptable system.
Component Inventory & Content Creation
I led a Miro whiteboard exercise to inventory all existing components, then worked with teammates to categorize them and write descriptions. A small project team collaborated on documenting component capabilities and usage guidelines.
A visual component inventory created in Miro proved to be a useful resource, especially during the content creation phase.
Information Architecture & Navigation Design
The biggest challenge was organizing components into an intuitive navigation structure. I created wireframes testing different IA approaches, ultimately choosing an accordion menu pattern that made categories and sub-categories easy to see and navigate, which was key for a tool that our small, focused team uses daily.
Component Documentation Standards
Working closely with the interactive team, we established requirements for each component, including component title, description, visual example, and specifics outlining when to use, and when to consider alternatives.
Centralized Design Guidelines
Created a Guidelines section covering accessibility standards, brand colors, typography, and links to related resources like our CMS Content Entry Guide.
Comprehensive Component Library
Documented every component with visual examples, use cases, and best practices, eliminating the need to search through the live website for reference.
Scalable Documentation Structure
Built the system to accommodate growth, with clear categories and flexible content structure that allows for regular updates as components evolve.
Wireframe reflecting potential component categories in the navigation accordion menu.
This project taught me that design systems aren’t one-size-fits-all. They must be tailored to your tech stack, internal processes, and end users. I initially approached the work with assumptions about what a design system “should” include, but quickly realized our primary audience (designers and front-end developers) needed something closely aligned with their specific workflow.
Maintenance is an ongoing challenge. The most difficult part isn’t building the system, but is finding the capacity to keep it current as our components and design elements continuously evolve. Regular check-ins with design and development teams have been essential for gathering feedback to ensure ongoing content updates and design decisions make sense.
DaVita Interactive
Digital Design System Creation
Discovery, Stakeholder Interviews, Wireframes, Mockups, Content
