Auditing the Existing System
Color Semantics
LG's color system offered two brand colors (red and grey) and Primary Red was used to represent all interactions - buttons, links, hover, and select states.
In interface design, red typically indicates an error state and LG's utility palette followed that precedent. This conflated visual semantics. Users had difficulty differentiating between hover/select and error states without helper text.
From usability testing, we knew that the LG Product Support site had issues with inconsistent and confusing visual hierarchy. This was a start, but I wanted to learn more.
I began by auditing LG's existing style guide and found that designers and developers used MUI, a robust open-source component library, combined with LG's brand colors, typefaces, and breakpoints.
I realized that the lack of consistency and visual confusion came from unclear design foundations and application guidelines. From there, I was able to determine specific pain points.
Auditing the Existing System
Auditing the Existing System
LG UI relied heavily on Primary Red to indicate potential interactions. Blue highlights that usage
The hover state in Primary Red (left) compared to the error state in Alert Red
I understood that this project wasn't a matter of reinventing the wheel when it came to design systems, but making improvements so that the wheel spun faster and traveled more efficiently.
Updated CTAs
I expanded the palette to include another color that designers can use for CTAs.
Interaction Blue is primarily for CTAs, while LG Red functions to convey instances where brand is important (headers, logos, etc).
Desaturated Grays
LG's gray palette was varying levels of transparency applied to one gray shade and layering them on different backgrounds changed the overall appearance of the color. I opted for redoing the palette entirely with a set of opaque and fully desaturated grays, to avoid any color misinterpretation.
Establishing Foundations
Establishing Foundations
Establishing Foundations
Limited type styles made it difficult to determine hierarchy of information
Type styles being used on LG's site
Type Scalability
The existing typographic system had 6 defined styles for display and 2 for body text using the LG Smart type family.
These styles needed to scale across all of LG's digital platforms. As they stood, the small range of typographic sizes limited device scalability and customization opportunities for designers.
Inconsistent margins on LG's e-commerce site. Offset grid isn't documented in style guidelines
Type Scale
Rather than providing a select set of styles and use cases, we decided to use the Major Second type scale, where type increases and decreases incrementally by multiplies of 1.125. This method gives teams a range of styles to choose from if they want to set product-specific standards.
Each font size is available in all weights of the LG Smart typeface family.
Line Height
I standardized the line heights for display (120%) and body copy (140%). To avoid unintentional spacing in components, I also made a line height for any text used in component builds (100%).
Spacing Scale
I also created a spacing scale for components, layout, and typography. MUI components use a scale with an 8 px base unit, so it made sense to follow that precedent.
LG designers use Figma for wireframing, mockups, and prototyping, so I integrated all foundational changes into the library's styles to make application and adoption easier for product teams.
Image Library
This included creating a database in Figma for LG's product and brand imagery, formatted so that designers can quickly apply the photography to mockups and components.
Documentation
Documentation
Documentation
LG Design System Foundations
2022 - 2023
Layout Consistency
Although LG had a responsive, fluid grid system and established breakpoints, the live site layout didn't follow those guidelines. I also saw that, while MUI components used 8 px incremental spacing, no spacing standards or documentation existed.
Breakpoints
LG was using 5 device breakpoints but only offered 3 grid structures. I reduced the breakpoints to 3 to match the existing grids and follow T-shirt sizing S, M, L.
Breakpoints and corresponding grid structure dimensions
Foundational styles integrated in Figma
Image library for product and brand photography
Spacing scale with defined multipliers, token sizes, and REM
Implementation
Implementation
Because my team was redesigning LG's Product Support Page, I had the opportunity to test the design system updates first-hand.
I, along with the 3 other designers on the project, worked with the Figma library for mockups and I was able to see how the foundational changes were scaling across breakpoints while also holding regular meetings with my team members to get feedback and make changes.
Implementation
Results
Results
Evaluating a design system's impact is tricky because it has the potential to influence of design production and delivery.
We used our team's usage a micro scale to evaluate impact and could report approximately 30% improvement in production speed. We also recorded far fewer spacing, layout, and typographic inconsistencies, which meant less time needed to fix mockup mistakes.
Because my team was part of a contracting agency, I wasn't able to assist with design system adoption long-term. I passed off control of the Figma library along with style sheets and implementation guidelines. If given more time, we would have held regular office hours with design teams across LG and more extensive product and development team onboarding.
Results
Client
LG Electronics
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Client
LG Electronics
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners
Client
LG Electronics
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Client
LG Electronics
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Client
LG Electronics
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners