Brand & Digital

Renewal of RWD Website with New Smart Shopping and Powerful Branding.

Dr.Jart+ E-commerce
Client
Dr.Jart+
Category
Brand, Digital
Services
Content Design, Website, E-commerce
Scope
E-commerce Strategy, Mobile Site Design, Website Design, Style Guide, Content Production
Year
2014

Although women dominate the skincare industry, men are increasingly concerned with their skin and appearance. With this in mind, we redesigned the Dr. Jart website with detailed product pages that help customers pinpoint skin concerns and a simplified UX/UI layout to give all consumers an enjoyable and easy purchase experience.

스마트 쇼핑, 강력한 브랜딩으로 새롭게 재정비한 반응형 웹 사이트 리뉴얼 기능성 화장품 전문 브랜드인 닥터자르트 웹사이트가 ‘반응형 웹’으로 새롭게 리뉴얼 되었습니다. 사이트에서 제품을 판매하는 행위에만 목적을 두는 것이 아닌, 다양한 피부 고민을 갖고 있는 사용자들에게 피부에 관련된 정보를 공유하고, 소통하고, 이해하는 공간을 만드는 것이 리뉴얼의 핵심 목표였습니다.

Do you have sensitive skin?

Implementation of Responsive Web Design Considering Various Device Environment.

To implement easily usable “Responsive Web” undeterred by diversity of devices, instead of fancy and complex composition, only necessary elements were used to have well-organized expression. Since the structural problems from various elements and complexity hinder implementation of Responsive Web” in domestic e-commerce, the website was implemented by accentuating on the “more perfectly implemented responsive web.

다양한 디바이스 환경을 고려한 반응형 웹 구현되었습니다. 디바이스의 다양성에 구애받지 않고 모두가 쉽게 사용할 수 있는 ‘반응형 웹’으로의 구현을 위해 화려하고 복잡한 구성 대신 필요한 요소들 만으로 짜임새 있는 표현을 하고자 하였습니다. 국내 이커머스 분야에서는 다양한 요소와 복잡하게 얽혀있는 구조적인 문제들로 인해 ‘반응형 웹’ 구현이 쉽지 않은 터라 ‘보다 완벽하게 구현된 반응형 웹’에 중점을 두고 사이트를 구현하였습니다.

Dr.Jart+ Responsive Web Design

구매에 최적화하여 견고하게 표현된 UI / UX. 커머스의 특성상 쇼핑에 대한 기능과 제품 정보에 대한 구성, 프로모션 등 다양한 성향의 콘텐츠들이 혼재되어 있는 것을 정리하여 사이트의 구성이 쉽게 파악 되도록 하였고, 실시간 장바구니 카운팅 기능과 상세페이지에 들어가지 않아도 제품 리스트에서 위시리스트와 코멘트, 장바구니 기능을 이용할 수 있도록 하여 구매까지의 단계를 최소화할 수 있는 UI / UX를 설계하였습니다.

Dr. Jart+ Main page

‘반응형 웹’ 구현에 있어 필수 요소인 ‘웹폰트’를 적극적으로 활용하였습니다. 다양한 플랫폼에서 동일한 디자인으로 표현되는 장점뿐만 아니라 Helvetica를 근간으로 디자인된 닥터자르트의 브랜드 아이덴티티와의 일관성을 부여할 수 있는 특징이 있습니다.

Web Font-face

Product Detail Page Design to Bring Product Characteristics as much as possible

Dr.Jart+ Product List page

This renewal designed not only the frame of website but also the detail pages of entire products by Dr. Jart. To reveal the detail page of each characteristic of delicate product for each skin trouble type by Dr. Jart, the detail page was re-designed to make the website of firm interior and exterior.

제품의 특징을 최대한 부각시키는 상품 상세페이지 디자인. 이번 리뉴얼은 사이트의 틀 뿐만 아니라 모든 닥터자르트 제품 전체에 대한 상세페이지까지 디자인하게 되었습니다. 피부의 고민별로 제품이 분류되는 닥터자르트 만의 섬세한 제품 별 특징을 살려내는 상세페이지가 나올 수 있도록 상세페이지를 리디자인 하여 겉과 속이 모두 단단한 사이트를 만들고자 하였습니다.

Dr.Jart+ Product Detail Page Design

Full Website to Fulfill the Roles of Website

Various SNS operated for smooth communication with users were re-organized on the Dr. Jart website to be a base camp to re-expand. Along with the foundation of consistent branding, various points of contact with customers were made not to be scattered but centered, and well-quality contents difficult to be used via SNS such as "medical test" or "expert consultation" were enhanced to be provided only by the website to increase the value of website visiting.

사용자들과의 원활한 커뮤니케이션을 위해 다양하게 운영되어 있던 각종 SNS를 닥터자르트 웹사이트에 재정리하여 다시금 재확산 시키는 베이스캠프 역할을 할 수 있도록 구성하였습니다. 일관성 있는 브랜딩의 초석을 마련함과 동시에 고객과의 다양한 접점이 분산되지 않고 집중될 수 있도록 하였으며 SNS의 환경 상 이용하기가 힘든 ‘메디컬 테스트’나 ‘전문가 컨설팅’ 등 양질의 콘텐츠를 고도화하여 웹사이트 에서만 제공함으로써 사이트 방문의 가치를 높였습니다.

Dr. Jart+ Medical test
Dr.Jart+ Medical test - result

닥터와 아트의 만남, 닥터자르트의 브랜딩. 닥터자르트는 닥터와 아트가 만나 과학적 이면서도 아름다움을 추구하는 브랜드입니다. 그간 닥터자르트에서 선보였던 제품의 패키지 들은 국내의 브랜드라는 것이 믿기지 않을 만큼 미니멀 하면서도 견고한 디자인을 선보여 왔습니다. 그러한 닥터자르트만의 브랜드 아이덴티티를 최대한 살리면서도 본질을 잊지 않는 세련된 브랜드의 색을 표현하는 것에 중점을 두었습니다.

Dr.Jart+ Brand Story
Samsung Galaxy S5 Digital Content