LINE Design System : making LINE Product faster without losing consistency

by LINE DevDay 2019

Slide 1

Slide 1 text

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 ﬂows 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 $