Borne out of MIT, Samsara is the world's leading company in industrial Internet of Things (IoT). I was the first designer to be hired early senior year of college, then the second to join.

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 and route details page.

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.

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.

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. We used Storybook as a platform the engineers could use to preview React components, and get designer approval.