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.

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

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

Design Language

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

CREATING A VISUAL INVENTORY

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.

Design Kit

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.

COLORS

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.

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

• 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.

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

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.

I kept legibility in mind when selecting the right fonts

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.

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.

Component Library

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

• 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)

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.