Umbrella: Design System

What is a Design System?

A design system is a collection of reusable components, guided by clear standards. These components are designed to be assembled into brand-consistent User Interfaces. The design system unites our products around a common visual language, it reduces design debt and accelerates the design and development of new products and features.

At Avira we provide customers with security software to keep them protected. It is important to build interfaces that deliver a clear and professional image of our company. Our software should be considerate and usable to help our customers achieve their goals.

Why did we create it?

A "Design System" is a robust guide and inventory of components, styles, colors, grids, navigation schemes, accessibility standards, and when to use them. Working efficiently in a team throughout design files and working effectively with developers, all starts with design systems. Design systems make realizing a product easier.

Today's design software makes using a design system easy by enabling one to create components and define color & typography styles. These can be deployed through the file. Master components and styles allow one to make mass changes. If a header changes or a color needs to be different, these changes can ripple through one's file.

Design systems become really handy when they match the developers framework. Using a design system that matches a dev framework makes it easier for everyone to know where and when to use a component.

My Role

I led the design system initiative from the start of Avira Spotlight. We had to create a solution which can be used by the product team but also scalable for the marketing team. This is important to have a single tone of voice and look and feel across multiple touch points. I made sure this is addressed right from the start.

From auditing the existing components to researching the available design systems in the market and their pros and cons, this was quite extensive. I helped list out components, plan the timeline and discuss progress with stakeholders.

Once the way ahead was finalised, together with our team, we started working on shaping the design system. Every symbol and color is thoughtfully picked and tested for usability and contrast. Together with the developers and product owners, we planned for implementation in multiple phases to have quantitative data to be sure.

Before we start

At Avira we provide customers with security software to keep them protected. It is important to build interfaces that deliver a clear and professional image of our company. Our software should be considerate and usable to help our customers achieve their goals. Any design related task we have in hand needs to have its purpose and goal. We realised our design system is based on the following values. If we achieve these values, we were confident we created a good design system.

• Design Scalability
• Brand Consistency
• Minimize Design-Debt
• Built-In Accessibility
• Iterate and Prototype Faster
• Improved Usability

Accessibility

The user experience of our product or service must be friendly towards users using assistive devices and technology. Unlike usability, accessibility focuses on people with disabilities and impairments. Many users will face challenges due to demanding contexts. Designing for all ability levels means choice. All products should support all accessibility technologies of their platform.

Around 8% of people have some sort of sight deficiency. Test for accessible contrasts, colors, and sizes when designing user interfaces. While handling this issue, we need to make sure that the other 92% of our users still enjoy a beautifully designed solution.

• Include personas with varying abilities
• Have a link strategy (i.e., describe the link before inserting it)
• Offer transcriptions for audio resources, captions/subtitles for video
• Add enough color contrast
• Don't use color alone to make critical information understandable
• Design usable focus states
• Use labels or instructions with form fields and inputs
• Write useful alternative text for your images and other non-text content
• Support keyboard navigation
• Support platform/OS specific accessibility technologies

Usability

In Umbrella design system, we highly value usability because it matters. If users cannot achieve their goals efficiently, effectively and in a satisfactory manner, they are likely to seek an alternative solution to reach their goals. And for websites and apps, alternative solutions are abundant. That is why we finalised on the three pillars below to structure our design system.

• Effectiveness: Users can complete their goals with a high level of accuracy.
• Efficiency: Users can finish tasks fast.
• Satisfaction: Users find the product visually pleasant.

'Design' the Design System

You don't start building a house without its foundation so the same thing applies to design systems. The foundation of a design system is your spacing and grid system. I feel like spacing and grids are some of the most overlooked elements when it comes to visual design but they can make a huge difference in the look and feel of a design.

For this project I went with an 8pt grid system that consists of a 12-column grid and an 8px baseline grid. For the spacing system I went with a rem-based guide that aligns with the 8px grid. The reason why I went with an 8pt system is to help the design system be more responsive because all of the top screen sizes are divisible by 8 on at least one axis. This is important as it will help prevent anti-aliasing.

Symbols and Components

Avira's symbols and components are based on a larger vision of the product which is ever expanding and growing many folds. Our symbols are not only simple and neat but functional. Design systems are complex, but making clear rules and defining them in a clear and easy way for the developers to understand and implement with minimal or no help is the key to our successful design system.

The Umbrella Design System builds on top of the operating system. Our buttons come from the Operating System. On Windows our buttons look like Windows 10, but are custom elements; on macOS they are macOS native UI components. On Web we use the custom elements we use on Windows.

Icons and Illustrations

The Avira feature icons have been uniquely created to build a greater brand consistency. The master files are pixel-perfect files; the icon suite can be applied across all digital platforms for all necessary applications. The examples below illustrate some of the principles that have been considered to reflect the Avira brand. When implementing, please ensure you use the correct size version to maximise clarity.

To enable greater flexibility with Avira's brand assets, the feature and product icons can be modified to create illustrations that best represent the message and content. It is important that the illustration elements derive from our master icon set. However, there may be instances that original assets have to be created to help build stories.

To help build these illustrations into compositions there are some basic principles which provide layers of complexity and depth. The below guidance explains these established principles and of course these can be optimised using animation and applying to other content such as infographics when required.

Motion

Motion in the Umbrella design system is based on 5 pillars: Direction, Duration, Interaction, Response and Transition. Understanding what these pillars are and how they can help users interact is key to achieving a responsive UI.

It is essential to achieve 60fps or more in any animation. Motion at lower fps levels makes the application look stuck and unresponsive. To achieve this target, use OS-level APIs to ensure the use of hardware-accelerated animations. If necessary, simplify the animation. A great start is to avoid rendering fonts in every single frame; try to only animate simple shapes. Animating text will almost always lead to a bad user experience at low frame rates.