Dhairya Vora

Overview

As the foundational elements of a design system, grids and layouts were yet to be introduced into Smartsheet's new design system.

The design systems team at Smartsheet was gradually switching to a new and modern design system and this was a good opportunity to setup these foundational elements. Without grids, making decisions about where items should sit on the page, and maintaining visual consistency across multiple projects would be challenging. But to retrofit grids to already existing projects would be a major undertaking, thus these grids were initially targeted for the designers only.

What are Grids?

A grid is a system which helps us systematically organize content within a user interface (UI). And an organized UI helps establish a visual rhythm that helps users to smoothly navigate through the content. Moreover, these UIs also vary based on the different screen sizes (that users may be using) and have unique layouts as well.

Why do we need them?

For designers (like me), grids are valuable as they offer a good starting point for our designs and allows us to make design decisions based on a documented structure. Thus, by following these guidelines, design teams within an organization can create UIs which are consistent, efficient and cohesive across the organization.

Moreover, for the end-users (or customers) and for the business, these foundational elements are very helpful as they facilitate predictability while navigating, which fosters a sense of familiarity with the product and thus improves user retention.

My process

I broadly followed a dynamic process for this project, which was divided into phases and involved sub-steps to achieve the end goal.

Research and Analysis

I started off by taking inspiration from various existing design systems and how do they offer these foundational elements, understanding how do they differ and what are the unique aspects I should consider for our platform.

In-depth Platform Audit

In this phase, my goal was to develop an understanding of the overall Smartsheet UX and identify that are the matching UI patterns which can be established for the screens. This phase provided me answers to A LOT of questions, which helped clear ambiguity and proceed with a direction. Some of the questions were:

• How do designers currently design the screens?
• Are there any generalizable screens?
• Are there any layout constraints?
• Are there any technical constraints?
• and many more...

Collaborating and Validating

I find this phase to be the most important and fruitful as I got to interact with designers and engineers from 8 different UX teams. I understood how designers would use what I'm currently building, identified what my current work lacks and how might I better address their needs.

Addressing feedback and Shipping

With all the requirements gathered, initial work validated, and constraints identified, it was now time to bring everything together and ship these foundational elements. As part of the final deliverable, my work became an integral part of Smartsheet's Figma library and the usage guidelines (in the form of extensive documentation) are included in the internal design system website.

The impact of my work

Grids and layouts were shipped to 8 UX teams and are an integral part of Smartsheet's design system as the new foundational elements.

Increased design consistency

Designers from different teams have a common set of guidelines to follow, which will help them create consistent designs and help establish cohesive design practices across the organization.

Explore, ideate and ship faster

With these guidelines setup, designers know the design constraints beforehand which eliminates the need to spend a considerable amount of time identifying them.

Responsive viewport guidelines

Designers can now visually share their designs for different viewport sizes as well, making the cross-functional collaboration efficient.

Learnings and reflections

My internship at Smartsheet was the most fulfilling experience I've had, which exposed me to many different aspects of a design system.

Beyond setting up a design system

The design systems team was in the process of transitioning to a new design system, I got exposed to the best approaches of doing so. Moreover, this also helped me understand how to maintain a design system.

Leveraging systems thinking

Beign a part of the design systems team (consisting of Product Designers, Design Engineers and Product Managers) and collaborating with different UX teams, I got the opportunity to make systems level decisions for my project.

Working with tech constraints

I realized the importance of my prior experiences as a Software Engineer. I got direct opportunities to contribute code changes to our design system files and handling end-to-end processes right from the beginning.

Collaboration is the key

Working in a highly accountable team within the design org meant that every cross-functional UX partner's requirements are important. Thus, through strong collaboration we were able to ensure that.