virtuwell — Case Study

01

The Problem

An outdated experience was eroding patient trust—and in healthcare, trust directly impacts outcomes.

virtuwell's patient interview was the heart of the service—where patients describe their symptoms and health history to receive a diagnosis. But the existing experience, built on Angular 1.6, had accumulated years of accessibility and usability debt. It felt cluttered, noisy, and difficult to focus on.

For patients already anxious about their health, this friction was more than an inconvenience. Many users simply didn't trust the platform enough to complete their interview—abandoning at critical moments when they should have been getting care.

🎯

Cluttered & Noisy Interface

The interview process felt overwhelming. Patients struggled to focus on accurately sharing their symptoms. Over-designed interactions and inconsistent layouts created cognitive overload at the worst possible moment.

♿

Accessibility Barriers

Custom form controls caused high maintenance and accessibility churn. Keyboard and assistive-technology users were blocked entirely—a critical failure for a healthcare platform that should serve everyone.

🔧

Engineering Fragility

Inconsistent layouts and spacing hurt scalability. Supporting multiple devices and browsers was increasingly fragile. Every fix risked breaking something else—slowing the team's ability to improve.

🚫 Abandoned interviews at critical moments

😰 Eroded patient trust and confidence

⚠️ Accessibility violations blocking users

02

My Role

Frontend Engineer — UX Engineering, Architecture & Implementation

I led the frontend modernization of virtuwell's patient interview experience and marketing pages. My focus was bridging design vision with engineering feasibility, implementing accessibility-first patterns, and building a scalable architecture that would serve patients for longevity.

Tools & Methods

🎨 Sketch

📐 SASS/SCSS

🏗️ 7-1 Architecture

📦 Bootstrap Grid

🔤 BEM Naming

♿ WCAG 2.1

UX Engineering Leadership

Bridged design and engineering from the earliest wireframes. Introduced a 12-column grid system to bring consistency and advocated for removing all custom form components in favor of visually styled native inputs—a decision that unlocked built-in accessibility.

Cross-Device Architecture

Owned responsive implementation across mobile, tablet, and desktop. Ensured reliable behavior across multiple iOS versions and Internet Explorer—critical for reaching patients on older devices. Accounting for retina screens, high-DPI displays, and varying network conditions, I optimized performance and visual fidelity across all devices.

Accessibility Champion

Led the shift from "fix accessibility later" to "design accessibility-first"—a major mindset shift for the team that paid dividends in reduced maintenance and better user experience for all patients.

03

Research & Insights

We combined quantitative and qualitative research to understand the depth of patient frustration and identify clear paths forward. The data painted a consistent picture: patients wanted simplicity, not creativity.

Google Analytics

User Feedback Audits

Accessibility Audits

Remote Usability Testing

In-Person Moderated Sessions

📊 Analytics Deep Dive

Google Analytics revealed where patients dropped off, which paths led to completion, and how behavior varied across devices. We mapped the entire interview funnel, identifying the exact moments where friction was costing us patients.

🌍 Remote & Global Testing

We conducted remote usability testing with users worldwide, watching real patients navigate the interview process. The diversity of devices, browsers, and contexts revealed issues we never would have found in a lab.

🎙️ In-Person Sessions

Local moderated sessions, recorded for deeper insight, gave us the nuanced feedback that numbers can't capture. We watched body language, heard sighs of frustration, and celebrated "aha" moments together.

"I just want to get care, not figure out a complicated form."

— Patient Research Participant

01

Speed and clarity over creativity. Patients didn't want clever interactions—they wanted to complete their interview quickly and confidently. Over-designed elements were causing abandoned interviews.

02

Progress visibility matters. Users wanted to know how far along they were and whether they could return later. The lack of progress indication created anxiety about losing their work.

03

Trust and security are paramount. When sharing sensitive health data, perceived security was just as important as actual security. The design needed to signal "your information is safe here."

04

Design & UX Engineering Approach

A minimalist, accessibility-first redesign built on native form controls

Design explored minimalist healthcare patterns, aiming for a premium but restrained experience. As the UX engineer, my focus was bridging design vision with engineering feasibility—and making a critical architectural decision that would shape everything.

We removed all custom form components in favor of visually styled native inputs. This single decision unlocked built-in accessibility, native mobile form controls, and dramatically lower maintenance. Instead of fighting the platform, we embraced it.

Key Design Decisions

📐

12-Column Grid System

Introduced a consistent grid system to bring order to chaos. Every element had a logical place, creating visual rhythm that reduced cognitive load.

✅

Native Form Controls

Replaced custom components with styled native inputs. This gave us built-in accessibility, mobile-optimized keyboards, and browser autocomplete—for free.

♿

Accessibility-First Design

Instead of fixing accessibility later, we designed for it from the start. Every component was keyboard-navigable and screen-reader friendly from day one.

🧘

Calm & Focused Layout

Stripped away visual noise. Generous whitespace, clear typography, and subtle color helped patients focus on what mattered: describing their symptoms.

📊

Progress Visibility

Clear progress indicators showed patients where they were in the interview. Combined with session caching, patients could leave and resume without losing work.

