Getting to work

How others did it

I had built design systems in the past, but not to this size or scale. The creation of the Retail Web Design System (Medikit) had already started a few months back, I took the opportunity to sit with that team as they workshopped the Medikit Design System. This allowed me to glean some learnings from that team (the good/the bad/the ugly), but that was never going to be enough. I read medium articles, studied the guidelines and principles laid out by Atomic Design, Apple, Airbnb, and Atlassian, and searched for other designers who faced a similar challenge.

Gathering everything we already had

Without the existence of even a basic style guide, my next task was to inventory every UI element in My Medibank. I accessed various test environments and took screenshots of every page, modal, menu, and well everything in the application. Once I felt as though I had every UI element within My Medibank I then grouped them into relevant categories. Seeing a holistic side-by-side comparison told the story of just how much the application needed a design system. There were dozens of styles for very similar UI elements (buttons, forms, modals, input fields, messaging panels, etc).

Laying down the foundations

Crafting a design system for My Medibank wasn’t simply a case consolidating the existing UI elements, I had to take into that there would be shared UI elements between the My Medibank Design System, Retail Web Design System (Medikit) and in principle, the Medibank App Design System (Helix - kicking off 6-12 months later) would share elements.

Some of the common elements included typography, colour, grids and spacing. Applying this consistency across both systems was essential for the business and users. Users viewed/interacted with these elements as they browsed/purchased Medibank product(s), then they would interact with the same foundational elements in My Medibank, creating a more unified experience for our users.

The future is not known

There were many unique types of pages needing platform-specific solutions, some of these included:

• Updating their details
• Viewing policy information
• Making claims
• Viewing their limits

As the redesign of My Medibank and creation of the My Medibank design system ran in parallel, I didn’t have the luxury of redesigning the entire platform at once, the only way for us to build the system was one feature/page(s) at a time, I had to have one eye on the now and one eye on the future. This meant keeping in close communication with our team (development team/product/brand/senior executive team, etc) and the retail team to share how each of our platforms and design systems were and/or planned to evolve.

Compiling the library

I created a component library in a master file, initially in Sketch and later into Figma/Zeplin, which was referred to by design and development teams. When creating or iterating on designs I saw a massive productivity improvement, one day I was able to put together an entire flow (30+ screens) together in a few hours instead of days using the old designs. As the library evolved and became larger organisation became more important, especially as I started leading other designers and they started constructing layouts.

The solution

Introducing My Medibank’s first design system

Achieving the goals

Scalable and reusable codebase

All components were designed and developed with scalability in mind, minimising the potential for design/development rework and helping to keep the application as simple and intuitive as possible. This allowed the team to re-use existing code and to keep the code base as light as possible. Some of these examples are shown below:

Optimised typography system

Leveraging learnings from various best practice design systems I created a 4px vertical and an 8px horizontal grid to optimise line height, letter and paragraph spacing for increased legibility and readability.

Robust colour palette & accessibility

Working in conjunction with the Retail team, who were developing the Medikit design system, I created My Medibank colour palette. Careful consideration was given to these colours as they needed to meet AA accessibility ratings when appearing with copy (contrast levels). These colours were a subset of the Medikit colour palette and were later used in the Helix Design System (app), print, social, video advertising and internal presentations.

Accessible layout and components

Historically, Medibank’s digital products have not been very accessible. To make accessibility a higher priority Medibank committed to being AA compliant by 2024, and there is still a way to go. As a starting point for the My Medibank, I have incorporated focus order, alternative text for images and of course contrast ratios where text appears on a page.

Seeing the results

Over 15 months, as the product design lead on My Medibank, I was able to completely uplift the legacy design for all MVP pages.
You can see a few examples screens below:

Login and registration

Home

Payments

Me

Breaking it down

Cards - Primary and secondary

A selection of primary and secondary cards showing desktop and mobile variations that were used across numerous My Medibank pages.

Task-oriented pages

Within My Medibank there are a series of pages that users need for task-oriented scenarios, for example checking their limits and/or policy details, making a payment and/or claiming for a medical service they received. These pages had a similar page structure, giving users a sense of familiarity and allowing them to complete tasks quickly.