Dataset Studio Design System

In late 2024 I revisited a project from 2020-2021, Dataset Studio. This was a project I did with Andy Gough at Image Annotation AI. At the time I was Head of Design for his small ML focused startup. We created specialized annotated datasets for clients in spaces such as medicine, agriculture, retail, and so on. In 2024, I wanted to revisit this project in order to create a design system. I had a few goals for this project.

1) to update Dataset Studio with new features that would modernize the platform,
2) to create a design system with the new visual design, and
3) to use modern design system techniques such as Storybook and design tokens.

Reviewing Dataset Studio from 2020 which I sought to redesign, I noticed a few issues. One, the use of Material Design made it too indistinguishable from other Google products. Two, the use of whitespace was too abundant and created an empty feeling screen that was mostly white and lacked enough information density. Three, because the design of Dataset Studio in 2020 was so unique for this kind of product at the time, it used very unique patterns of interaction design that may be unexpected for the audience. While it is still a good design pattern for that product, I wanted to make a more standard product this time that would have room to expand with new features. 

During my research phase I learned about around 20 different design systems from Uber to Microsoft and everything in-between. Most of these I was also able to get a copy in Figma, and also took notes of their guideline sites. They had generally converged on a certain set of basic standards which were represented by a single Figma file and a Zeroheight or Storybook site. The Storybook sites, like in Uber’s case, I felt were the most effective since they showed guidelines and had interactivity built into it where I could interact with real web elements. For this project I did not use Material Design as a standard to try and achieve since that design system is so far beyond anything one single designer can achieve in a short period of time. Instead I wanted to make something functional and precise that could be encapsulated into a single Figma file and Storybook site.

The first thing I did was redesign the platform at an interaction design level to include social and community features, and a navigation that would be more predictable and easy to understand for users. As noted in Jakob’s law, users most like web interfaces that are already familiar to them because it reduces the amount of mental energy they need to expend to use it. So I incorporated some standard navigation patterns and used cards to display the information I wanted in the dashboard: community featured cards and then an overview of the user’s datasets and AI models.

I decided that the main deliverable for this project would be a single Figma file. Although it is possible to create a design system as a set of files or a set of projects, the scope of this project was smaller so I wanted to put it all in one file. This file would include change log, roadmap, styleguide, components, and guidelines for use. I put extra attention on the guidelines which discuss concepts such as corner radius matching and matching line height to optical alignment rather than bounding box alignment. The component library as well had variables and entry points for each variable to contain custom information. This would be easily scalable as needed to create more variations and dark and light mode etc.