Krispy Kreme · 2020. 11. 6. · 크리스피크림(Krispy Kreme) 은미국의도넛체인회...
Transcript of Krispy Kreme · 2020. 11. 6. · 크리스피크림(Krispy Kreme) 은미국의도넛체인회...
Krispy KremeWebsite renewal project
COPYRIGHT 2018.07 Kim Minji All rights reserved.
크리스피 크림 (Krispy Kreme) 은 미국의 도넛 체인 회
사이다. 모회사의 명칭은 Krispy Kreme Doughnuts, 으
로 1937년에 미국 노스캐롤라이나 주 윈스턴세일럼
(Winston-Salem)에서 시작되었다. 미국 전통의 글레이즈
드 도넛으로 유명하다.
아시아 최초로 대한민국에 1호점을 서울특별시 서대문
구 신촌에 오픈하고 대한민국 내에 130개 점포 (2016년
9월 30일 기준)를 운영 중에 있다.
I N T R O D U C E
K r i s p y K r e m e 소 개
02
가맹점을 늘리기 위한 컨텐츠를 만들어주세요
신제품의 사진을 크게 넣어 제품 홍보가 되게 해주세요
크리스피 크림에서 사용할 수 있는 기프트 카드에 대한내용이 웹사이트 이용자들에게 잘 전달되게 해주세요
05
A N A L Y S I S
요 구 사 항 분 석
03
KRISPY KREME WEB RENEWAL PROJECT
가맹점에 관심이 있는 이용자들을 위한 컨텐츠를메인 페이지에 배너 형태로 배치한다
매달 출시되는 신제품 이미지를 메인 빅 비주얼에 배치하여크리스피 크림 도너츠의 이미지를 살려준다
메인 페이지에 상품권 관련 컨텐츠를 간략한 문구와 함께배치하여 이용자들에게 홍보가 되도록 한다.
A N A L Y S I S
요 구 사 항 분 석
04
KRISPY KREME WEB RENEWAL PROJECT
검색을 통해 유입 되는 이용자 88%
사용자 유입 경로 분석
2018년 6월 기준
자료출처 시밀러웹 (www.similarweb.com) & 알렉사 (https://www.alexa.com)
06
검색 키워드
05
A N A L Y S I S
이 용 자 분 석
Sub target크리스피 크림 가맹점 사업에 관심이 있는
예비 창업주
MAIN TARGET
크리스피 크림 매장을 이용하는 소비자
07
A N A L Y S I S
타 겟 설 정
06
KRISPY KREME WEB RENEWAL PROJECT
이름 : 김소현
나이 : 21세
직업 : 학생
웹사이트 방문 목적 :
이달의 신상 도넛을 알아보기 위해
& 할인 프로모션 이벤트를 확인하기 위해
08
A N A L Y S I S
페 르 소 나 설 정
이름 : 안길강
나이 : 54세
직업 : 창업에 관심이 있는 퇴직자
웹사이트 방문 목적 :
가맹점 개점에 대한 대략적인 정보를
알아보기 위하여 웹사이트 방문
07
KRISPY KREME WEB RENEWAL PROJECT
나눔고딕, 돋움, Helvetica
폰트 사이즈는 본문 12px 부터 헤드라인 41px 등성격에 따라 차등적으로 사용 하였으나
본문의 폰트 사이즈가 작은 편으로,가독성 개선이 필요
대비가 확실한 녹색과 붉은 색상이 시그니처 컬러.웹사이트에는 주로 백색 바탕에 녹색을 사용
메인 페이지에는 종이 질감의 배경을 사용,서브페이지엔 제품의 패키지 디자인과 같은 도트 무늬를
백그라운드에 사용한 것이 특징적임
09
A N A L Y S I S
K r i s p y K r e m e 웹 사 이 트 분 석
pattern# ffffff #007550 #ce1041
Concept color Concept color 2Main color
08
KRISPY KREME WEB RENEWAL PROJECT
메인 비주얼
주로 이벤트, 제휴 정보가 명시되어있는빅 비주얼의 height 550px 로 사이즈가 커서
이용자들의 내용 식별이 용이하며
각 비주얼들이 흥미를 유발 할 수 있도록시각적으로 잘 디자인 되어있다.
10
A N A L Y S I S
웹 사 이 트 분 석 : 장 점
09
KRISPY KREME WEB RENEWAL PROJECT
SNS (인스타그램) 섹션
메인 페이지에 인스타그램 QR코드를 배치하여크리스피 크림 인스타그램이 홍보될 수 있도록 하였다.
다만 QR코드 스캔 APP을 사용하여 따로 접속 해야 하는번거로움이 있다는 점이 아쉬우므로
해당 SNS에 업로드 되는 이미지에 링크를 걸어메인 페이지에 띄우는 방향으로 개선한다.
11
A N A L Y S I S
웹 사 이 트 분 석 : 장 점
10
KRISPY KREME WEB RENEWAL PROJECT
신제품/인기제품 조회
일일히 선택하여 ‘확인’ 버튼을클릭해야 하는 번거로움이 있다
조회가 불편함
제품들을 갤러리 형태로 배열하고신제품 이미지는 최상단에 위치하게 한다
또한, 메인 페이지에 신제품 이미지배치하여 관심을 유도한다
13
A N A L Y S I S
웹 사 이 트 분 석 : 단 점
11
KRISPY KREME WEB RENEWAL PROJECT
SNS 섹션
SNS 섹션의 FACEBOOK 컨텐츠의내용이 비어있어
미완성인 듯한 느낌을 준다
FACEBOOK 을 연동시켜내용이 업로드 될 수 있도록 한다
혹은 업로드가 잦은인스타그램만 컨텐츠만 연동
14
A N A L Y S I S
웹 사 이 트 분 석 : 단 점
12
KRISPY KREME WEB RENEWAL PROJECT
15
A N A L Y S I S
웹 사 이 트 분 석 : 단 점
제품 / 이벤트 섹션의 사이즈
해당 섹션의 사이즈와폰트 사이즈가 충분히 크지 않아대략적인 내용을 파악 하는데에
어려움이 있다
해당 섹션의 크기를 키우고가독성 개선을 위해 폰트 사이즈를 키운다
13
KRISPY KREME WEB RENEWAL PROJECT
# ffffff #f8b138 #2b170f
나눔바른고딕, 나눔고딕, 돋움
나눔 바른 고딕을 사용하였다
본문 13px / 헤드라인 20~25pxGNB 13px / LNB 13px 등으로
타 웹사이트에 비하여 폰트 사이즈가 작은 편
백색을 바탕으로 하여 깔끔하다섹션들의 사이즈가 큼직하여 가독성이 좋다
세로로 긴 레이아웃을 채택하였고메인에 컨텐츠와 이미지들을 다양하게 배치
16
B E N C H I M A R K I N G
타 사 웹 사 이 트 분 석 : 던 킨 도 너 츠
Main color Point color Sub color
14
KRISPY KREME WEB RENEWAL PROJECT
‘빅비주얼’ 의 부재
웹 사이트 이용자에게 병원이 가진 특정한 이미지나 분위기를 전달할 기회가없음
HUMC WEB RENEWAL PROJECT PROPOSAL 4
17
B E N C H I M A R K I N G
타 사 웹 사 이 트 분 석 : 장 점
신제품 정보
메인 페이지 최 상단에 위치한 tap을 클릭하면이달의 신제품 정보 팝업이 나타나
이용자 입장에서 재미있게 신제품 정보를 확인 할 수 있다.
15
KRISPY KREME WEB RENEWAL PROJECT
‘빅비주얼’ 의 부재
웹 사이트 이용자에게 병원이 가진 특정한 이미지나 분위기를 전달할 기회가없음
HUMC WEB RENEWAL PROJECT PROPOSAL 4
16
B E N C H I M A R K I N G
타 사 웹 사 이 트 분 석 : 단 점
Font size
폰트 사이즈가 top menu 10px,gnb 13px 로 작은 편이다.가독성을 저해 하는 요소
폰트 사이즈를 최소 11px 이상으로 적용한다.
KRISPY KREME WEB RENEWAL PROJECT
#ffc000 #ffffff #2b170f#ededed
나눔스퀘어, Arial
본문에는 간결하고 현대적이며 가독성이 좋은 폰트 채택하여GNB 18px , LNB 16px 본문 14px 적용
전체적으로 font의 사이즈를 키워기존 웹페이지의 단점이었던 가독성을 개선한다
Summer 시즌 컨셉,노란색을 포인트로
사용하여 밝고 경쾌한 느낌을 강조한다
백색 바탕으로 깔끔한 느낌을 준다.
19
Main colorConcept color Sub color 1 Sub color 2
R E N E W A L C O N C E P T
구 체 적 구 현 방 안
17
KRISPY KREME WEB RENEWAL PROJECT
빅 비주얼의 사이즈를 크게 지정하여 흥미 유발과 동시에 쉽게 식별할 수 있도록 한다
상품 이미지들을 메인에 다양하게 배치하여 크리스피 크림의 이미지를 강조한다
메인 페이지 내 이벤트와 신제품 섹션의 사이즈를 키워 이용자가 쉽게 확인할 수 있도록 한다
가독성의 개선을 위하여 본문과 헤드라인 등 폰트 사이즈를 키운다.
가맹점주, 예비 가맹점주들을 위한 컨텐츠를 메인 페이지에 배치한다
상품권 관련 컨텐츠를 메인 페이지에 배치한다.
SNS ( instagram ) 에 업로드 되는 이미지들을 메인 페이지에 링크를 걸어 배치한다
20
R E N E W A L C O N C E P T
구 체 적 구 현 방 안
18
KRISPY KREME WEB RENEWAL PROJECT
2119
R E N E W A L C O N C E P T
I D E A S K E TC H : M A I N PA G E
KRISPY KREME WEB RENEWAL PROJECT
575 px
110 px
280 px
720 px
160 px
610px
1200 px
250 px
2220
R E N E W A L C O N C E P T
W I R E F R A M E : M A I N PA G E
670 px
KRISPY KREME WEB RENEWAL PROJECT
250 px
R E N E W A L C O N C E P T
I D E A S K E TC H : S U B PA G E
2321
KRISPY KREME WEB RENEWAL PROJECT
23
R E N E W A L C O N C E P T
W I R E F R A M E : S U B PA G E
22
110 px
160 px
50 px
220 px
000 px
(LNB 메뉴에따라 유동적)
KRISPY KREME WEB RENEWAL PROJECT
1200 px
4.EVENT1.BRAND 2.MENU 3. STORE
2_1. 도넛
2_2. 커피/음료
5_1.딜리버리안내
5_2. 딜리버리가능매장
1_1.도넛극장
1_2.브랜드스토리
1_3.제휴카드소개
1_4.기프트카드
3_1. 매장 찾기 4_1. 진행 이벤트
0.메인
5.DELIVERY
3_2. 가맹 안내 4_2. 종료 이벤트
4_3. 당첨자 발표2_3. 쿨타임
2_4.. MD제품소개
2523
R E N E W A L C O N C E P T
S I T E M A P
1_5.공지사항
4_3. Pokemo GO
KRISPY KREME WEB RENEWAL PROJECT
6_1.온라인폴
6_2. SURVEY
6.SHARE
4_3. 옴니
3-2. 가맹 안내
로고
1.BRAND 4.EVENT 5. DELIVERY2.MENU 3.STORE
회원가입 ENG(언어설정)로그인
4_1. 진행 이벤트
1_4. 기프트 카드
2_1.도넛 2_2. 커피/음료 2_3 .쿨타임
R E N E W A L C O N C E P T
PA G E M A P : M A I N
고객의 소리 개인정보취급방침 윤리경영 고객의 소리 사이트맵
24
KRISPY KREME WEB RENEWAL PROJECT
1-5. 공지 사항
3-1. 매장 찾기
프로젝트이름
내용
크리스피 크림 웹사이트 리뉴얼
메인페이지 레이아웃 1-1
버전
작성자
1.0
김민지
화면이름(ID) 메인페이지 ( 0.메인 )
Description
크리스피 크림로고
BIG VISUAL‘DONUT OF THE MONTH’
[이달의 신제푸]
4.EVENT1.BRAND 2.MENU 3. STORE 5.DELIVERY
로그인 회원가입 언어 ENG
26
R E N E W A L C O N C E P T
S TO RY B O A R D : M A I N PA G E
MENU
[icon]DONUT
[도넛메뉴링크버튼]
[icon]BEVERAGE
[음료메뉴링크버튼]
[icon]COOL TIME[아이스메뉴링크버튼]
GIFT CARD BANNER감사한마음 크리스피크림으로 전달하세요
25
KRISPY KREME WEB RENEWAL PROJECT
프로젝트이름
내용
크리스피 크림 웹사이트 리뉴얼
메인페이지 레이아웃 1-2
버전
작성자
1.0
김민지
화면이름(ID) 메인페이지 ( 0.메인 )
Description
2726
R E N E W A L C O N C E P T
S TO RY B O A R D : M A I N PA G E
EVENT
IMAGE[헤드라인]
이벤트 설명
날짜 ~ YY.MM.DD
IMAGE[헤드라인]
이벤트 설명
날짜 ~ YY.MM.DD
IMAGE[헤드라인]
이벤트 설명
날짜 ~ YY.MM.DD
가맹점 안내 BANNER
NOTICE STORE
KRISPY KREME WEB RENEWAL PROJECT
Footer
프로젝트이름
내용
롯데콘서트홀 웹사이트 리뉴얼
메인페이지 레이아웃 1-2
버전
작성자
1.0
김민지
화면이름(ID) 메인페이지 ( 0.메인 )
Description
고객의 소리 개인정보취급방침 윤리경영
27
배너
27
R E N E W A L C O N C E P T
S TO RY B O A R D : M A I N PA G E
크리스피 크림로고
배너
고객의 소리 사이트맵
주소
카피라이트
KRISPY KREME WEB RENEWAL PROJECT
SOCIAL LIVE
IMAGE IMAGE IMAGE IMAGE
insta twitter
프로젝트이름
내용
크리스피 크림 웹사이트 리뉴얼
서브페이지 레이아웃
버전
작성자
1.0
김민지
화면이름(ID) 서브페이지 ( 2. MENU )
Description
SUB BIG VISUAL[ 경로 표시 Home > GNB > LNB ]
Ex ) Home > MENU > DONUT
LNB CONTENT
28
Home 2.MENU 2_1.도넛
28
R E N E W A L C O N C E P T
S TO RY B O A R D : S U B
크리스피 크림로고
로그인 회원가입 언어 ENG
4.EVENT1.BRAND 2.MENU 3. STORE 5.DELIVERY
Footer
고객의 소리 개인정보취급방침 윤리경영
배너
크리스피 크림로고
배너
고객의 소리 사이트맵
주소
카피라이트
KRISPY KREME WEB RENEWAL PROJECT
T H A N K Y O U