Building Design System for Managing Design Consistency and High-Functioning Team

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
www.ux-india.org/uxindia2019
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign

Transcript

1. View Slide

2. Building
   Design System
   for consistency & high-functioning team.
   Stevanus Christopel
   VP, Head of Design & UX at OVO
   

   View Slide

3. Rapid
   Business
   Growth
   Faster
   Product
   Delivery
   Faster
   Design
   Process
   Growth in Business & Design
   

   View Slide

4. Most of the time,
   business grow faster than design.
   Adding
   more
   designers
   Faster
   Design
   Process
   

   View Slide

5. 2017,
   We started to operate.
   2019
   We’re the largest digital
   payments platform in
   Indonesia.
   >115M Devices
   >300k Modern Merchants
   >200k Traditional Merchants
   >300 Cities
   Here’s OVO story...
   

   View Slide

6. Long tail
   use cases
   Largest Modern Retail acceptance
   >407 malls, >300,000 merchants
   #1 Ride hailing
   platform
   Grab Car, Bike
   & Express
   Widest
   Traditional Retail
   coverage
   >200,000 merchants
   Fastest growing
   Food Delivery
   GrabFood
   Digital payments
   • Airtime credits
   • Electricity
   • Insurance
   • P2P
   • Telco/Tv/Internet
   Parking Donation Deals Bills Cinema University
   #1 Ecommerce
   Platform
   Tokopedia
   at this stage,
   Fast
   Design
   Process
   High
   Quality
   Consistent
   Experience
   How might we
   drive consistent experience
   as open platform across all touchpoints?
   How might we
   accelerate our design process
   to support the rapid growth?
   

   View Slide

7. to answer the problem statement,
   Reusability
   Reduce
   Unnecessary
   Works
   Clarity
   Design System
   Automate
   Processes
   

   View Slide

8. What is
   Design System?
   Living collection of reusable design artifacts,
   guided with clear standards,
   to build consistent experience,
   in a most efficient way.
   Design Value & Principles
   Design Kit
   Code Library
   Copywriting Glossary
   Flow (UX) Pattern
   Collaboration Platform
   

   View Slide

9. How we build
   Design System?
   

   View Slide

10. 1.Top Level Support
    - Dedicated resources & team model to build it.
    - Pilot project.
    - Show impact using their language (time/cost benefit).
    - Product, not project.
    - Co-creation. Cyclical Team Model (Federated + Centralized)
    by Jina Bolton.
    

    View Slide

11. 2.Design Value and
    Principles
    - Value that our users will perceive on our product
    through the design.
    - Guidelines of how every design elements will evolve.
    - Build it together (inclusive).
    Human
    Alive
    Bright
    OVO’s Design Principles
    

    View Slide

12. 3.Design Audit
    Gather all inconsistent design artifacts.
    - Inconsistent UI element.
    - Inconsistent illustrations.
    - Inconsistent tone of voice.
    - Inconsistent flow.
    - etc.
    

    View Slide

13. 4.Define Standards
    - Define together (Design Pairing).
    - Use Atomic Design.
    - Must be self-described.
    - Find balance between consistency & flexibility.
    - Aligned name & variant across design kit & code
    library (use Design Token).
    - Don’t forget versioning (use semver, ex: 1.2.1).
    

    View Slide

14. 5.Measure the
    Implementation
    

    View Slide

15. 6.Define Collaboration
    Process
    - Well defined change request
    flow with SLA.
    - Weekly alignment
    (Engineering, Product,
    Design).
    - Communication Channel.
    

    View Slide

16. Ravier Design System
    by OVO Design
    

    View Slide

17. What’s the impact?
    ● Reuse instead of re-create.
    ● Automated decision making.
    ● Focus on problem solving.
    ● Faster discussion with
    engineers.
    Fast
    Design
    Process
    ● Almost 0 repeated mistakes.
    ● Fix once, runs everywhere.
    ● Smaller app size.
    ● Easier to test.
    High
    Quality
    ● Less user confusion & learning
    curve.
    ● Higher recognition on all
    touchpoints.
    ● Trusted by users.
    Consistent
    Experience
    

    View Slide

18. “We’re not designing pages,
    we’re designing systems of
    components.”
    Stephen Hay
    Top Level Support
    Design Value & Principles
    Design Audit
    Define Standards
    Measure the Implementation
    Define Collaboration Process
    Summary
    

    View Slide

19. Thank You..
    Any Questions?
    Follow our Instagram - @ovo.dsgn
    Stevanus Christopel
    VP, Head of Design & UX at OVO
    

    View Slide