ICANotes EHR

Behavioral Health

Company

ICANotes

Product

Design System

Approach

Desktop

Framework

Angular

Platform

Web

Sharper, Smarter, Stronger: A Design System That Scales

đź”´ Pain Points

  • Inconsistent UI across modules led to a fragmented user experience.

  • No central source of truth between design and development teams.

  • Legacy Angular implementation made it difficult to scale components or enforce accessibility standards.

  • Branding felt outdated, giving clients a perception of low product maturity.

New Design

  • Ground-up build: Evaluated every component the app needed, then designed systematically rather than piecemeal.

  • Single source of truth: Created a Storyboard repository, housing reusable components for both designers and developers.

  • AA Accessibility standards: Ensured components met WCAG AA guidelines (contrast, sizing, interaction states).

  • Brand ownership: Infused brand colors and sharp visual language to create a recognizable identity.

  • Framework alignment: Built specifically within Angular, ensuring adoption and maintainability by dev teams.

The Impact

  • Consistency: Eliminated “UI drift” across modules.

  • Efficiency: Reduced development time when building new features.

  • Ownership: Both design and dev teams work from the same foundation, cutting back-and-forth.

  • Accessibility: Improved usability for all users, boosting compliance.

  • Modernization: Transformed ICANotes from “dated and difficult” to a modern, intuitive platform.