Project Goal
Objective
웹어워드코리아 2023 브랜드 이노베이션대상 수상을 하다.
톤워크닷컴 프로젝트를 통해 피부 진단을 통한 사용자 맞춤형 화장품인 톤워크의 브랜드 가치를 전달하고, 제품 탐색에서부터 구매로 이어지는 사용자 중심의 여정 설계로 서비스의 관여도를 높이고자 하였습니다. 또한 사용자가 200가지가 넘는 제품 옵션을 쉽게 탐색할 수 있도록 Filter Shade Range UI, 다이얼로그형 컬러칩 구성 등 혁신적인 UI를 도입하였습니다.
01
웹어워드 평가위원단 평가의견
Message
“톤워크 웹사이트의 사용자 인터페이스(UI)디자인은 사용자 중심적이며 직관적이다. 제품 탐색부터 구매까지의 사용자 여정이 체계적으로 설계되어 있어 사용자의 관여도를 높이고 클릭률 및 전환율을 향상하고 있다. 피부 진단 및 제품 상세 UI는 사용자 편의성을 최우선으로 고려하여 제작되었으며, 제품 이미지 강조와 사용자 친화적인 filter shade range UI는 사용자의 제품 선택 경험을 풍성하게 한다.”
02
스크롤할수록 독보적인 아름다움
Parallax Scroll Animation
브랜드 스토리에 시각적 매력과 사용자 몰입도를 높이는 효과적인 기법을 적용했어요. 톤워크 브랜드 철학을 이미지와 메시지로 효과적으로 전달하고자 동적인 움직임을 더해 창의적인 디자인을 구현할 수 있었죠.
03
제품만큼이나 혁식적인 인터페이스
Filter Shade Range UI
200가지가 넘는 제품 옵션을 재미있고 쉽게 탐색할 방법을 모색하여 Filter Shade Rangu UI로 일반적인 드롭다운 형태의 UI에서 벗어나 사용자 포인터의 좌우 움직임을 인지하여 옵션을 확인하고 바로 선택할 수 있는 새로운 인터페이스를 적용했습니다.
04
고객을 춤추게한 프로토타입
Interactive Prototypes Without Coding
사람은 시각적인 능력이 뛰어나 실제로 대뇌 피질의 30%는 시각에만 사용된다고 합니다. 따라서 가장 중요한 것은 직접 보는 것이며 고객이 프로토타입을 보고 서비스와 관련된 모든 프로세스와 향후 테스트에 대한 영역을 이해할 수 있는 수준의 프로토타입이 필요했죠.
화면 전환을 포함하여 웹 사이트 작업 과정을 정확하게 미리 볼 수 있고, 서로 어떻게 이동해서 작용하는지 개발하기 전에 미리 확인할 수 있는 인터랙티브 프로토타입을 제공했죠. 고객은 요구사항이 제대로 반영되는지 즉시 확인했으며, 프로젝트 시작부터 끝까지 다양한 피드백을 수집하고 개선하여 최상의 웹사이트를 제공했어요.