Osmo Design System

Creating a cohesive, scalable design system

Creative Director

System Design, Brand

Over the past few years, the design team at Osmo has grown from 2 to 14 people. Over time, the design styles, elements, and interactions have become more fragmented and less cohesive as we work in parallel. One of my responsibilities as Creative Director was to build and drive the development of a scalable design system across the Osmo ecosystem - encompassing UI, Illustration, Voice and Tone, and Photo/Video.

 

In this process, I worked closely with stakeholders across the company - Product, Marketing, and our own design team. Collectively, we saw the benefits of a design system as: 

1. Maintain consistency and cohesion for a better user experience

2. Avoid repeatedly solving the same problems - design and build faster and at scale

 

Ultimately, a scalable design system would benefit our own team as well as create a more aligned, consistent experience for our users.

Auditing our existing system

We started the process by first auditing what we were currently doing. We took an inventory of the different usages of elements, illustrations, and language. Then by looking at everything collectively, we evaluated what was working and what needed to be improved.

CTA Audit

Various CTA styles existed across our interfaces. There was no consistency around color, stroke weight, spacing, capitalization or otherwise.

Illustration Audit

Our illustrations also varied greatly. Every time art was needed, our illustrators would make something new. There was no defining style across the brand.

Refining our foundation

Before the audit, we already had a basic foundation - colors, typography, sizing, and more. In the midst of our audit, we also refined these core elements, and used them as to align our work moving forward.

Developing the UI design system library

After the initial inventory and audit of UI elements - these were further categorized and developed. We actively eliminated usages that were redundant, and we narrowed or a core set of styles for individual elements. We then documented the development for internal usage in Sketch. This initial documentation has been shared across our design team, and we are currently in the midst of stress-testing the initial styles across platforms and products.

We also identified pages in addition to individual UI components to be standardized - such as our game settings screen. These pages are consistently present in our ecosystem by a specific user - kids.

Old game settings screen

New game settings screen

Developing a new voice and tone

In developing our design system, we examined not only the visual elements we use, but we also revisited the language we used as well. We developed a new voice and tone guide to bring the same consistency and coherence to our written communications to our users.

Developing a brand illustration style

Across the brand, our illustrations also lacked consistency and alignment. Every time new art was needed, artists would create a new style. To streamline our illustration process as well as to create a stronger, more aligned brand experience, we created a single brand illustration style - characterized by simple graphical elements and bold colors. We also created a system of tiered of illustrations  large (hero or pages), medium (scenes), and small (icons).