Covering Healthcare with Umbrella Health

Umbrella Health pursues the ideal healthcare experience for both patients and practitioners through best practice medicine and innovative tech enabled medical centres.

Structuring Umbrella’s Design System

With Umbrella’s growing network of clinics and their ambitious product roadmap, I introduced a sub-system approach to allow for improved organisation and scalability.

Each of Umbrella’s clinics had to adapt to differences in services, sub-branding, and features to best serve their patient and practitioner needs. The sub-system approach gave Umbrella’s product team a more streamlined and organised way of designing their experiences. While Umbrella’s core brand and components were available by default, each design file could pick and choose which sub-system was relevant to that project (organised by clinic location, by platform, or by product).

The Foundations

The Foundations sub-system houses Umbrella’s most basic design decisions. These serve as the building blocks for more complex components.

Primitive design decisions like typography, colour, grids, layouts, and spacing are defined and documented within the Foundations sub-system. These are used globally across all of Umbrella’s digital experiences and help maintain a unified look and feel while leaving enough flexibility for their sub-brands.

Core Components

Just like LEGO, we take our primary building blocks and combine them to transform them into more complex components. Combine these components and you’ve built out an experience.

Design Tokens

Design tokens help define a shared language between design and development teams. Each token follows a set naming convention that communicates intention and scope.

Tokenising Umbrella’s design decisions helped future-proof their product design process by tackling two common problems product teams often face. First, it communicates a designers intention for their decisions, meaning there is no confusion of when and where a value is used. Second, design tokens are an abstraction layer; the naming convention creates a common language that can be used across any platform or implementation framework - making cross-platform development much easier.

Designed Mobile First

When it’s time to see a doctor, the last thing you need is the added stress of finding the time to sit at a computer and book an appointment.

When building Gumboot, responsive best practices were front of mind, making it easy to design across screen sizes and deliver the care patients need from the convenience of their devices.

Iteration at lightning speed

Gumboot allowed Umbrella’s product team to iterate on ideas quickly with confidence that their designs were on brand, consistent, and usable.

With Umbrella’s foundations and core components already documented, their team could focus on solutions for bigger problems. The product team were also able to explore different brand options - changing one value in the design system and having it roll-out to all parts of the experience instantly.

Dynamic Content Pages

With new clinics and services on their roadmap, Umbrella wanted a way to easily create new pages that not only looked good, but were also functional.

I made sure that I included content page specific components that allowed for design and content to be delivered seamlessly and harmoniously.

Gumboot in Action

Umbrella’s first project using Gumboot resulted in a complete overhaul of their website which introduced new ways to see doctor availability at a glance, and easily book an appointment.

All Systems; Go!

Design systems have the power to transform typical product teams into a powerful design force.

When great teams are provided great tools, they’re set up to deliver magic. Design systems are a cheat code to take your product design to the next level.