As part of Koala's digital transformation project in 2021, we created and documented a brand new design system to help our Tech team manage the Koala website across 3 international markets.

The goal was to develop a robust foundation that's scalable and flexible through the creation of reusable components and to ensure future flexibility in the CMS for content authoring. Also, to create a consistent visual language, accelerate the design process and enable collaboration between teams across the entire business.

MY ROLE

Working in a team of 3 other product designers, we all contributed to create a centralised design system.

I was tasked with developing the brand foundations, creating elements and components for the Koala website. My daily tasks included maintaining the master Figma file, authoring UI documentation, providing work streams with design reviews and support, and working closely with devs/engineers.

Post digital transformation, I am constantly adding new and updating existing components while enforcing visual consistency across the Koala website using our design system.

DELIVERABLES

Documentation
Brand Guidelines
Foundation Elements
Component Library
Page Templates
Design File Consolidation

Component Prioritisation

Before we started working on the Design System, several workshops were conducted to help align Tech team members around key website pages, purchase flows, component requirements and terminology.

Using an Impact/Effort Matrix, we prioritised the components to serve both the engineering team and design team efforts. Components and elements were labelled P1, P2 or P3, with P1 being the most important to be developed first, P2 to follow and P3 at the end of the backlog.

Design System File Structure

The complexity of Koala's design system meant the foundations, elements and components were categorised into 5 pages:

1. Foundations
2. Functional Components (F)
3. Global Components (G)
4. Content Components (C)
5. Elemental Components (E)

Example of how the Koala design system file is structured.

Foundations

Foundations in the Koala Design System are the visual elements that work globally across Australia, Japan and South Korea’s websites that every component, page and prototype is built on. This includes:

• Colour Palette
• Typography
• Aspect Ratio
• Grid System & Layouts
• Spacing Rules
• Logos, iconography and Koala illustrations

Colour Palette, Typography & Grid System Foundations

Component Library

Our component library consists of a large collection of reusable interface elements grouped by their purpose in the Design System file. Throughout the design system we reference different component types: Functional, Global, Content and Elemental. It was important to clearly define the differences between each component class so that the designers, engineers and content authors were able to design and build pages efficiently and accurately.

Functional Components (F)
All components that have more back end connections

Global Components (G)
Components that tie the site together holistically like navigation, footer and breadcrumbs

Content Components (C)
All components for rich story telling

Elemental Components (E)
Design elements like buttons, links, radio buttons, checkboxes

Content Components allow flexibility for the Koala Marketing team and Content Authors to build engaging pages

We created variations of each component at multiple breakpoints for the best responsive experience

We considered every action, state and interaction for each Elemental Component such as Buttons

Patterns & Templates

Being an online e-commerce store, we needed to have readily available patterns and templates that we could use to sell our products and address user needs. These were designed to be used by our Marketing team, Content Authors and Designers to understand flows, how content will look and help ensure consistency across experiences.

Example of our Category Page templates showcasing Koala products

Governance & Documentation

Working closely with the Project Managers, Engineers and Content Authors - the UX team utilised Confluence to document our Brand Guidelines, Figma designs, design requirements and accessibility requirements of all the components in our design system. We knew this would be crucial to the success and future sustainability of our design system.

Our Confluence space is extensively documented to provide the best cross-team collaboration

Thoughts & Next Steps

Having the opportunity to create and contribute to a global design system of this magnitude and complexity has provided me with valuable experience and knowledge when it comes to building a strong and scalable design system from scratch. Working with a world-class Tech team we designed and built over 400 components (and growing)!

As of May 2022, as Koala expands into more markets and categories, we have started to think about how we can best optimise our design system to support the design process and business growth by looking into creating a library of tools, resources and documentation rather than a single design system file.