LINE Design System

Info
2019 / LINE / UX Lead 





Backgrounds

Even after its 8 years of history, LINE was still lacking a definite Design Guidelines. With its size continuously growing, LINE offices all around the world were recruiting local designers. As the number of designers increased globally, requests to reorganize the design process to work efficiently grew as well. We needed to come up with a harmonized system for the designers to work efficiently, and to align as a whole. In short, it was time to create our own Design System.


My Role

I was the first to suggest the need for a consistent Design System for LINE, and started to build one as a small project. However, as I gained more support from the company, a Task Force of 20 people was organized for me to lead. I determine specs for each version, communicate with dev/design stakeholders and evangelize LINE Design System. 





Start from inside

Before going straight into making the UI components, our team interviewed LINE designers regarding these three Whats; what they want, what they struggle with, and what they expect from a design system. Based on their answers and restless discussions among our team members, we were able to establish the main principles.


Design
Principle

WE ≠ USERS

Clear Primary Task
Chat First
Reliable Design
Continuous Experience
Repect for Legacy







Color

The next step was to thoroughly go over all of the colors used in LINE design. Over 500 colors were being used without consistent guidelines, and the number was constantly increasing.  Once the LINE Design system was implemented, only 26 LDS colors remained with each color named after its purpose and usage.


As-is :
500+ Independant Colors

To-be :  26 LDS Colors



Rainbow Color

The newly implemented color limitation was acceptable to the messenger app, but other LINE services needed a lot more than 26 colors. Instead of allowing them to use unlimited colors, the LINE Design System provided a basic color spectrum called the Rainbow Color.




Semantic Color 

The LINE Design System is now preparing for the next step of color improvement: Semantic Color. Following the Dark Mode Support of iOS & Androids, each LDS color should be named explicitly.




Iconography

Having a uniformed set of Iconography had been a dream for LINE designers. Now, 160 default icons are available for design usage and can be downloaded as SVG and Sketch library. Also, clear guidelines are provided if new ones were to be added.










Character

The Character Business Team was worried about LINE Friends characters being overused. As the characters were added to so many different materials and services, the scarcity of them in the LINE Messenger App was diminishing; the characters may no longer be special to the users. Also, LINE Friends characters were inadequate to deliver the high-tech & smart image that LINE wanted to present as a company.

Therefore,  the LINE Design System came up with 'LINE People' to replace LINE Friends in distinguished areas of business.














UI Components

UI Components are the most crucial and fundamental part of Product Design. We chose Shared Sketch Library instead of Abstract Library because Sketch Library not only enables Planners and Developers to access the LDS, but it also keeps up with every update including notifications.

LDS Components 0.6





Component - Sample document



Sketch
Experience 

It’s super easy to use. Users can change any values or graphics using the override function.







Interaction Guide

Interaction design and animation features were always hard to handoff to developers. Based on two years of experience as interaction professionals, our team released an independent app including basic interaction design samples within LINE. Designers can refer to this app to make new interactions, and developers can find linked codes for the design.




Interaction Design Principle
There are three main principles for Interaction Design. In short, it is not a simple decoration.

Informative
Delightful
Feasible









Living Document



Internal
website 

Every content listed above are available from internal website.
It’s still in a beta version, but we are always looking for improvements.






Evangelize

The last step was to evangelize the LINE Design System within LINE. It may be difficult to spread the word to everyone as LINE has numerous employees all around the world, but as the leader of the system, I try my best by holding meetings and volunteering to speak at conferences to share these amazing new improvements and its progress.

Left : Global Creative Share / Top : Design SpectrumCon