← Back to home



Samsara


Context

Borne out of MIT, Samsara is the world's leading company in industrial Internet of Things (IoT). I was the second designer at Series A in 2017 and are preparing to IPO in 2021.

I led design efforts for the core Fleet, Routing/Dispatch, and products. The Samsara Design System bridges all its software solutions, essential for a company that focuses on the interconnectedness of its suite of IoT products. This was especially important at a stage where the company and design team were growing rapidly.

One of the product areas I worked on at Samsara was the routing platform, which was designed for fleet managers to monitor where their truckers are going, and make sure their drivers are getting to their customers on time. Below is a GIF of the fleet manager routing dashboard.



Defining Principles

This interface was not possible without a design system. Previously, there was no visual hierarchy. Another designer, Hang, and I collaborated to define principles that would ground the decisions that go into building the foundations of our design system.



Laying out the Cards

My initial approach was to do an audit of the current components. Through my audit, it was evident that content cards would easily introduce visual hierarchy to our designs. I wrote a usage statement, some examples of how and where we would use these content cards, and listed out a few variables such as drag/drop functionality.



Setting the Grid

After some explorations, I was deciding between a 12col grid and a 6col grid. I decided to go for a 6col grid because Samsara was already an informationally complex product, and people can normally process not more than three pieces of information at a time. I felt that introducing more than three content cards per row in a 12col grid was overkill, so I opted for a 6col grid. I proposed a guideline that would ensure that none of the pages would have more than three cards per row.



Documentation

Lastly, I documented the changes that needed to happen, including max-width differences. I discussed an implementation strategy with the engineers, with which we would have new engineers and interns introduce a grid to our pages as a starter task. I introduced Storybook as a platform the engineers could use to preview React components, and get designer approval.