Optimising the new design system
It began with the pursuit of uniformity in the shape of stars.
Context of the Project
A chaotic mix that lacked consistency
Iterated countless designs
We explored various design ideas, iterating through numerous drafts.
Inconsistency in design
However, without a unified guideline, we ended up overusing basic elements like the ‘Star,’ leading to inconsistencies that impacted the overall service experience.
The outcome
Streamlined workflows by over 40%, leading to higher productivity for internal designers through the design system.
Single source of truth
Optimised the design system as a single source of truth, streamlining workflows by 40% and boosting designer productivity.
Atomic & Anatomy design principles
Applied Atomic & Anatomy principles to rebuild a structured system with clear guidelines
Standardised company-wide system
Ensured seamless communication and provided easy-to-follow icon production guides.
Incompatibility issue
Previous design guidelines lacked updates for new features.
Misaligned components were introduced, and designers unknowingly used inconsistent star icons without verifying compatibility.
Stars of different shapes were placed on the left and right side of the text without any rules.
Outdated guidelines
Design guidelines before the upgrade did not include the new features.
Misaligned new components
During the previous upgrade, new components that didn't quite align with the existing design guidelines were created and used.
Design inconsistency issue
Designers assumed they were using the same shape of star icon, but it was never double-checked to ensure the design compatibility.
Priority issue
Online meetings → Overlooked details
With multiple teams communicating only in online meetings, minor design issues were often overlooked.
Icon inconsistencies (arrows, stars)
Inconsistencies in icons like arrows and stars went unnoticed until I raised the issue with developers.
Developers had noticed the discrepancy, but believed that it was the designer’s intention and built the service using them.
Raised issue → Team alignment
By highlighting the lack of a single source of truth, we aligned on the need for a solution.
Define
I reset the guide criteria by identifying the part we overlooked.
Created a dedicated channel for design updates, idea sharing, and feedback.
Focused on understanding real-world component usage to refine icon guide criteria.
This is a part of the discussion we had.
“ How might we configure it in an easy-to-find browse method? ”
“ I think it would be better to group the agreed sizes. ”
“ And we need to categorise them by our standards. ”
“ How might we combine it with other things? ”
“ Let's refer to our existing illustration combination type. ”
“ How might we standardise between area and actual icon size? ”
“ I'll add a guide that serves as a reference between the area
and the actual icon size. ”
1. Even-numbered pixel,
2. One icon,
3. Categorisation
Responsive design required precise icon sizing.
I identified mismatches in pixel sizes, line thickness, and alignment due to misunderstandings of the guide’s specifications.
This problem came up because designers did not completely comprehend and follow these specifications.
1. Even-numbered pixel,
2. One icon,
3. Categorisation
Managing multiple icon sizes consumed unnecessary resources
By collaborating with the publishing team, I confirmed minimal design differences and implemented a standard icon size with clear naming conventions for easier engineering management.
1. Even-numbered pixel,
2. One icon,
3. Categorisation
To establish a single source of truth and simplify management, I categorised all icons by functionality, service scope, usage frequency, and characteristics.
Develop
Iconography Production Guide
10x scale factor was applied, the designers were asked to refer to the specified size when making icons.
Grid & Key Lines
Icons are created on a 24-unit grid and can be adjusted to 18 / 14 / 12 grid areas if needed.
➊ Padding
‣
Icons are placed in the area within the grid, excluding the padding area.
➋ Live area (content)
‣
The area where icons are placed within the grid.
➌ Key lines (content)
‣
Icons are designed referencing Key line Shapes to maintain consistent visual proportions.
Alignment
Icons placed within the grid area are aligned according to Key lines.
➊ Icon Alignment
‣
Align the outline of the icon to stay within Key lines.
➋ Points Placement
‣
When the stroke weight is 1.5 pixels, there may be cases including decimal points 0.25 or 0.75.
➌ Stroke Alignment
‣
Set the stroke alignment option to Center.
Stroke
Icons created based on 24 units are used by converting them into outlines.
➊ Stroke Weight
‣
Apply a stroke weight of 1.5 pixels.
➋ Stroke Radius
‣
Apply a corner radius of 2 pixels based on Key line Shapes. Adjust as needed.
➌ Outline Strokes
‣
Use the final icon as a single vector by converting it to outline / add / transform to path. The size of the icon’s outline vector should be even-numbered pixel.
Sub Icons
Icons placed within the grid area are aligned according to Key lines.
➊ Points Handle
‣
Positions of handles used on curves may include decimal points 0.25 or 0.75.
➋ Sub Icons Padding
‣
Combine icons are placed in the grid, excluding the padding area.
➌ Main Shape / Outer Shape
‣
When combining icons similar to the main icon shape, place them within the Live area based on even spacing.
Naming
Add styles to the library components based on the icon shape.
Categorising
Categories the icons by function and manages them on one artboard.
Deliver
I constructed the design system based on Atomic Design and Anatomy principles.
Icons were classified into two roles:
➊ Leading Icon
Icons symbolising the meaning of text.
‣
➋ Trailing Icon
‣
Icons representing the functionality
Categorised their scope of influence into three areas
Layout Area > Content Area > Component
➊ Layout Area
‣
Influences all areas within the screen.
➋ Content Area
‣
Only affects the content area without impacting information in higher areas.
➌ Component
‣
Only affects the component area without influencing information in higher areas.
Early in the project, I gathered all duplicated components in one place to assess their current status.
I categorised components that require updates among those generally used.
This allowed the team to list the components that needed to be created and clearly define their functions and usage.
Button
I redefined the hierarchy of buttons to distinctly differentiate primary, secondary, and ghost buttons. also introduced new types of buttons such as icon buttons and fixed buttons.
Overview
➊ Default button
➋ Top fixed button
➌ Action button
➍ Text button
Hierarchy
➊ Primary button
➋ Secondary button
➌ Ghost button
Anatomy
➊ Button container
➋ Leading icon
➌ Text area
State
➊ Enabled
➋ Hovered
➌ Disabled
Chip
Chips were designed to handle various cases including deletion, emojis, and icons.
Overview
➊ Filter chip
➋ Input chip
Anatomy
➊ Container
➋ Text
➌ Image area (optional)
➍ Icon (optional)
Variants
➊ Small
➋ Medium
➌ Large
Input
Based on input anatomy, we defined containers, placeholders, and icon areas.
For search fields, I designed them considering basic, wide area, and filter cases.
Additionally, I created Header, Body, and Footer in an Atomic structure to facilitate user interaction.
Anatomy
➊ Container
➋ Placeholder
➌ Icon area
➊ Container
➋ Leading icon
➌ Trailing icon
➊ Header
➋ Body
➌ Footer
State
➊ Enabled
➋ Focused
➌ Typing
➍ Focused out
➎ Disabled
List
The List component, capable of vertical composition, was designed with containers, left area, text area, and right area. It was designed to accommodate various types such as Profile, File, Service, and Icons.
Anatomy
➊ Container
➋ Left area
➌ Text area
➍ Right area
Type
➊ One-line list
➋ Two-line list
State
➊ Default
➋ Hovered
➌ Disabled
Card
The Card component, capable of horizontal composition, defined structures including container, headline, body text, and content area to effectively convey diverse information.
Anatomy
➊ Container
➋ Headline
➌ Body text
➍ Content area
Type
➊ One-line card
➋ Two-line card
➌ Three-line card
➍ Preview card
State
➊ Default
➋ Hovered
➌ Disabled
Table
For Tables, I devised compromise solutions to avoid overlapping box areas:
Maintaining the design of the existing table.
Utilising the area as much as possible to accommodate more information.
Popup
In response to user feedback on large pop-ups causing inconvenience in laptop environments, similar to table structures, I improved them to maximise space utilisation.
What I learned from the project
Bridging perspectives & collaboration
Ultimately, throughout the extensive process of this massive project, I learned how to understand each other's perspectives and effectively collaborate to find solutions.
Launch approval = Major milestone
Getting the approval for the launch of this massive product was one of the most crucial moments for our team, considering the challenges and issues we have dealt with for years.
Led iterative improvements
I learned how to lead iterative improvements throughout the end-to-end of the project.
Built design system → Better service & dev efficiency
As part of this, I significantly contributed to cost savings in advertising through improvements in brand assets and collaborated closely with developers to establish a design system, which greatly enhanced our service quality and development efficiency.