Yuhan Kimberly MomQ Ecommerce UX.UI Renewal Project

 

자사몰과 복합몰의 장점을 통해
브랜드 UX경험을 제공하는 육아제품 플랫폼

 

momQ 서비스는 육아에 맞는 필요한 상품 정보를 확인하고 구매할 수 있는 다양한 상품군과 여러 서비스를 제공하고 있으며, 
육아 관련 품질 좋은 상품과 콘텐츠를 제공하고 있다는 점이 타 서비스들과 차별화된 강점을 가지고 있습니다.


하지만, 많은 콘텐츠와 좋은 서비스를 제공하고 있음에도 불구하고, 타겟 사용자의 공감을 끌지 못하는 콘텐츠로
 실질적인 만족감을 충분히 전달하지 못하고 있는건
여느 타 이커머스 사이트와 큰 차별점이 없었습니다.

따라서, 우리는 고객에게 효율적인 정보 확인 기회와 시간을 절약할 수 있는 방향으로 사이트의 UXUI를 개선하여
momQ의 브랜드 강점이 돋보일 수 있는 플랫폼으로 제안하고자 합니다.

 

 

Research

단순히 상품만을 구매하지 않고
정보와 함께 구매하는 소비자들

 

맘큐의 주요 타겟인 2-30대 부모들은 온라인 쇼핑에 익숙합니다. 
이들은 온라인 쇼핑을 단순히 상품을 구입하는 수단으로만 보지 않고, 커뮤니티 서비스 등 제품의 정보를 여러 채널을 통해 소비하고 이를 바탕으로 제품을 구매합니다.
그리고 구매에 영향을 주는 요인들은 안정성과 가격 대비 좋은 품질로, 단지 객관적인 상품의 정보가 영향을 주는 것이 아니라
일정 기준에 따라 정제된 정보가 주로 영향을 주고 있음을 알 수 있습니다.

 

 

Insight

분석을 통한 레이아웃 개선 :
Strategy와 GA분석

 

메인 강조에 무게를 두는 이커머스 흐름과, 메인을 가장 중요하게 여기는 클라이언트의 니즈에 맞게 메인 화면을 가장 중점적으로 개선 진행하였으며, 
서비스의 중심이 되는 화면인 만큼, 사용성 개선으로 서비스의 가치를 높이고 아이덴티티를 잘 표현할 수 있는 방안을 고려하여 화면 개선을 진행하였습니다.

본 사이트의 GA분석 확인 결과, 메인 페이지 내에서 첫번째로는 이벤트 배너, 그리고 2순위로는 빌보드 배너의 클릭률이 높았고,
원하는 대로 서비스를 이용할 수 있는 바로가기 메뉴, 추천 아이템이나 관심상품과 같이 사람들의 니즈에 맞는 상품 리스트에서의 접근성이 높았습니다.

하지만, 본 서비스에서 강조하고자 하는 커뮤니티 영역과 맘큐위키 영역에서의 접근성은 낮음을 확인할 수 있었습니다.

 

 

Proposal

사용성 향상과 브랜드의 강점을 살릴 수 있는
디자인 방향 제안

 

그래서, 위와 같은 정량조사와 정성 조사를 통해 얻어진 사용자들의 특성을 분석하고 반영하여 
momQ는 단순히 상품을 판매하는 플랫폼이 아니라, 여러 경험을 통해 정제된 상품을 얻을 수 있는 경험을 하는 공간으로 발돋움해야 한다고 프로젝트 목표를 선정했습니다.
이를 위해 커뮤니티형 커머스 플랫폼으로서 현재 momQ와 개선되어야 할 방향에 대해 다음과 같이 제안하였습니다.

 

 

 

GA 분석결과를 토대로한 디자인 개선 방향

주요 타겟과 시장 조사 리서치 후, 우리는 고객 경험 중심의 momQ로 자리잡기 위해, 맘큐 플랫폼의 인터페이스가 주는 
사용자 경험에 부정적인 영향을 미칠 수 있는 요소들을 파악하였습니다.

인터페이스 디자인에서 주로 해결되어야 할 과제로서는
정보의 위계 표현, 타이포그래피, UI요소의 개선, 통일성 측면에서 가장 중점적으로 디자인 개선이 이루어져야 한다고 보았습니다.

사용성 개선을 위한 주요 포인트로서는, 맘큐위키 콘텐츠를 각각 특성을 잘 살리면서 사용자의 관심을 유도할 수 있도록 UI를 개선하여 해당 페이지의 접근성을 높였습니다.
또한, 정보의 위계에 따라 그룹핑과 텍스트 대비 등을 중점적으로 개선하고, 배너와 썸네일, 플래그는 장식적인 요소 등을 최대한 배제하여 명확한 정보의 전달이 될 수 있도록 하면서
깔끔한 디자인으로 심미성을 높였습니다.

