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

LINE Design System : making LINE Product faster without losing consistency

LINE Design System : making LINE Product faster without losing consistency

Jungyoung Lee (Jake)
LINE Plus Product Design 5 Lead Product Designer
https://linedevday.linecorp.com/jp/2019/sessions/A2-2

LINE DevDay 2019

November 21, 2019
Tweet

More Decks by LINE DevDay 2019

Other Decks in Technology

Transcript

  1. 2019 DevDay
    LINE Design System : Making LINE
    Product Faster Without Losing
    Consistency
    > Jungyoung Lee (Jake)
    > LINE Plus Product Design 5 Lead Product Designer

    View full-size slide

  2. LINE Design System
    > Jung Young Lee / LDS TF

    View full-size slide

  3. Evolution of Design Guidelines
    !
    Chaos..!
    Photoshop
    Still just documents
    No feedback loop
    Hard to edit
    Sketch
    URL Document
    Feedback Comment
    Asset Automation
    Component
    Code Sync
    Consistency
    Reusability
    Efficiency
    Document
    Guidelines
    Zeplin
    Guidelines
    Design
    System
    No
    Guidelines

    View full-size slide

  4. Flipped Concept
    Design Guideline…? System Design

    View full-size slide

  5. Element Component Page
    Avatar Friend List Friends Tab
    Basic Structure of Design System

    View full-size slide

  6. > Can decide on UX flow decision faster
    > Can focus on more business goals
    Planners
    Expected Result
    Designers
    > Can improve design consistency
    > Can improve productivity of design work
    Developers
    > Can concentrate on core logic
    > Can improve UI efficiently and consistently
    > Can decrease cost of QA
    > Can reduce project size

    View full-size slide

  7. First Release

    View full-size slide

  8. Today
    News, Timeline, Pay, Video Call, Story, AR Games, Group, Open Chat, Cryptocurrency… a lot more than before.

    View full-size slide

  9. Expanding Office
    KR
    JP
    TW
    TH ID

    View full-size slide

  10. Expanding Office
    KR
    JP
    TW
    TH ID
    “Hi, I am a newbie.
    Where are the design guidelines?”

    View full-size slide

  11. Internal Research
    > Conducted research with every designer in LINE
    > To find out what makes LINE designers special
    > To get their expectations about the design system
    > To visualize the gap between their design criteria and the company’s criteria

    View full-size slide

  12. Creative Task
    10%
    Coffee
    7%
    Wiki
    10%
    Slack
    5%
    LINE
    6%
    Email
    9%
    Meetings
    15%
    Repetitive task
    37%
    Redundant
    Work
    Screen Capture
    Draw Wireframe
    Design Button, Illustration
    Develop same feature several times
    Etc.

    View full-size slide

  13. Which Share icon is the latest one?
    Inconsistency in Icons

    View full-size slide

  14. Inconsistency in Color
    500+ Distinct Color Values

    View full-size slide

  15. Unexpected Green Color

    View full-size slide

  16. Inconsistency in UX
    Various Type of Tab

    View full-size slide

  17. > A lot of repeated work
    > Inconsistency of design resources
    > Inconsistency of UX
    > No centralized design management
    Problems

    View full-size slide

  18. Regular Work
    Can be improved by LDS
    70%
    Focus on Impact, New opportunity and
    Standout Features
    30%
    Work Efficiently and Get Extra Time
    To Focus on More Important Things

    View full-size slide

  19. Ultimately, Design System Can Make the
    Process Shorter
    KickOff
    KickOff
    Wireframe
    Wire
    Prototype
    Proto
    Spec Fix
    Spec
    Design Fix
    Design
    Dev
    Dev
    QA
    QA
    Relesase
    Relesase
    !

    View full-size slide

  20. Principles Color Iconography
    UX Guideline UI Component
    1
    6 Principles you should
    keep in mind when you make
    LINE Product
    Common color library
    with consistent label
    160 crafted icons
    with general use
    Design and code synced
    reusable component
    Best UX Suggestions for
    common flows in LINE
    LINE Design System

    View full-size slide

  21. Clear Primary Task
    We≠Users
    Chat First
    Reliable Design
    Continuous Experience
    Respect for Legacy
    DOUBT YOUR GUT FEELING. ALWAYS STUDY THE USERS’ EXPECTATIONS AND PATTERNS.
    USERS WANT TO ‘USE’ OUR APP. SO MAKE IT CLEAR.
    LINE STARTED OUT AS A MESSENGER. AND IT STILL IS.
    CONSIDER THE EXPERIENCE OF CONNECTED SCREENS.
    THINK TWICE WHEN CHANGING CURRENT DESIGNS.
    LINE IS PURSUING LONG-LASTING, TRUSTWORTHY AND EASY-TO-USE PRODUCTS.
    LINE
    Design
    Principles

    View full-size slide

  22. AS-IS: 500+ Colors

    View full-size slide

  23. TO-BE: 30 Colors

    View full-size slide

  24. With Variables
    LINE White
    #FFFFFF
    LINE Gray 600
    #B7B7B7
    LINE Navy 400
    #C8CFDC
    LINE Blue 400
    #96B2FF
    LINE Gray 100
    #FCFCFC
    LINE Gray 700
    #949494
    LINE Navy 500
    #98A0B3
    LINE Blue 500
    #638DFF
    LINE Gray 200
    #F5F5F5
    LINE Gray 800
    #777777
    LINE Navy 600
    #707991
    LINE Blue 600
    #4270ED
    LINE Gray 300
    #EFEFEF
    LINE Gray 900
    #555555
    LINE Navy 700
    #323B54
    LINE Blue 700
    #2F59CC
    LINE Gray 400
    #DFDFDF
    LINE Gray 900
    #303030
    LINE Navy 800
    #262F4A
    LINE Gray 500
    #C8C8C8
    LINE Black
    #000000
    LINE Navy 900
    #202A42

    View full-size slide

  25. LDS
    COLOR
    RAW COLOR
    VALUE


    Code Level Violation

    View full-size slide

  26. How to Support Dark Mode

    View full-size slide

  27. Theme Area
    Non-Theme Area
    Default
    Disney
    BT21
    Toy Story
    Pokémon
    Miffy
    Aladdin
    Light Mode
    Dark Mode

    View full-size slide

  28. Theme Area
    Non-Theme Area
    Default
    Disney
    BT21
    Toy Story
    Pokémon
    Miffy
    Aladdin
    Light Mode
    Semantic
    Dark Mode

    View full-size slide

  29. Semantic Colors

    View full-size slide

  30. Color System

    View full-size slide

  31. Minimum 11pt font Minimum 4.5:1 Contrast
    Accessibility

    View full-size slide

  32. Rainbow Colors

    View full-size slide

  33. Top Navigation Bottom Navigation Buttons Dialog
    List Empty Tab Card
    Message
    Modal
    Components

    View full-size slide

  34. Hangzhou
    Sakane Miiko
    Cologne
    Gaspar Antunes
    Hong Kong
    Valdemar Forsberg
    Bologna
    Carmelita Marsham
    Clinton
    Saami Al Samad
    Wallet
    News
    Timeline
    Chats
    Home
    Home
    9:41 AM
    Theme
    Sticker
    Services
    OA
    Friends
    Designers Can Make Simple Pages
    About 10x Faster Than Before
    It Only Took 2 Mins to
    Reproduce This Home Tab $

    View full-size slide

  35. LDS-
    Demo App

    View full-size slide

  36. INFORMATIVE DELIGHTFUL
    FEASIBLE CONSISTENT
    Interaction
    Principle

    View full-size slide

  37. LINE Spring Curve
    Define

    View full-size slide

  38. CODE SNIPPET SUPPORT
    FOR DEVELOPER

    View full-size slide

  39. Living Document

    View full-size slide