Kick-off Calls: Key Takeaways

After a competitive analysis, we had several kick-off calls where we discussed the general design and visual langauge that we as an orgnization wanted to embrace. Over the course of these meetings, we looked at brainstorming ideas for a new home page that would essentially become the foundation for defining the initial design system. Besides the obvious, primary point of site-wide consistency, our key takeaways included: 1) A modernization of visual style though miminmalism 2) From a content style guide standpoint, an emphasis on heading typography and presentation, and 3) A more focused, and toned-down, usage of our brand color system (not only through CSS application, but through actual image assets).

A design system is crucial for any creative team (design, content or technical) since it becomes the source of truth for building interfaces and experiences. While most importantly it requires adoption and support, the system needs to also cover several essential categories for it to be successful.

Base Foundations

Covering the essentials: color, typography, grids, responsiveness and overall system usage.

Key UI Components

The common and basics of creating user interfaces. From buttons and links, to icons and pagination utilities, and forms elements.

Layout & Content Blocks

An extensive library containing numerous layout and content blocks for rapid page design in Figma. This section was key for consistency.

Component Variants

Component presentations were not the same in all cases, thus variations were made. In the library, designers can easily switch between the variants.

Responsive Thinking

Each top-level, global component was designed to take into consideration presentation in all common device types and their respective resolutions, in both portrait and landscape modes.

Image Style Guide

Since there was a strive for consistency, a new image style guide was created. This was co-managed with the in-house creative team to make sure all materials were visually in sync.