Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

uxindia
October 28, 2019

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

uxindia

October 28, 2019
Tweet

More Decks by uxindia

Other Decks in Design

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