Leeann Sheely

Leadership & Design


Creating a product design system.

JioSaavn – Design System

For designers, design systems are like the alphabet. Each letter with it's own defined role, can become part of something much larger, without straying from consistency. I.e. design systems facilitate and encourage scalability.


I raked through the new, the old and the ugly, to bring together a system that could be used, maintained, and easily updated internally to make the addition or modification of new features, pages or products a piece of cake.

Collaboration & Consistency

As our product grew from a small startup to a globally used music app by millions, we realized that prioritizing a design system was imperitive to the product's scalability. It was time to buck up and get out our rulers. No more eyeballin' it.

What is a design system? In the most simple terms, it's basically a design team's cheat sheet. It defines all of the things that make a product recognizable.

With a great design system, adding a new feature to a product is much less of a UI project than a UX project. It gives designers the chance to focus on valuing the evolution of the feature and the experience it provides the user, while ensuring consistency in the visual identity of the product.

It is important to point out that design systems shouldn't be written in ink. The point is not to limit a designer's creativity. Rather to open the floor for a collaborative document that can be tracked and maintained by the entire group. There's an awesome new shadow style we'd like to use? Great, let's update the design system so that all shadows use it, consistently.

The Meat & Potatoes

The JioSaavn design system is built to promote a collaborative design environment. It was built in Adobe XD as a collaborative document. Any time a change is made, or there is a new addition, the change reflects for everyone who is a part of the collaborative document. This ensures that new designs are consistently using aspects of the system as exciting or mundane as the correct spacing, font, or button styles.

Like most successful design systems, we set up a base structure with simple design templates that includes: Typography, Colors, Iconography, Components, Imagery, Spacing, Content Structure, etc.

These items serve as the building blocks to any new product design, whether it be a new feature, updated page, or new product.

With the building blocks in place, creating a new page, for example, is as simple as grabbing the correct component from the design system, and dropping it into place on a new design. Building the page element by element, from a sidebar of options, all present and up to date from the collaborative system.

The program works in a way that any new design can use the design system to grab components from, all placed and categorized conveniently in a sidebar. Like a drag and drop website builder, but totally custom to your product. This is starting to sound like an Adobe pitch. But, it's pretty great.

We have a clear bias towards having a design system to work from. Here are some of the KPIs ours has afforded us so far:

  • Team collaboration has created a harmonious culture within our team.
  • Productivity is heightened effortlessly.
  • A much more scalable product.
  • A healthy dose of accountability, and thus, purpose.

While always facilitating for gray, rather than black and white, a set of guidelines helps teams measure their work in terms that aren't usually so possible as designers. All it takes, is painting the back of the fence.