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

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
41. Iconography
42. Iconography
43. Components
45. Top Navigation Bottom Navigation Buttons Dialog List Empty Tab Card Message Modal Components
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
58. Thank You