[화장품/미용] 이니스프리 분석

 

이니스프리 공식 웹사이트 - 이니스프리 | innisfree

 

 

 

[ 디자인 방향 ]

이니스프리는 제주가 주는 자연의 혜택을 담아

건강한 아름다움을 전하고자 하는 국내 대표 자연주의 뷰티 브랜드입니다.

사용자가 편리하게 제품을 구매할 수 있도록 도와주며

제품판매를 위해 홈페이지가 어떻게 구성되어 있는지 살펴보겠습니다.

 

---

 

[ 메뉴화면 ]

 

 

 

 

 

MENU

햄버거 메뉴버튼을 클릭하면 전체메뉴가 슬라이드 다운되는 메뉴형태를 가지고 있습니다.

메뉴목록의 왼쪽과 오른쪽을 나누어 왼쪽에는 메뉴목록으로 구성하였고,

오른쪽에는 왼쪽의 각 메뉴 목록에 마우스를 갖다 대면 해당 제품의 이미지가 나타나도록 구성하였습니다.

해당 목록이 어떠한 제품을 포함하는지 한눈에 볼 수 있습니다.

 

그 외, 검색아이콘/ 마이페이지 / 장바구니가 메인 상단에 위치하며

스크롤을 내렸을 때 헤더영역의 로고가 사라지고 3개의 아이콘이 메뉴부분에 내려와 위치해 고정되어 움직입니다.

사용자가 사이트를 이용하는데 있어 더욱 편리하게 쇼핑할 수 있습니다.

 

 

---

 

[ 메인 페이지 ]

 

 

 

 

1 BANNER

사용자가 홈페이지를 방문하면 가장 먼저 보이는 부분입니다.

사용자의 시선을 끌며 신상품부터 제품이벤트까지 다양한 내용을 담아내기 위해

배너슬라이드를 활용하였습니다.

play버튼과 pause버튼이 있어 슬라이드를 방문자에게

자동적으로 보여지게 하거나 멈출 수 있습니다.

​

2 CONTENTS

온라인 판매에서 이니스프리 고객들이 가장 많이 사용하는 제품의 순위를 매겨

가로 슬라이드형태로 배치시켰습니다.

메인에 제품의 실시간 판매랭킹을 노출시켜 홈페이지 방문자가 제품을 구매하도록 유도하고 있습니다.

 

3 HOVER

이니스프리 상품에 마우스를 갖다대면

마우스hover된 제품에 '카드뒤집기'되듯이 이미지가 바뀌는 것을 볼 수 있습니다.

사용자가 홈페이지를 둘러보면서 제품을 한번 더 볼 수 있도록 상기시켜주는 기능으로 볼 수 있습니다.

 

 

4 FLOATING BANNER

 

 

 

사이트에서 사용자가 클릭 했던 제품들을 다시 보고 싶을 때 사용자의 편의를 위해 메인 오른쪽 옆에

스크롤을 내려도 따라다니는 플로팅 배너를 만들어 띄웠습니다.

최근 본 제품에 마우스를 갖다대면 해당 제품에 대한 간략히 가격을 확인할 수 있으며

클릭시, 해당 제품 구매정보로 바로 이동할 수 있다는 편리한 기능을 갖고 있습니다.

 

또한 말풍선 아이콘은 이니스프리 챗봇으로

이니스프리 제품, 행사, 회원이벤트 등의 여러 문의사항에 대한 정보를 빠르게 확인할 수 있습니다.

 

---

 

[ 메인 페이지 : 팝업창 ]

 

 

POPUP

여러개의 팝업창을 메인에 띄워야 하는 경우,

대부분 홈페이지들은 팝업창을 동시에 여러개를 마구잡이로 띄웁니다.

하지만 이니스프리 홈페이지의 경우 팝업창을 동일한 크기로 맞춰 한 곳에 모아

하나씩 옆으로 넘기며 볼 수 있게 구성하였습니다.

마구잡이로 여러개를 동시에 띄우는 것보다 훨씬 깔끔하고 정돈되며, 정보를 한 눈에 보기 편하다는 장점을 지닙니다.

하지만 슬라이드처럼 자동으로 넘어가지 않기 때문에

사용자가 팝업이벤트를 확인하기도 전에 창을 닫을 수 있다는 단점이 있습니다.

 

 

