DrChrono’s UI was inconsistent and lacked reusable components, resulting in fragmented user experiences, increased QA cycles, and redundant design and dev efforts. With plans to eventually merge into the newly unified EverHealth brand, there was an urgent need to systematize its interface patterns in a way that would future-proof the work and ease upcoming transitions.

‍

🛑 Low conversion rates: The site wasn’t effectively guiding visitors toward key actions.

🛑 Outdated site architecture: Content structure made navigation cumbersome.

🛑 Inconsistent branding: The design felt disconnected from EverHealth’s evolving identity.

🛑 Accessibility limitations: The site didn’t fully adhere to WCAG guidelines.

🛑 User journey friction: Visitors struggled to find relevant information quickly.

‍

✅ 60% increase in component reuse across product squads.

✅ 40% reduction in design-to-dev handoff time, thanks to tokenized specs & coded components.

✅ System set to fully integrates with EverHealth design foundations for a streamlined brand migration at a later date.

✅ Created a future-ready design system that balances brand fidelity and dev efficiency.

‍

‍

1. Conducted a UI Audit
I began by auditing the platform's visual and interaction patterns. This surfaced duplicate components, inconsistent spacing, and lack of adherence to accessibility standards.

2. Leveraged Existing Frameworks
Rather than reinvent the wheel, we adopted the Flowbite design system, a well-structured Tailwind-based UI kit, to speed up implementation. I customized and extended the system to match our needs, layering in a custom brand system that aligned with DrChrono’s identity and future EverHealth direction.

3. Built a Token-Based Foundation
We implemented design tokens to define our color palettes, typography, spacing, and elevation. This semantic system allowed for consistent UI construction and set the stage for easy theme-swapping when drchrono transitions to EverHealth branding.

4. Developed and Documented a Scalable Component Library
In Figma, I constructed a shared library of atomic components with built-in accessibility and variant support. I worked closely with engineering to ensure design-to-code alignment and provided robust documentation for usage and contribution.

5. Drove Cross-Team Buy-In
Through workshops, async walkthroughs, and design reviews, I helped onboard design and engineering teams to the new system. I also established governance processes to ensure consistency and long-term adoption.

‍

✅ Projecting a 7% increase in conversions by optimizing user flows.

✅ Improved navigation & user experience, reducing friction in key journeys.

✅ Stronger brand consistency with newly setup DrChrono Design System.

✅ WCAG-compliant pages, ensuring a more inclusive experience.

✅ Established a foundational design system for EverHealth’s upcoming website launch, leveraging DrChrono as a UX blueprint.

✅ Integrated tokenization to ensure the site’s design scalability and flexibility, enabling a seamless transition from DrChrono to EverHealth with consistency across future updates.

The system is now positioned to scale across the entire EverHealth product suite. With design tokens and a shared foundation, we’re well-equipped to switch themes, introduce dark mode, or roll out future brand changes without major rebuilds—saving time and reducing tech/design debt.

This project not only improved DrChrono’s website performance and accessibility but also laid the groundwork for EverHealth’s digital presence. By creating a scalable design system using variable Tokens and creating a unified UX framework, the site redesign ensures a seamless transition as EverHealth continues to evolve.