Vyond Design System

How might we enable designer, engineers and product owners to build more consistent Vyond products?

cover_3-1
vyond_logo_case

I worked with another UI designer at Vyond (formerly GoAnimate) to create a universal design and documentation system that enable the teams to collaborate more effectively and ensures design consistency.

TEAM

Head of Design
UI Designers
UX Designers
Engineers

RESPONSIBILITIES

UI Design
Research

The Context

When I joined GoAnimate in 2012, it was still a startup company. There were no style guides, Sketch files, nor guidelines. Nothing.  I realized I had to start from scratch. I came up with a style guide to maintain the consistency of the website and revamped the Video Maker's look and feel so that at least it looked more professional. However, as our product range continued to expand and more features were released, we realized what we needed was more than a style guide.

BEFORE AND AFTER

The Problems

In 2017, we started to rebuild the Flash-based Video Maker to HTML5. When designing the Video Maker, we became aware of some internal problems:

KEY PAIN POINTS

01   Designs were custom-built and not reusable
02   UI lacked consistency
03   UI, UX designers, and engineers had their own versions of UI components
04   Video Maker and Vyond.com website followed two different sets of styles

40 shades of greys in the colour palette
40 shades of greys in the colour palette
Early Video Maker
Early Video Maker- With both horizontal and vertical navigation bars. Trays and modal dialogs covered all sides of the Video Maker

Research 

MARKET RESEARCH

How to create a design system for a growing web application? I researched on design systems laid out by Google, Atlassian, Lonely Planet, Airbnb and Marvel Studio. I tried to understand why they work well for their organizations. 

Google's Material Design
Google's Material Design
Atlassian Design
Atlassian Design
IBM’s Carbon Made design systems
IBM’s Carbon Made design systems

UI Audit

With the help of another UI designer, we worked on defining a design system. I began to capture every UI element in the Video Maker as well as the video listing page, then we categorized them. 

The Atomic Approach

THE ATOMIC APPROACH 

The structure of the design system is based on the Atomic Design principle pioneered by Brad Frost. Drawing inspirations from chemistry, the principle provides a hierarchical way of describing UI components.

ELEMENTS

Basic building blocks in a UI

COMPONENTS

Formed by combining the elements

STYLES

A style defines the look. Examples include typography, colour palette, illustrations and icons. 

TEMPLATES

Generic page layouts put together by elements and components

ELEMENTS
Elements2
COMPONENTS
Components3
Block3
STYLES
Style2
SPECIFICATIONS FOR INPUT FIELD
Specification3

Specifications

COVERING ALL STATES

Each component was clearly defined with all “states” in the system. For example, a form input can have one of the following states: placeholder, hover, focus, filled out, error, and disabled. Having all states defined saved a lot of time when designing wireframing and prototypes.

Ideally, my goal was to create a live website that documented all the patterns, usage guidelines, examples, and centralized codes; However, due to limitation of time and resources, I simply started with Google drive, PDF and XD prototypes.

UI KIT USING SKETCH
A common UI kit was created in Sketch for designers to use. They can quickly construct layouts and flows using consistent pre-made, editable and flexible Sketch symbols.
UI kit in Sketch- Designers could quickly construct layouts and flows using pre-made and editable Sketch symbols.

Discussion on Components

CONSISTENTCY & ALIGNMENT

One of the goals of the design system was to get designers, engineers and product managers to speak the same language. We held workshops and tried to come up with consistent naming conventions that could be applied to both design and code.

naming2

Learnings 

01 INCREASE IN EFFICIENCY

In the beginning, there was some resistance to create a unified design system, as extra time and effort were required. 

Over time the benefits started to emerge. With a design system, I found that I was able to create hi-fi mock-ups faster. UX designers could focus more on thinking about the user experience and problem-solving, but not on re-designing the UI over and over.  It also improved communication with engineers.

02 SAY "NO" TO THINGS

Being a UI designer means being a gatekeeper to the product's design system. There were times when designers needed to be creative and experiment with new interactions and patterns; However, most of the time we should use what the design system offers and reduce the amount of unnecessary design debts created. Failing to do so means either the system fails or the team not understanding the game rules. This is challenging, and as a designer I value creativity and uniqueness, yet we need to strike a balance when working on product development.  

03 THINGS I WISH I CAN DO BETTER

It is always a challenge to connect the product team with the design system.

How to get other teams informed and excited about the design system? How to get design and code in sync? How to update changes made in the components? When to summit component change in the sprint?

I think a practical design system cannot just live in a vacuum; it requires collaboration between designers and developers. 

© 2021 Joyce Wong