---

 

홈페이지 구성은 전체적으로 심플하나,

전체적으로 이미지나 텍스트가 커서 홈페이지 내용이 너무 꽉 차 보입니다.

전체적인 사이즈를 줄여 여백을 좀 두면 훨씬 더 깔끔하게 보일 거 같습니다.

또한 지금은 주로 흰색톤을 사용하고 있어서 단조로움이 있으나

이니스프리의 대표적인 포인트컬러인 짙은 녹색을 좀 더 활용하면

이니스프리만의 특색있는 홈페이지가 될 거 같습니다.

 

---

 

[ 서브 페이지 ]

 

 

 

1 NAVI

사용자가 현재 어디있는지 홈페이지 접속위치를 알려주는 네비게이션입니다.

아무리 복잡하게 홈페이지를 타고타고 들어와도

어디에 있는지 위치가 명확히 나타나 있어 페이지 혼동이 적으며,

페이지 상단에 네비게이션이 있어 어디로든지 편리하게 이동할 수 있 수 있습니다.

 

2 MESSAGE

오른쪽 부분에 해당 제품을 현재 몇명이서 보고 있는지 알 수 있는 메세지창이 있습니다.

해당 제품이 얼만큼 인기있는지 파악이 가능합니다.

 

3 PRODUCT

해당 제품과 같은 라인의 상품들을 구매아이콘 바로 아래에 위치시켜

현재 선택한 제품뿐만 아니라 같은 라인 다른 제품까지 구매할 수 있도록 유도하고 있습니다.

 

 

 

 

4 SUB MENU

서브 페이지에 스크롤을 내리면 서브메뉴가 상단에 착 달라붙어 고정됩니다.

그래서 사이트를 이용하는데 훨씬 편리하고 쉽게 쇼핑할 수 있습니다.

각 서브메뉴를 클릭하면 해당 내용이 나타납니다.

하지만 스크롤을 내리면 로고가 사라지면서 헤더가 고정되어 여러번 레이어를 타고 타고

들어왔을때 메인페이지로 한번에 바로 돌아가기 어렵다는 단점이 있습니다.

 

5 PURCHSE_01

스크롤 내리기 전에는 서브페이지 첫 화면에 위치해 있다가

스크롤을 내리기 시작하면 하단에 일정 위치에서 제품선택/장바구니/구매하기 창이 하단에 짠!하고 나타납니다.

사용자가 온라인 쇼핑하면서 구매를 위해 스크롤을 위아래로 왔다갔다하는 불편함이 없도록 기능을 만들었습니다.

하지만 오른쪽 하단에 TOP버튼이 없어 위쪽 내용을 보려면 다시 스크롤을 계속 굴려야하는 단점이 있습니다.

쇼핑하는데 최적화된 페이지가 될 수 있었을텐데...이 부분이 다소 아쉽습니다.

 

6 PURCHSE_02

구매하기 버튼을 클릭하면 로그인페이지로 이동하거나

비회원으로 구매할지에 대한 선택 버튼이 모달팝업창으로 나타납니다.

선택버튼만 딸랑 존재하는 것이 아니라 회원가입을 유도하기 위해

회원 구매시 혜택에 대한 정보도 담고 있습니다.

 

7 REVIEW

해당 제품을 구매했던 고객들의 리뷰가 있는 곳입니다.

간략하게 사용자가 올린 제품사진, 평점, 구매후기 내용이 담겨 있으며

해당 리뷰를 클릭시 리뷰가 팝업창처럼 크게 나타나 자세한 후기에 대한 내용을 볼 수 있습니다.

 

 

---

 

[ 마무리 ]

 

1

팝업창을 슬라이드형태로 한 곳에 모아 깔끔하고 정돈되게 구성해

사용자에게 한 눈에 파악할 수 있도록 내용을 배치하였습니다.

 

2

서브페이지에서 각 서브목록에서 내용을 편리하게 볼 수 있도록

스크롤 내리면 서브메뉴에 헤더를 fixed시켰습니다.

(추가로 top버튼도 있으면 사용자가 이용하기에 더 편리할 거 같습니다.)

 

3

최근 본 목록/챗봇상담을 플로팅 배너를 사용하여

사용자가 쇼핑하는데 최대한 불편함이 없도록 제작하였습니다.