Loading...
THE SPLASH SCREEN OF THE FINAL APPLICATION after the redesign and the whole design system execution

Patient Application

Creating a new brand and design system

When I joined ConnectedCare as Product Designer in late 2019, the mobile application had functional flows but lacked visual coherence and scalability. As the sole designer responsible for UI/UX strategy, I realised that having a foundational design system was critical before the product could scale.

Responsibilities:

  • UI design: Visual tone of voice, Interface design
  • Design system: Design principles, Component library and specs.
  • Creative direction: Illustration, Iconography
  • UX design: Redesign strategy and user flows

  • Company: BEWATEC GmbH
  • Role: Product Designer and Illustrator
  • Year: 2020

Strategic Assessment

I conducted a comprehensive audit of the existing application to assess visual consistency, accessibility compliance, and scalability:

Screenshots of the original status of the patient application

The analysis revealed issues such as unclear color palette, undefined brand identity, unjustified component variants, and multiple WCAG violations. These inconsistencies weren't just visual problems, they signaled a lack of systematic design thinking that would prevent the product and the business from scaling efficiently.

Analysis of the initial components and accessibility check

Additionally, I discovered that the core brand identity was dangerously undefined and inconsistent. To build an effective visual system with clear hierarchy and accessibility, I led discussions with Marketing to resolve brand inconsistencies and proposed unifying existing logo variations into a single, scalable identity.

Brand Research

Since design systems must first reflect clear brand values, I initiated cross-departmental research to align stakeholders on identity and voice. I facilitated a brand survey with Marketing, Product, and Engineering to define our values, personality, and communication principles.

Answer to the brand questionnaire organised in a excel sheet for better analysis

The survey revealed three main brand principles: 

  1. Be direct: Simple and easy to understand for end users.
  2. Focus on the human side: Emphasize patients over technical features. 
  3. Maintain consistency: Harmonious experience across all platforms.

However, the existing brand didn't reflect these principles, so, with the Marketing team’s approval, I defined our new brand foundation:

  • Values: We create calming, organized healthcare experiences. We believe everyone deserves accessible health assistance, placing support, guidance, and comfort at the center of our work to make healthcare simple and transparent.
  • Personality: Approachable, caring, and easy to talk to without being boring or pretentious. We help patients organize their hospital stay so they feel reassured, empowered, and comfortable.
  • Voice: Transparent, helpful, and reliable. We communicate in a natural, comforting, and clear way while maintaining respectful formality. We're neutral and open-minded, never judging based on gender, ethnicity, or religion.

Rebranding

With brand values approved, I led the logo redesign respecting all business requirements to maintain brand recognition. I developed and presented three different concepts to stakeholders, explaining how each of them aligned with our brand principles.

Visual presentation of the new application brand and look

The chosen brand consisted of two elements: the logotype (ConnectedCare wordmark) and the logomark (iconic symbol). It respected existing equity while establishing a modern, scalable visual identity.

Since most of ConnectedCare’s application were using the Mulish font family, I reused it for the logotype. Its geometric characters and rounded shapes brought softness to the brand.

The new logomark played with the letter C to create a pattern resembling a health cross with a warm and approachable personality. The design emphasized our commitment to enhancing medical experiences while unifying health forces and stakeholders on one platform.

Design System Creation

I built the technical foundation of the System by aligning with engineering on an 8-point grid system (4px base unit), a decision that would govern all future design work and ensure design-development consistency. This early technical alignment prevented costly misalignment and enabled efficient component development.

The typography system used multiples of 4 for line-height, allowing text boxes to align perfectly to the 4px grid.

A collection of 4 text hierarchy styles defined to provide users with zoomed in views

I expanded the color palette to include system colors for notifications, alerts, and errors, creating a spectrum from 800 (darkest) to 0 (white) shades and tints.

Preview of the color system including primary and secondary colors

I developed 46 tones with unique names to prevent confusion and created a comprehensive color guide addressing accessibility and contrast requirements.

A table showing the color contrast check following the WCAG guidelines

The application was still quite simple and it didn't require an extensive component library initially. However, I designed the most crucial components to make the app feel unique and fully branded.

A collection of some of the most important components designed in this project. The components are all organised by categories and structured by variants.

I also generated an illustration library to convey complex healthcare concepts quickly and support patient understanding.

Demo of all the illustrations used in the app along with rules and exmalpes on how to use them

Team Guidance

After working solo for six months, I recognized the importance of preventing myself from becoming a bottleneck. To enable the team to use and extend the system independently, I:

  • Created comprehensive documentation across Figma, Zeplin, Zeroheight, Slack, and Confluence, giving developers and stakeholders free access to the system
  • Conducted onboarding sessions with new designers so they could take ownership and extend the system without my direct involvement
  • Facilitated training sessions with the development team to ensure consistent implementation

Implementation

Creating the design system and adjusting the entire app happened synchronously. I often jumped back and forth between the app and the system to ensure both things were functioning well. So, it took some time to get things up and running, but after three months we were ready for the release. I should admit that it took up to 6 months to really feel like the design system and the app were truly coming to life, but we were making progresses very fast.

Screenshots of the old application contrasted with the new designs
Screenshots of the old application contrasted with the new designs
Collection of more app shots

The system continued maturing over six months as we learned from real-world usage and made improvements. During my time on the team, I continuously improved the UX. If you're interested in how that process evolved, see this related project.

Results

After six months, ConnectedCare had a fully operational design system that transformed how we built products. My work introduced a new brand identity, visual standards, and a full component library that enabled efficient feature development for the following years.

Metrics:

  • Launched a fully redesigned app to iOS App Store within six months
  • The design system supported 3+ years of continuous product development
  • Enabled the team to ship major features without system overhaul
  • Aligned cross-functional stakeholders on brand strategy and visual direction

Project conclusions

Building this system taught me that custom design systems require dedicated resources and executive buy-in. While we launched successfully in three months, maintaining the system became a full-time responsibility. I now advocate early for dedicated systems roles or evaluate whether existing frameworks better serve business needs. The decision should be strategic, not aspirational.

This experience revealed how product strategy shapes design system decisions. ConnectedCare's late pivot from iOS-only to cross-platform required significant rework. I now push for platform decisions during discovery, ensuring design systems are built with the right scope from day one. Strategic alignment early prevents expensive pivots later.

Design systems require ongoing governance, documentation, and evangelism. I belive that establishing contribution models, office hours, and automated checks could have helped scale adoption without creating bottlenecks because a successful design system is as much about process as pixels.

This project taught me to quantify design system impact beyond aesthetics. I now know that metrics such as component reuse rates, design-to-development time, accessibility compliance, and brand consistency scores can justify the continued investment on a Design System and demonstrate design's strategic value to leadership.

Related Projects