LOADING
Blogs
G
Blogs
EEE
Assemble, don’t build software
Design System
3
MINs read
Subhankar Das

Neha, a designer at a fintech app, designed the perfect button in just an hour. Everything is on point: the border radius, colour, padding and margin. She sends it off to engineering to be built. A week later, her product manager asks for the same button, but in a hover state. She complies. The week after, the same request rolls in, this time for a button in an active state.

This happens again and again, until Neha’s designed a variety of buttons for every conceivable background colour, interaction, intent, and state, and has lost six weeks to the process. This back-and-forth cost them precious time they could have spent on actually building features that add revenue. 

What went wrong here?

As a designer, I know it’s easy to get wrapped up in how a screen looks and feels. But having also had some overlaps with a product manager’s role, I understand that product teams are more focused on the business objectives, keen on running many experiments to see what wins instead of betting on just one solution that may or may not work. 

It can feel that a designer’s and a product manager’s natural tendencies are opposed to each other, when the truth is that they can be formidable allies. But there is one way of approaching design that can facilitate this collaboration, go beyond doing visual work and add business value. I’m calling it:

Business Value Design 

Some of the possible ways to frame business value design could include:

  • adding revenue to your topline
  • reducing churn
  • capturing a new market, or
  • making it easy to quickly pivot when there are changes in business direction

When you use business value design as a touchstone, you realise that building infinite buttons or finding the right hex code doesn’t add value. So what does? Experiments. Features. Agility. How do you get there without getting stuck splitting hairs? With a design system.

A “low effort, high returns” catalyst

Design systems are essentially an assembly of all the elements your team has previously designed, turned into reusable components. Instead of wasting time on redesigning each element for every new screen and feature, you can plug n’ play the relevant component and speed up the design process. 

In my experience, that leaves a lot of time for experimentation.

Imagine you have an idea for a feature and $100K. You could pay for a team of researchers who will conduct studies and present you with a report that you need more money to act on. Or, you could use that $100K to actually build the feature, launch it on your app, and have it validated or invalidated by the very market you want to capture. And if you already have a validated feature idea, you can jump straight into building it for a fraction of the cost. It’s pretty obvious what wins. 

An assembled library of reusable components—and, through that, experimentation— can also open doors to more opportunities, potential services and markets.

Just look at Booking.com. In 2017, they bumped up against an urgent need to change the way they worked and designed so they could build even faster. The solution was a design system that was not only rich and comprehensive, but also code-first and future-proof.

In just over a year, they were running a whopping 1,000 tests simultaneously using this design system. The scale of experimentation was such that no two people in the same location saw the same version of their home screen. They no longer had to guess at what customers want. Instead, they could assemble new features and test these rapidly, live, so customers could actually show them what they want.

With a solid design system, Booking.com could continuously stay ahead of the game and be an industry frontrunner while operating at the scale they’re at — and so can you. 

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