The LG Sustainability page introduces LG’s vision and efforts to create a better future for all in harmony with nature.
Role
실무 디자이너로서 참여(Visual & UI Designer)
Team
디자인 리더, 2명의 디자이너, 1명의 기획자로, 1명의 모션 디자이너로 구성된 TF팀
Timeline
2023. 4 ~ 2023. 8 (4개월)
Platform
Web
Project’s Goal
환경 메시지를 효과적으로 전달하면서 글로벌 웹사이트의 일관성을 유지하는 것을 목표로, 랜딩페이지 내에서 시각 메세지 중심으로 흐름을 재구성해 메시지 이해도와 몰입도를 높였어요.
Impact
일관된 브랜드 경험을 위한 접근성·UX 품질 고도화
Compliance with global web governance, WCAG 기준에 충족하는 접근성개선
100%
Improvement in content clarity
25%
일관성 있는 디자인에셋 고도화
디자인 시스템과 반응형 최적화로
명확한 메세지 전달과 직관적인 탐색 경험으로
스토리라인–인게이지먼트 강화
Discover 문제 탐색
문제 탐색 Observation
•콘텐츠 간 흐름이 단절되고,
•브랜드 메시지의 일관성이 부족하며,
•변화 없는 단조로운 구성으로 인해
사용자가 원하는 정보를 탐색하는 과정에서 이해·몰입이 지속적으로 끊어짐
리서치 Research & Inputs
•기존 Sustainability 콘텐츠의 IA 분석
•경쟁사 지속가능성 페이지 벤치마킹
• 글로벌 웹사이트 디자인 톤 & 접근성 가이드 검토
인사이트 Insight
사용자는 ‘정보 그 자체’보다 정보가 어떻게 이야기화되어 전달되는지에 따라 집중도가 크게 달라지며,
이를 위해 브랜드 메시지를 시각적으로 이해할 수 있는 UX/UI 개선이 필요함.
Define 문제 정의
Challenge Statements
•사용자가 정보의 흐름을 자연스럽게 따라갈 수 없는 이유는 무엇인가?•출처가 다른 에셋들이 섞이며 브랜드 메시지 인지에 혼란이 생기는 이유는?
•다양한 디바이스 환경에서 접근성·반응형 기준 충족 시 메시지 손실이 발생하는 이유는 무엇인가?
Design Goal
•정보의 내러티브 구조와 UI 흐름이 정렬하여 사용자의 화면 간 인지 단절 최소화
•브랜드 톤·메시지가 모든 에셋에서 일관되게 비주얼 큐레이션
•다양한 디바이스 환경에서 최대한 많은 사람이 같은 경험을 제공받을 수 있도록 접근성 기준에 충족하는 디자인 결과물 제시
Design Goal 문제 해결
Reorganized IA
브랜드의 환경에 대한 인식을 효과적으로 전달 하기 위해 UI 흐름을 개선
Clear CTA
사용자 흐름을 유도하는 명확한 Call to action 설계로 인게이지먼트 유도
Visual Curation
지속 가능성 테마에 맞는 이미지 선별과 재가공, 에셋 제작
Responsive Design
디바이스 별 접근성 기준을 만족시키는 디자인 제작
Process
UX/UI 개선 아이디어와 작업 프로세스
・비주얼 에셋 큐레이션: 지속가능성 테마에 맞고 일관성을 가진 비주얼 에셋 큐레이션 & 리터칭했어요.
・유지율을 높이는 인터랙션 설계: 흐름 유도 마이크로 인터랙션(스크롤 리빌, 호버)를 추가했어요.
・반응형 최적화: Figma 프로토타입으로 다양한 디바이스에서 최적화된 UX를 경험할 수 있도록 했어요.
비주얼 에셋 큐레이션과 UI 디자인, 디자인 시스템 정의
Visual-Centric Layout
Colour system & Typography
Dark Grey#333333
White#FFFFFFF
Warm Grey#F6F3EB
ESG Green#75C66B
Active Red#EA1917
Typography
LG EI Headline
LG EI Txt
Bold
SemiboldMedium
Light
Aa
Highlight
UI 디자인 하이라이트
Result
랜딩페이지 디자인
・브랜드 일관성을 유지하면서도 시각적으로 임팩트 있는 글로벌 지속가능성 랜딩 페이지를 디자인했어요.
・사용자 플로우가 개선되어 브랜드 메시지 전달력 + 탐색 경험이 향상되었어요.
・반응형 & 접근성 기준에 부합하여 다양한 환경에서도 일관된 경험을 할 수 있어요.
Retrospective
회고
Q.
이 프로젝트를 통해 무엇을 배웠나요?
A.
이번 프로젝트를 통해 단순히 좋은 이미지를 고르는 것이 아니라 ‘Why & What – How – Proof’ 구조에 따라 메시지를 시각적으로 설계할 때, 전달력이 극대화된다는 점을 체감했습니다. 비주얼 큐레이션이 곧 브랜드 신뢰와 직결된다는 사실도 명확히 인식하게 되었고, 이미지의 톤과 진정성이 일관되지 않으면 메시지가 장식적으로 보일 수 있다는 점을 배웠습니다.
특히 브랜드의 아이덴티티 리뉴얼 초기 단계에서 영국 디자인 에이전시 Wolff Olins와의 협업을 통해 디자인 얼라인을 맞추고 프로듀싱과 개선 과정을 경험한 것 또한 굉장히 특별했습니다.
마지막으로 접근성 기준 충족 과정에서의 시행착오를 겪기도 했습니다. 이를 통해 색 대비, 대체 텍스트, 자산 관리의 중요성을 이해했고, 여러 차례 수정과 검증을 반복하며, 디자인 프로세스와 체계적인 에셋 관리 역량을 키울 수 있었습니다. 이를 통해, 처음 부터 완벽을 목표로 하기보다, 빠른 시도–검증–개선의 반복 과정이 디자인 완성도를 높이는 핵심이라는 점을 실무적으로 배웠습니다.
Appendix
Research Data
글로벌 ESG 캠페인 리서치를 기반으로 Sustainability Movement 제안
100여개의 글로벌 ESG 케이스스터디를 조사하여 최신 지속가능성 트렌드와 브랜드 커뮤니케이션 전략을 분석했습니다.
이를 바탕으로 LG의 관점에서 지속가능성을 ‘인식’에서 ‘실천’으로 확장하는 Sustainability Movement 방향성을 제안했습니다.
From from graphics to digital/web and UI/UX, see the breadth of my creative explorations.
More projects