GA 클릭률 결과에 따라, 이벤트 영역 다음으로 클릭률이 높은 바로가기 영역을 사용자가 원하는 방식대로 자유롭게 서비스 탐색이 가능한 바로가기 영역을 개선하고,
각 브랜드 별로 제품을 바로바로 확인할 수 있는 브랜드 페이지로의 연결 부분을 재정비 하였습니다. 
일관된 스타일의 디자인으로 브랜드 정체성을 표현하고, 사용자들이 앱의 사용 과정에서 혼란이 없이 편안한 경험을 하도록 돕습니다.

 

 

Main

메인페이지

 

콘텐츠 간 시원한 간격을 통해 사용자 가독성 향상 주요 서비스 퀵메뉴를 통한 사용자의 탐색 편의를 제공합니다.
맘큐 추천상품, 브랜드별 추천 상품 전시영역 강화 기획전 배너 및 상품의 그룹핑 강화를 통해 가독성을 향상시켰으며,
주요 브랜드 SNS연결 코너 추가를 통해 브랜드 인지 강화를 도모했습니다.
커뮤니티, 육아정보, 육아포럼 코너는 콘텐츠 특성에 맞게 탐색할 수 있도록 정렬, 디자인 차별화를 통해 메세지 전달에 집중할 수 있도록 디자인 했습니다.

 

 

Product

상품 페이지

 

사용자가 활용하기 용이하도록 기능과 구조를 개선하였습니다.
상품 노출과 기능 제공에 직관적이도록 전시 기능을 개선하였고, 
가독성과 콘텐츠의 연결을 고려한 구조와 기능으로 정보 제공 개선을 했습니다.

 

 

 

Brand

브랜드 페이지

 

기획전과 상품을 강조하며 브랜드 이미지를 전달할 수 있는 비주얼적 활용이 가능하도록 빌보드 영역을 개선하였습니다.
브랜드 로고 노출과 카테고리와 필터기능을 제공하여 상품 탐색을 사용자가 하기에 용이하도록 하였습니다. 

 

 

MomQ wiki

맘큐위키(커뮤니티) 페이지

 

육아정보, 육아포럼, 커뮤니티, 여성/시니어 등 맘큐위키 내 다른 성격의 정보들은 서로 다른 레이아웃과 썸네일 디자인을 활용하여 
사용자가 직관적으로 정보를 분류 가능하도록 했습니다.
커뮤니티 유닛의 배경 제거와 디자인 스타일 개선을 통해 텍스트 가독성을 높이고, 내용에 집중될 수 있도록 개선하였으며
썸네일과 본문 이미지가 활용되는 경우에는 이미지와 텍스트 사이의 여백 조절을 통해 같은 내용에 대한 그룹핑으로 정보 위계 개선을 시도했습니다. 

 

 

Common Guide

공통 가이드

 

사용자가 편리하게 사이트를 탐색 할 수 있도록 GNB와 내비게이션의 구조를 수정하였습니다.
전체 카테고리(햄버거) 영역에 카테고리와 브랜드를 탭으로 분리하여 다양한 정보 획득과 쉬운 접근이 가능하도록 개선하였고,
일관적인 무드와 정보 전달이 가능하도록 배너 가이드와 디자인 시스템, 폰트, 컬러 가이드 수립하였습니다.

 

 

아이콘

유한킴벌리는 트랜디한 느낌을 위해 각지고, 얇고, 단단한 느낌의 아이콘을 원했고, 
그에 맞추어 현업의 디자인팀과 협의하여 아이콘을 트랜디하게 디벨롭 했습니다.

 

컬러

유한킴벌리 맘큐의 컬러 red를 그대로 활용하고 주색을 무채색 계열의 모노톤으로, 맘큐 브랜드 컬러인 레드 포인트로 집중도 있게 표현하였습니다. 

 

폰트

전체적으로 폰트 크기를 고려하고 개발기간과 사용성 모두를 염두하여, Pretendard에서 Noto Sans로 결정하여 진행했습니다.

 

디자인 시스템 가이드

폰트, 컬러, 아이콘, 컴포넌트 등 공통 디자인 시스템을 가이드 파일로 제작하여 개발사와 고객사에서 추후 디자인을 운영하게 될 때 지표로 사용되었습니다.
또한, 전체 UI스타일을 개편하면서 배너와 썸네일, 플래그 가이드도 제작하여 추후 고객사의 디자인팀 운영자료로서 사용되었습니다.

발전된 디자인과 UI와 어우러지도록 무드를 맞추어 일관적인 메세지를 제공하며 더욱 서비스의 완성도를 높였습니다.