🛡️

Trust Signals

Added reviews/testimonials sections and clear HIPAA-compliant privacy messaging. Visual trust signals reinforced that patient data was protected.

05

Architecture That Lasts

Built for responsiveness, longevity, and maintainability across every device and browser.

7-1 SASS Architecture

I implemented the 7-1 SASS architecture pattern to organize variables, themes, utilities, and components. This created a single source of truth for design tokens—colors, typography, spacing—that the entire team could rely on.

The result: changes to the design system could be made in one place and cascade everywhere, eliminating inconsistency and reducing maintenance burden.

◆ abstracts/ Variables, mixins, functions

◆ base/ Reset, typography, animations

◆ components/ Buttons, cards, forms

◆ layout/ Grid, header, footer

◆ pages/ Page-specific styles

◆ themes/ Theme variations

◆ vendors/ Third-party styles

BEM + Custom Bootstrap Grid

BEM naming conventions kept components predictable and easy to debug. Combined with a custom Bootstrap-based framework built around our 12-column grid, the CSS was self-documenting and intuitive.

These systems ensured the UX could scale without regressions. New features could be added with confidence that they wouldn't break existing functionality.

◆ Block: .interview-form

◆ Element: .interview-form__question

◆ Modifier: .interview-form__question--required

Cross-Device & Browser Support

Responsiveness and longevity were non-negotiable. I owned the implementation across mobile, tablet, and desktop—ensuring reliable behavior across multiple iOS versions and even Internet Explorer.

In healthcare, you can't assume your users have the latest devices. Patients on older phones in rural areas deserve the same quality experience as those on the newest iPhone.

Patient Interview Process

See how the redesigned interview experience guides patients through sharing their symptoms with clarity and confidence.

06

Testing & Iteration

We tested in two complementary ways: remote scenario-based testing with users worldwide, and in-person moderated sessions recorded for deeper insight. Each round of feedback shaped the next iteration.

1

Remote Scenario Testing

Patients from diverse locations navigated realistic scenarios—"You woke up with a sore throat, find out if virtuwell can help." We watched where they stumbled, where they succeeded, and where they gave up.

2

In-Person Moderated Sessions

Local participants provided nuanced feedback that remote testing couldn't capture. Body language, tone of voice, and real-time follow-up questions gave us deeper understanding of patient needs.

3

Progress Caching Implementation

Feedback revealed patients wanted to leave and resume interviews. We implemented session caching so progress was never lost—a critical feature for patients who might be interrupted by symptoms.

4

Trust & Privacy Alignment

Continued alignment with HIPAA requirements and privacy expectations. Added reviews/testimonials to build first-time user trust—showing that real patients had positive experiences.

07

Final Outcome

The redesigned experience delivered measurable improvements across every metric that mattered.

The final experience was everything we'd worked toward: a calm, modern, and accessible interview flow with native, reliable interactions across every device. Clear progress indicators and reduced cognitive load meant patients could focus on what mattered—getting care.

+34%

Interview Completion

More patients completing their health interviews with confidence

4.8/5

Patient Satisfaction

Consistently high ratings from patients across all demographics

+21%

New Sign-ups

More first-time patients choosing virtuwell for their care

98%

Accessibility

Full WCAG 2.0 compliance across the entire interview flow

Simplifying the experience directly translated into measurable business and patient outcomes.
When patients trust the platform, they complete their interviews—and get the care they need.

"The new interview feels like talking to a real person. It's calm, clear, and I actually trust it with my health information."

— Patient Feedback Survey

08

Key Takeaways

This project reinforced principles I'll carry into every future role—lessons about simplicity, architecture, and what it means to build for real people with real needs.

🎯

Simplicity is a Strategy

Especially in healthcare. Patients don't want creativity—they want to get care. Every element we removed was a barrier we eliminated. The simplest solution was often the best solution.

🏗️

Architecture Enables UX Quality

The 7-1 SASS architecture and BEM naming weren't just engineering decisions—they enabled design consistency at scale. When the architecture is right, quality becomes sustainable.

♿

Accessibility-First Scales Better

Designing for accessibility from the start was easier and more maintainable than trying to retrofit it later. Native form controls gave us accessibility for free—a lesson in working with the platform, not against it.

🌉

UX Engineering Bridges Vision and Reality

Being embedded in design from day one meant fewer surprises during implementation. The best products happen when design and engineering are partners, not a handoff.

🤝

Trust is Built Through Consistency

Not novelty. Patients trusted the new experience because it was predictable, clear, and respected their time. Trust comes from reliability, not innovation for its own sake.

Looking Back

virtuwell taught me that the best healthcare technology gets out of the way. Our job wasn't to impress patients with clever interactions—it was to help them get care as quickly and confidently as possible.

I'm proud that the architecture we built lasted, that the accessibility-first approach set a new standard for the team, and that thousands of patients completed interviews they might have abandoned before. That's the kind of impact that matters.

Let's build something great together

Available for frontend engineering leadership roles where I can shape user experiences at scale.

Get in Touch LinkedIn GitHub