Leeann Sheely

Design    ҉  Direction

JioSaavn 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.

Design Director

We 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 understood that prioritizing a design system was imperative to the product's scalability.

What is a design system? In the most simple terms, it is 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 door 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. 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 it may be, from the correct spacing or font style, to button styles and beyond.

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, all present and up to date from the collaborative system.

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 our product.

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

  • Team collaboration 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. It's a great example of painting the back of the fence. Doing the hard and sometimes tedious work of setting up an organized structure makes the quality of the product design speak for itself.

Rulers Out

Direction & Design:
Leeann Sheely


Clint Balcom
Fahm Sikder