2019 DevDay
LINE Design System : Making LINE
Product Faster Without Losing
Consistency
> Jungyoung Lee (Jake)
> LINE Plus Product Design 5 Lead Product Designer
Slide 2
Slide 2 text
LINE Design System
> Jung Young Lee / LDS TF
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Flipped Concept
Design Guideline…? System Design
Slide 5
Slide 5 text
Element Component Page
Avatar Friend List Friends Tab
Basic Structure of Design System
Slide 6
Slide 6 text
> 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
Slide 7
Slide 7 text
Background
Slide 8
Slide 8 text
First Release
Slide 9
Slide 9 text
Today
News, Timeline, Pay, Video Call, Story, AR Games, Group, Open Chat, Cryptocurrency… a lot more than before.
Slide 10
Slide 10 text
Expanding Office
KR
JP
TW
TH ID
Slide 11
Slide 11 text
Expanding Office
KR
JP
TW
TH ID
“Hi, I am a newbie.
Where are the design guidelines?”
Slide 12
Slide 12 text
Problems
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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.
Slide 15
Slide 15 text
Which Share icon is the latest one?
Inconsistency in Icons
Slide 16
Slide 16 text
Inconsistency in Color
500+ Distinct Color Values
Slide 17
Slide 17 text
Unexpected Green Color
Slide 18
Slide 18 text
Inconsistency in UX
Various Type of Tab
Slide 19
Slide 19 text
> A lot of repeated work
> Inconsistency of design resources
> Inconsistency of UX
> No centralized design management
Problems
Slide 20
Slide 20 text
Goal
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
!
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Principles
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Color
Slide 27
Slide 27 text
AS-IS: 500+ Colors
Slide 28
Slide 28 text
TO-BE: 30 Colors
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
LDS
COLOR
RAW COLOR
VALUE
⚠
✅
Code Level Violation
Slide 31
Slide 31 text
How to Support Dark Mode
Slide 32
Slide 32 text
LINE Theme
Slide 33
Slide 33 text
Theme Area
Non-Theme Area
Default
Disney
BT21
Toy Story
Pokémon
Miffy
Aladdin
Light Mode
Dark Mode
Slide 34
Slide 34 text
Theme Area
Non-Theme Area
Default
Disney
BT21
Toy Story
Pokémon
Miffy
Aladdin
Light Mode
Semantic
Dark Mode
Slide 35
Slide 35 text
Semantic Colors
Slide 36
Slide 36 text
Color System
Slide 37
Slide 37 text
Minimum 11pt font Minimum 4.5:1 Contrast
Accessibility
Slide 38
Slide 38 text
Rainbow Colors
Slide 39
Slide 39 text
Iconography
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Iconography
Slide 42
Slide 42 text
Iconography
Slide 43
Slide 43 text
Components
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Top Navigation Bottom Navigation Buttons Dialog
List Empty Tab Card
Message
Modal
Components
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
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 $