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

Be4518b119b8eb017625e0ead20f8fe7?s=128

LINE DevDay 2019

November 21, 2019
Tweet

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
  2. LINE Design System > Jung Young Lee / LDS TF

  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
  4. Flipped Concept Design Guideline…? System Design

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

    of Design System
  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
  7. Background

  8. First Release

  9. Today News, Timeline, Pay, Video Call, Story, AR Games, Group,

    Open Chat, Cryptocurrency… a lot more than before.
  10. Expanding Office KR JP TW TH ID

  11. Expanding Office KR JP TW TH ID “Hi, I am

    a newbie. Where are the design guidelines?”
  12. Problems

  13. 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
  14. 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.
  15. Which Share icon is the latest one? Inconsistency in Icons

  16. Inconsistency in Color 500+ Distinct Color Values

  17. Unexpected Green Color

  18. Inconsistency in UX Various Type of Tab

  19. > A lot of repeated work > Inconsistency of design

    resources > Inconsistency of UX > No centralized design management Problems
  20. Goal

  21. 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
  22. 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 !
  23. 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
  24. Principles

  25. 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
  26. Color

  27. AS-IS: 500+ Colors

  28. TO-BE: 30 Colors

  29. 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
  30. LDS COLOR RAW COLOR VALUE ⚠ ✅ Code Level Violation

  31. How to Support Dark Mode

  32. LINE Theme

  33. Theme Area Non-Theme Area Default Disney BT21 Toy Story Pokémon

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

    Miffy Aladdin Light Mode Semantic Dark Mode
  35. Semantic Colors

  36. Color System

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

  38. Rainbow Colors

  39. Iconography

  40. None
  41. Iconography

  42. Iconography

  43. Components

  44. None
  45. Top Navigation Bottom Navigation Buttons Dialog List Empty Tab Card

    Message Modal Components
  46. None
  47. 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 $
  48. LDS- Demo App

  49. Interaction

  50. INFORMATIVE DELIGHTFUL FEASIBLE CONSISTENT Interaction Principle

  51. LINE Spring Curve Define

  52. CODE SNIPPET SUPPORT FOR DEVELOPER

  53. Living Document

  54. None
  55. None
  56. None
  57. None
  58. Thank You