← Home
BEWATEC logo BEWATEC · Health 3 min read

ConnectedCare App Redesign & Design System Creation

Building a human-centered healthcare experience from the ground up.

Role
Lead Designer
Company
BEWATEC
Platform
iOS & Android
BEWATEC ConnectedCare app redesign
Problem

A fragmented experience with no product identity

The MVP app had no unified visual identity. The experience felt sterile and confusing — especially for patients navigating hospital stays who needed clarity and warmth, not friction.

Accessibility was a critical gap. WCAG violations, weak contrast ratios, and inconsistent typography made the app harder to use for patients who were already in vulnerable situations.

0
Unified visual identity in the MVP
WCAG
Violations across contrast and typography
Brand Work

Defining the tone before touching the UI

Before any design decisions, we ran a brand survey with key stakeholders to align on values, tone, and personality. Healthcare design requires emotional intentionality — every word and visual choice carries weight.

  • Tone: Clear, caring, simple.
  • Values: Empathy, support, structure, dignity.
  • Personality: Human-first, respectful, emotionally intelligent.
  • Voice: Clear, inclusive, human-centered — never clinical or cold.
Design Goals

A clear framework before a single pixel

  1. Establish a unified visual identity grounded in the brand values
  2. Achieve WCAG-compliant contrast across all UI surfaces
  3. Build a scalable design system with full dev handoff documentation
  4. Bring warmth and clarity to the patient onboarding experience
  5. Replace inconsistency with a coherent typographic and color system
  6. Create an illustration language that educates and reassures
Design System

An atomic system built to scale

Grid & Spacing

4px grid agreed with engineering — a shared foundation that made design-to-dev handoff predictable and frictionless.

Color Palette

46-tone color system with WCAG-compliant contrast ratios. Every token was tested for accessibility before use in production.

Typography

Clear font hierarchy with reusable typographic styles. Consistent scale across mobile breakpoints for all patient-facing content.

Iconography & Illustrations

Consistent stroke icon system with semantic meaning, plus a full illustration library for onboarding, education, and emotional support moments.

Results

Measurable impact for patients and hospitals

+30%
Patient downloads in the first 6 months
+20%
Hospital NPS after redesign
4.4
App Store rating post-launch
Reflection
Design systems are living organisms, not static assets. Visual clarity is healthcare clarity — every UI decision has emotional impact. Scalability requires humility, not just craft. Building from zero within a regulated, legacy-heavy space taught me to balance vision, reality, and advocacy — while staying user-centered above all.