E-commerce Web Design
E-commerce Web Design
E-commerce Web Design
Blue Bottle Coffee
Blue Bottle Coffee
Blue Bottle
Coffee
반응형 웹 리디자인
반응형 웹 리디자인
반응형 웹 리디자인
PROJECT OVERVIEW
PROJECT TYPE
개인 프로젝트
DURATION
2주
TOOL
피그마
ROLE
(기여도100%)
리서치,
그리드 시스템
UI 프로세스 with 스타일 가이드
블루보틀은 미국에서 제3의 물결을 일으키며 ‘커피계의 애플 ‘이라는 별칭을 얻을 정도로 자신들만의 깔끔하고 일관적인 브랜드 아이덴티티를 이어나가고 있습니다. 온라인 주문이 더욱 많아지고 효율적인 움직임을 추구하는 소비자들이 많아지고 있기 때문에 고객과 효과적으로 커뮤니케이션하여 쇼핑 편의를 강화할
수 있도록 블루보틀의 온라인 웹사이트를 리디자인 했습니다.
블루보틀은 미국에서 제3의 물결을 일으키며 ‘커피계의 애플 ‘이라는 별칭을 얻을 정도로 자신들만의 깔끔하고 일관적인 브랜드 아이덴티티를 이어나가고 있습니다. 온라인 주문이 더욱 많아지고 효율적인 움직임을 추구하는 소비자들이 많아지고 있기 때문에 고객과 효과적으로 커뮤니케이션하여 쇼핑 편의를 강화할 수 있도록 블루보틀의 온라인 웹사이트를 리디자인 했습니다.
PROJECT TYPE
개인 프로젝트
DURATION
2주
TOOL
피그마
피그마
ROLE(기여도100%)
리서치,
그리드 시스템,
UI 프로세스 with 스타일 가이드
Discover
현재 페이지 분석
상품에 대한 설명보다는 브랜드 소개
히어로 섹션의 이미지 화질은 좋지 않고, 현재 블루보틀의 국내 웹사이트의 전체적인 구성은 상품에 대한 설명 보다는 회사의 소개가 중점적이므로 웹 사이트의 타켓팅은 소비자가 아닙니다.
가독성 안좋은 줄글들
웹 사이트는 메뉴소개 보다는 블루보틀의 소개, 가맹점 소개 등이 더 많고 거의 모든 설명이 줄글이기 때문에 가독성이 떨어집니다.
낮은 이미지 화질과 카테고리의 부재
상품 이미지의 화질이 좋지 않으며 상품 카테고리가 되어 있지 않아 상품을 탐색하기에 직관적이지 않습니다.
상품에 대한 설명보다는 브랜드 소개
히어로 섹션의 이미지 화질은 좋지 않고, 현재 블루보틀의 국내 웹사이트의 전체적인 구성은 상품에 대한 설명 보다는 회사의 소개가 중점적이므로 웹 사이트의 타켓팅은 소비자가 아닙니다.
가독성 안좋은 줄글들
브랜드의 소개,가독성 안좋은 줄글들
웹 사이트는 메뉴소개 보다는 블루보틀의 소개, 가맹점 소개 등이 더 많고 거의 모든 설명이 줄글이기 때문에 가독성이 떨어집니다.
낮은 이미지 화질과 카테고리의 부재
상품 이미지의 화질이 좋지 않으며 상품 카테고리가 되어 있지 않아 상품을 탐색하기에 직관적이지 않습니다.
어떻게 하면 사용자가 보다 환대를 느끼며 제품에 관심을 가지고 정보를 얻을 수 있을까요?
어떻게 하면 사용자가 보다 환대를 느끼며 제품에 관심을 가지고
정보를 얻을 수 있을까요?
어떻게 하면 사용자가 보다 환대를 느끼며
제품에 관심을 가지고 정보를 얻을 수
있을까요?
Grid System
유연한 그리드는 반응형 디자인의 초석으로 모든 장치에서 우수한 사용자 경험을 보장합니다. 그리드 시스템을 기반으로 데스크탑, 랩탑, 태블릿, 모바일의 4가지 장치에 대한 페이지를 디자인했습니다.
200px
20px
200px
200px
20px
200px
Desktop
Desktop
1920px / 12 Columns
1920px / 12 Columns
1920px / 12 Columns
200px
20px
200px
1520px
50px
20px
50px
50px
20px
50px
924px
Laptop
Laptop
1024px / 6 Columns
1024px / 6 Columns
50px
20px
50px
Tablet
768px / 4 Columns
20px
40px
40px
688px
924px
20px
16px
16px
40px
16px
40px
Tablet
768px / 4 Columns
Mobile
393px / 4 Columns
768px / 4 Columns
40px
20px
40px
16px
16px
16px
688px
360px
360px
360px
Style Guide
Mobile
393px / 4 Columns
16px
16px
16px
#00A8D7
Colors
Primary Color
#EBD7C2
#BD9978
#D0CECF
#FFFFFF
#00A8D7
Colors
Primary Color
#EBD7C2
#BD9978
#FFFFFF
#D0CECF
Fonts(영문)
Fonts(한글)
Noto Sans
Noto Sans
Noto Sans
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
Halis GR
Halis GR
Halis GR
가 나 다 라 마 바 사 아 자 차 카 타 파 하
1 2 3 4 5 6 7 8 9 0
가 나 다 라 마 바 사 아 자 차 카 타 파 하
1 2 3 4 5 6 7 8 9 0
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
#00A8D7
Colors
Primary Color
#EBD7C2
#BD9978
#FFFFFF
#D0CECF
LANDING PAGE
Desktop 1920px
Deliver
하이피델리티 디자인
소비자의 쇼핑 여정에 기반하여 그 과정을 따라 레이아웃을 구성하고 소비자에게 강조하고자 하는 콘텐츠를 전면에 배치하여 필요한 정보만으로 메인 페이지를 구성해 접근성과 편의성을 높였습니다.
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
메인 배너
최상단에 브랜드 추천 제품을 배치하여 시즌 별 트렌드를 반영한 상품을 광고하는 등 상품의 전략적 노출이 가능하도록 디자인 했습니다.
상품 노출
브랜드의 상품을 모아놓고 바로 구매할 수 있도록 구매
욕구를 상승시키기 위해 메인배너 바로 아래에 위치시켰습니다. 다른 페이지로 이동 없이 장바구니 담기 버튼을 이용해 상품을 저장하고 페이지 탐색을 이어갈 수 있도록 합니다.
광고와 구매 유도
상품 설명과 화보컷을 함께 배치하여 소비자의 이목을 집중시키고, 마우스 클릭 시 해당 상품으로 연결하여 상품을 효과적으로 광고 합니다.
브루잉 가이드 설명
브루잉 가이드 정보를 제공하여 사용자들이 커피에 대한 지식을 얻을 수 있도록 합니다. 마우스 호버했을 시 브루잉의 종류를 확인할 수 있도록 했습니다.
상품 노출과 구매 유도
커피 이외의 상품들을 노출하여 전략적으로 상품 구매를 유도합니다. 다른 페이지로 이동 없이 장바구니 담기 버튼을 이용해 상품을 저장하고 페이지 탐색을 이어갈 수 있도록 합니다.
블루보틀의 이야기
블루보틀의 브랜드 역사와 가치를 소개함으로써 방문객들에게 온전한 몰입을 유도합니다.
블루보틀의 공간 소개
고객 경험이 중요한 커피 브랜드인 만큼 오프라인 매장도 쉽게 찾을 수 있도록 배치했습니다.
카테고리화
블루보틀의 제품들을 카테고리별로 나누고, 카드에 마우스 호버시 수량 선택과 장바구니 담기가 나타나 화면 이동 없이 쇼핑을 이어갈 수 있게 했습니다. 또한 블루보틀의 콜드브루캔 상품을 광고하여 구매를 유도합니다.
Desktop 1920px
LANDING PAGE
Before
After
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
메인 배너
최상단에 브랜드 추천 제품을 배치하여 시즌 별 트렌드를 반영한 상품을 광고하는 등 상품의 전략적 노출이 가능하도록 디자인 했습니다.
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
상품 노출
브랜드의 상품을 모아놓고 바로 구매할 수 있도록 구매
욕구를 상승시키기 위해 메인배너 바로 아래에 위치시켰습니다. 다른 페이지로 이동 없이 장바구니 담기 버튼을 이용해 상품을 저장하고 페이지 탐색을 이어갈 수 있도록 합니다.
광고와 구매 유도
상품 설명과 화보컷을 함께 배치하여 소비자의 이목을 집중시키고, 마우스 클릭 시 해당 상품으로 연결하여 상품을 효과적으로 광고 합니다.
브루잉 가이드 설명
브루잉 가이드 정보를 제공하여 사용자들이 커피에 대한 지식을 얻을 수 있도록 합니다. 마우스 호버했을 시 브루잉의 종류를 확인할 수 있도록 했습니다.
상품 노출과 구매 유도
커피 이외의 상품들을 노출하여 전략적으로 상품 구매를 유도합니다. 다른 페이지로 이동 없이 장바구니 담기 버튼을 이용해 상품을 저장하고 페이지 탐색을 이어갈 수 있도록 합니다.
블루보틀의 이야기
블루보틀의 브랜드 역사와 가치를 소개함으로써 방문객들에게 온전한 몰입을 유도합니다.
블루보틀의 공간 소개
고객 경험이 중요한 커피 브랜드인 만큼 오프라인 매장도 쉽게 찾을 수 있도록 배치했습니다.
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
메인 배너
최상단에 브랜드 추천 제품을 배치하여 시즌 별 트렌드를 반영한 상품을 광고하는 등 상품의 전략적 노출이 가능하도록 디자인 했습니다.
상품 노출
브랜드의 상품을 모아놓고 바로 구매할 수 있도록 구매
욕구를 상승시키기 위해 메인배너 바로 아래에 위치시켰습니다. 다른 페이지로 이동 없이 장바구니 담기 버튼을 이용해 상품을 저장하고 페이지 탐색을 이어갈 수 있도록 합니다.
광고와 구매 유도
상품 설명과 화보컷을 함께 배치하여 소비자의 이목을 집중시키고, 마우스 클릭 시 해당 상품으로 연결하여 상품을 효과적으로 광고 합니다.
브루잉 가이드 설명
브루잉 가이드 정보를 제공하여 사용자들이 커피에 대한 지식을 얻을 수 있도록 합니다. 마우스 호버했을 시 브루잉의 종류를 확인할 수 있도록 했습니다.
상품 노출과 구매 유도
커피 이외의 상품들을 노출하여 전략적으로 상품 구매를 유도합니다. 다른 페이지로 이동 없이 장바구니 담기 버튼을 이용해 상품을 저장하고 페이지 탐색을 이어갈 수 있도록 합니다.
블루보틀의 이야기
블루보틀의 브랜드 역사와 가치를 소개함으로써 방문객들에게 온전한 몰입을 유도합니다.
블루보틀의 공간 소개
고객 경험이 중요한 커피 브랜드인 만큼 오프라인 매장도 쉽게 찾을 수 있도록 배치했습니다.
Desktop 1920px
SUB PAGE
카테고리화
블루보틀의 제품들을 카테고리별로 나누고, 카드에 마우스 호버시 수량 선택과 장바구니 담기가 나타나 화면 이동 없이 쇼핑을 이어갈 수 있게 했습니다. 또한 블루보틀의 콜드브루캔 상품을 노출하여 구매를 유도합니다.
카테고리화
블루보틀의 제품들을 카테고리별로 나누고, 카드에 마우스 호버시 수량 선택과 장바구니 담기가 나타나 화면 이동 없이 쇼핑을 이어갈 수 있게 했습니다. 또한 블루보틀의 콜드브루캔 상품을 광고하여 구매를 유도합니다.
Redesign
Before
After
After
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
POUR OVER
더 보기
푸어 오버 : 섬세하고 매력적인, 다함께 마시기에 좋은 커피
반응형 디자인
반응형 디자인
Laptop(1024px)
Tablet(768px)
Mobile(390px)
Laptop(1024px)
Tablet(768px)
Mobile(390px)
Laptop(1024px)
Tablet(768px)
Mobile(390px)
데스크탑, 랩탑, 태블릿, 모바일 구조에 맞게 반응형 구조를 디자인했고, 사이즈에 따른 기기를 고려하며 폰트의 크기, 레이아웃 등 사용자에게 효과적으로 내용을 전달할 수 있는 디자인을 고려했습니다.
데스크탑, 랩탑, 태블릿, 모바일 구조에 맞게 반응형 구조를 디자인했고, 사이즈에 따른 기기를 고려하며 폰트의 크기, 레이아웃 등 사용자에게 효과적으로
내용을 전달할 수 있는 디자인을 고려했습니다.
Laptop(1024px)
Tablet(768px)
Mobile(390px)
