View's Design System

Building a design system from the ground up

Design System

01 / Background

During my co-op at View, a frontrunner in smart building technology, my mission was to work on the product team to build a design system from the ground up that incorporated View's updated branding and maintained a consistent look and feel across their products. Their current system was extremely outdated, not built to scale and had very limited documentation, so every component was up for interpretation. With over $2.3B in funding and thousands of customers, the stakes for this project were high.

* Due to my NDA I can’t show all the visuals of what I worked on, but contact me if you want to learn more!

02 / The Challenge

View lacked a consistent and recognizable design system. The use of stock material UI (MUI) resulted in an outdated and disjointed user experience that failed to reflect the company's brand identity. Developers would each decide which components they wanted to use which resulted in different looking date-pickers and hundreds of button styles.

By embarking on this project, the goal was to:

03 / The Approach

Getting Started

Building a design system from scratch for an organization this size was a daunting task. However, extensive research into other design systems and many endless discussions with the product teams helped me begin piecing it together. I want to give a huge shoutout to the Atlassian, IBM, Microsoft, and Salesforce design teams for their helpful system documentation. I couldn't have built this without you all :)

The journey began with auditing the existing system's atoms (typography, color, elevations, spacing) to identify gaps and create a roadmap to address them.

The audit revealed erratic grids and spacing across platforms, inconsistencies in colors, and 26 unique font styles (including 4 versions of the H3 heading style :/)

The Design Process

Based on the audit, it seemed I had me work cut out for me. Our approach was to first tackle the basic elements (atoms and molecules) and progressively handle complex ones (organisms, templates and pages). I paid special attention to:

The biggest challenges I faced during the design process were:

After months of hard work, the resulting design system included 5 colour palettes (2 main and 3 semantic), 12 type styles (a big improvement from the previous 26), consistent elevation and grid spacing guidelines, and 30+ responsive components.

Review & Documentation

The review process was crucial for this project since it would be rolled out to all products at a large scale. Bi-weekly design syncs with the dev and PM teams ensured a comprehensive review of all of the new atoms and molecules I had worked on.

To ensure longevity of the system, we opted for two methods of documentation. Firstly, we kept a detailed Figma document with all linked styles, so designers could quickly and easily add components right into their designs. Secondly, we integrated into Storybook - a tool that allows developers to create organized UI systems.

04 / Results

This project taught me a lot. It gave me the opportunity to collaborate closely with product & dev teams, hone my Figma skills (using variables and styles) and most importantly, it allowed me the freedom to study some of the greatest design systems out there. Learning about design system design from our team was truly an amazing experience, and I gained a huge appreciation for the value of having a robust design system. As a bonus, View's new design system has been well-received, bringing unity and scalability across all the platforms.

As we know, design is a never-ending process. Iteration is key to any good design, and this project is no exception.
Some of the team's next steps include:

Back to top