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. 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. 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
  3. 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
  4. 9.

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

    Open Chat, Cryptocurrency… a lot more than before.
  5. 11.

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

    a newbie. Where are the design guidelines?”
  6. 12.
  7. 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
  8. 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.
  9. 19.

    > A lot of repeated work > Inconsistency of design

    resources > Inconsistency of UX > No centralized design management Problems
  10. 20.
  11. 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
  12. 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 !
  13. 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
  14. 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
  15. 26.
  16. 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
  17. 34.

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

    Miffy Aladdin Light Mode Semantic Dark Mode
  18. 40.
  19. 44.
  20. 46.
  21. 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 $
  22. 54.
  23. 55.
  24. 56.
  25. 57.
  26. 58.