Working with

Design System
The Next Normal for Designers

Stevanus Christopel
OVO Design Team
Today’s Menu

Why..

What..

and briefly.. How..

Why..
 >115M Devices
2017, >550k Merchants
OVO start to operate.
>490k MSMEs
373 Cities
2019
We’re the largest digital payments
platform and Indonesia’s 1st
Fintech Unicorn.
 Largest Modern Retail acceptance
>407 malls, >550,000 merchants

Fastest growing
#1 Ecommerce
Food Delivery
Platform GrabFood
Tokopedia

Widest Traditional
Retail coverage
>490,000 merchants

Digital payments
• Airtime credits
• Electricity
• Insurance
• P2P
#1 Ride hailing platform Long tail • Telco/Tv/Internet
Grab Car, Bike & Express use cases

Parking Donation Deals Bills Cinema University

We faced several challenges
Collaboration Gap

Miscommunications at different pace

between designers & developers.
Slow Delivery

Many redundancies in the process,

meanwhile we have to deliver it fast!
Inconsistent Design

Team's getting bigger, each of them

have their unique visual approaches.
 at this stage,

Fast Design High Consistent

Process Quality Experience

How might we
accelerate our design process
to support the rapid growth?

How might we
drive consistent experience
as open platform across all touchpoints?
“Do NOT create solutions
for problems that you
don’t have.”
from Brad Frost’s Atomic Design - Chapter 4.
from Brad Frost’s Atomic Design - Chapter 4.
from Brad Frost’s Atomic Design - Chapter 4.
“You can’t innovate on products
without first innovating the way
you build them.”

-Alex Schleifer, Airbnb

Remember!

Find the problem first as the WHY,

then define the success.
What..
Design System is

a collection of reusable components,

guided by clear standards,
that can be assembled together
to build any number of applications.
designbetter.co - invision

Illustration by Maria Gregoriou

The Nature Living

of Design
collection
Broadly
accepted

System.
Design Guidelines
as source of truth

Collaborative
artifact
 Design Value & Principles

Common Design Kit

Design System
Code Library
Artifacts
ToV + Glossary

Case Studies

Collaboration Platform
Examples
Examples
Examples
Examples
briefly.. How..
The Process

Define Design Deploy

Define
 Define Phase

Team Model

Team Model by Nathan Curtis Cyclical Team Model by Jina Bolton.

Define Phase

Tools

UI Pattern Library Hands-Off Documentation

Meh~ Cool!

�� ��
Define Phase

Design Value
What users will perceive on our
products through the design. It will
maintain creative integrity of
business strategic vision.
 1 2
Define Phase

Design Value
Workshop
People across divisions from
several levels define it together to
get rich & multi-perspective views.
Brainstorming Attributes Yes & No
Write down some positive or negative attributes, Divide all attributes into Yes & No, where “Yes”
triggered by pictures comparison, while not means “this word could be used to describe our
thinking about our company yet. design”, and “No” means the same.

3 4

Affinity Diagram Distill into Values

Group similar/relevant words together and give it Choose or find new word to unite items on each
a name for both “Yes” and “No”. group. Make max. 4 items.
Ref:A Lightweight Branding Exercise
for Startups by Bruno Berger
Design
Deploy
Design Token
Working with the System
“A design system is NOT a project.
It’s a product serving products.”

-Nathan Curtis, EightShapes

 Bonus!

Getting Buy-in
Last Words
“We’re not designing pages,
we’re designing systems of
components.”

-Stephen Hay
Thank You.
And let’s discuss..
Follow our Instagram @ovo.dsgn