LOADING
Blogs
G
Blogs
EEE
You need a design system not after you scale, but to scale
Design System
3
MINs read
Rahul Gonsalves

A few years ago, on the edge of an evolution, Swiggy was caught between a rock and a hard place. They had a visionary roadmap for the suite of convenience-related services they would come to be known for, but lacked a system that could enable this scale swiftly and exponentially. Developers and designers, operating at an unprecedented level of scale and quality, were experiencing painful handshake processes which delayed feature roll-outs. 

But today, Swiggy is stable, steady, and the frontrunner in all things convenience, from food and groceries to couriers and small business products. They’re a verb in their own right: just Swiggy it.

The catalyst for this metamorphosis was the Swiggy Design System, built with support from Obvious. Their extensive component library and thorough documentation empowered them to both rapidly experiment with new categories and dream bigger and bolder. The design system enabled a clarity of thought that, according to Head of Design Srinath Rangamani, was “infinitely scalable and repeatable across different products”.

You need a design system sooner rather than later

We end up assuming that the scale of organisations like Swiggy — whether that means size or value — is what pushed them to build a design system. We also presume that it’s more sensible to get a product to a certain stage of completion first, before creating systems around it.

But that’s not necessarily the right way to do things. You don’t put up scaffolding after building a mansion, but to build one.

You don’t build a design system after you’ve become large. You need it to become large.

At its simplest, a design system enables design that leads to business value. That means ensuring that your design capital is no longer squandered on trying to make five buttons across 50 screens designed by different people look and feel consistent. Instead, it’s spent on rapid experimentation and understanding the market. After all, when you have a design system, the incremental costs of building new features reduce and time is on your side.

Creating time for design experiments that add business value

Take Gojek, for example. In 2015, the app had only four services. Today, it has more than 20 on-demand services — you can order food, a beauty treatment, or a chauffeur for a ride around town all within one super-app.

What sparked that kind of rapid growth? Their design system, Asphalt, which slashed their go-to-market time. Where GO-FOOD took six months to design, reusing its components helped them design GO-MART in just four weeks. GO-RIDE took eight months to redesign, but GO-SEND took an unbelievable two weeks.

The results were in: with a design system made up of reusable components, even a large and complex team like Gojek could go head to head with the likes of Uber and Grab, ship ready-to-go features in next to no time, and optimise the use of their design and dev teams’ creativity and skills. 

Experimentation is how small companies become giants.

Many of the biggest companies in the world didn’t make it big by sticking to just one idea and rolling with it. They ran hundreds of experiments, testing and discarding week on week until they found the idea that just worked. Granted, many got there without design systems. But it’s a painful process, one that involves a lot of detours and time-consuming redos.

You don’t need a design system at the scale of Material or Polaris to immediately unlock business value — you just need a foundational one. Far from slowing you down or chewing into your team’s bandwidth, establishing this foundational design system standardises components your team has already built once, magically creating more time for explorations. In no time, you’ll see the needle on your speedometer pick up! 

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Link

Heading1

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading2

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading3

eadings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading4

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • List1
  • List2
  • List2
  1. OList1
  2. OList2
  3. Olist3
This is Alt Text
Caption Is Here

Category Text
Author name text
Author Destination Text
Category Text
MINs to read text
private static <T> T measureAndReport(
           final String methodName,
           final kotlin.jvm.functions.Function0<T> block
   ) {
       final long start = System.currentTimeMillis();
       final T result;
       $REPORTER_NAME$.begin("$CLASS_NAME$", start, methodName);
       result = block.invoke();

       $REPORTER_NAME$.end("$CLASS_NAME$", start, methodName);

       return result;
   }

Header1

Header2

Header3

Header4

Header5
Header6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  1. This is a list1
  2. This is a list2