UI Design

Design Systems

Accessibility

ENVISION Site Migration

Migrated a healthcare fundraising website to a new CMS while solving critical accessibility and functionality issues, establishing a scalable design system for future growth.

ROLE

Lead UI Designer

CLIENT

Sharp HealthCare Foundation

YEAR

2023

ENVISION fundraising website displayed on laptop and mobile device showing responsive design

01 – DISCOVERY

Understanding the Challenge

The Foundation's ENVISION fundraising site needed to migrate from Acquia to Contentful, our new content management system (CMS), to reduce annual licensing costs by $200K and enable faster updates. The timeline was compressed from 3 months to 2 months due to technical constraints.

Key issues discovered during audit:

Color contrast failures in form error states (WCAG non-compliant)
Photo gallery lacked scrolling and caption capabilities
Quote block layout broke at tablet/small desktop sizes (≥1024px breakpoint)
Video gallery limited to only 4 videos with poor mobile experience

Stark accessibility checker showing 4.34:1 contrast ratio failure next to ENVISION contact form with error messaging

Form error messaging failed WCAG contrast standards (4.34:1 ratio)

ENVISION quote block with overlapping content and improperly sized images at tablet breakpoint

Quote block layout broke at tablet/small desktop sizes (≥1024px) with images failing to resize properly

02 – DESIGN

Solving Problems While Migrating

Rather than simply recreating existing designs, I addressed critical issues while maintaining the site's established brand identity.

Key design improvements:

Photo gallery: Added scrolling, captions, and expanded viewing area
Quote block: Redesigned for responsive behavior across all screen sizes
Video gallery: Increased capacity to 8 videos, added YouTube thumbnail integration, improved mobile layout
Accessibility: Conducted site-wide color audit and updated error messaging and CTAs to meet WCAG standards
Design system: Documented all components in Figma and Notion for future scalability

Photo Gallery

Before

Photo gallery required clicking each thumbnail to view expanded — users must close and reopen to browse multiple images

Quote Block

Video Gallery

Before

Quote block layout broke at tablet and small desktop sizes (≥1024px) — images failed to resize properly, losing subject focus

Before

Video gallery limited to 4 videos with poor mobile experience and limited accessibility

03 – IMPLEMENTATION

Delivering Beyond Expectations

I collaborated closely with the development team through user acceptance testing, ensuring all components met design specifications and functional requirements.

Results:

Launched full site one month ahead of revised deadline
Delivered base migration plus backlog of enhancement requests
Created comprehensive design system documentation in Figma and Notion
Provided clear guidelines for Foundation team to maintain consistency

Figma design system showing ENVISION component specifications and variants for developer handoff

Design system components documented in Figma for developer handoff

Outcome

The ENVISION site launched successfully with improved usability, functionality, and accessibility across all devices. The fully responsive design ensured donors could engage with fundraising content seamlessly on mobile, tablet, and desktop – a critical improvement from the previous desktop-only experience.

VISIT LIVE SITE

$200K