Creating a Design System foundation

Role: Product Designer

OVERVIEW

Thinking about interfaces simultaneously at the page/screen level and the UI component level, I fell into habits that improved the consistency of our UX. We started working much faster and more collaboratively. The design system was the solution.

RESPONSIBILITIES

Defined Visva's Design System and and evangelized it throughout the organization.

TIMELINE

August 2020 → In Progress

As with any product design process, I was creating it to fit into the workflow of users - other team members:

  • Other designers to define the visual elements of the system to ensure our system conforms to standards like WCAG

  • Fron-end developers create modular, efficient code

  • Content Strategists/Marketing who helped the team to maintain the voice and tone of the product

  • Product managers to ensure we are aligned with customer and business needs

In the early stages of the Visva redesign, I struggled with the new demands for the new visual brand language to be consistent across all platforms and simultaneously be flexible and adaptive. I approached it with a system and defined design patterns early on.

There are two types of interface inventories to be created:

  • An inventory of the visual attributes (such as spacing, color, and typography) will help us create a codified visual language

  • An inventory of each UI element (such as buttons, cards, and models) will help us create a UI library of components

CREATING A VISUAL INVENTORY

I ensured that the visual look gives product visitors a feel for the atmosphere and personality of the platform. That our product used the correct language and tone, making using the app relatable and enjoyable. That was important because Teens often complain that adults are out of touch and don't understand their situations.

Read more about designing for teenagers

Design Language

I analyzed the key screen of a redesigned product to see how many unique colors, font sizes, and font families I have. It was a great way to see where I could merge or remove some variety initially, not to blow the design out.

COLORS

I maintained the design kit in Sketch, creating the UI library for the design system. The kit comprises the components, styles, symbols, and visual/UX design. To maintain consistency, updates to the design kit are reflected in the component library, the code in the developer sandbox, and the documentation.

Design Kit

Colors I choose for the Visva design system are more than just an extension of the brand. The UI uses colors to convey:

Visva Design System includes two primary colors that represent the brand. Turquoise brand color works great as a link, and yellow is used as the primary button background. It makes it easier for users to recognize interactive elements and create a connection with the brand.

Also, I created Neutral pairs for general UI backgrounds and borders. I used design tokens to abstract the design properties I needed to manage. Design tokens are name and value pairs stored as data. With the values for all design tokens stored in one place, it’s easier to achieve consistency while reducing the burden of managing the design system.

To manage colors with accessibility in mind, I checked all colors in different modes to be sure we have enough contrast between colors that are usually there as a pair

And finally, we have colors for Vibes (representation of emotions). A color can be a helpful differentiation tool for a user. But it can be tricky to do while maintaining accessibility, as people who are color blind may not be able to discern some differences.

  • Feedback: Error and success states

  • Information: Charts, Graphs, and types of Reaction

  • Hierarchy: Showing structured order through color and typography

There are colors for states such as error, focus, warning, and success.

TYPOGRAPHY

As fonts have a high impact on the brand and user experience, I kept legibility in mind when selecting the right fonts. I decided to keep standard system fonts for text bodies San Francisco for iOS and Open Sans for Wed as they are familiar to the user’s eye and natively support dynamic font sizes to improve accessibility.

When selecting the size to set to the type, I like using 16px as it works with 4-based metrics used by Apple and Google. For larger and smaller font sizes for other elements, I used a modular scale where 16 is the base number and ratio to generate the following number.

To better reflect the brand, I chose a custom web font Poppins for the headings. I tried to keep the number of used fonts as low as possible, as it is not only a best practice of typographic design but also prevents performance issues caused by excessive use of web fonts.

I kept legibility in mind when selecting the right fonts

IMAGES

The Visva design system has two slightly different styles for icons. Utility and action icons (like settings, notifications, etc.) are SF Symbols Font 1 color icons, and brand-custom features are multicolored and more creative.

For the empty states, loading screens, modals, and other components that invite visual interest illustrations are a great way to add character to the product

I worked with a Graphic designer to produce unique illustrations for all the empty states of the Visva platform, with conveyed a strong sense of brand personality.

The center of a design system is the component library. I used Zeplin to set and communicate across teams building blocks for apps and webpages.

I divided the pieces into elements, components, regions, utilities, and so on, following Atomic Design as a conceptual model

Component Library

  • Atoms (or Elements) are small, stand-alone components like buttons and icons.

  • Molecules (or Components) – these are an assembly of small components into a larger component like a search form (which includes a form input, a button, and a search icon).

  • Organisms – these are an area of the UI like left-hand navigation.

  • Layouts – how the pieces are laid out on the page (like a header region, followed by a sidebar and main content area, followed by a footer)

Example of established layouts for post cells with different amounts of attached images

These pre-built components saved designers, developers, and QA professionals a lot of time, letting them focus on the overall goals of the build rather than the small details of creating each element.

Creating a design system helped my team produce a more consistent user experience and built a stronger bridge between design and development. By creating a common visual language codified through design tokens and a set of components and patterns cataloged in a UI library, I also gained fine-tuned control of the UI in a manageable, scalable, and robust way.