Krispy Kreme · 2020. 11. 6. · 크리스피크림(Krispy Kreme) 은미국의도넛체인회 사이다. 모회사의명칭은Krispy Kreme Doughnuts, 으 로1937년에미국노스캐롤라이나주윈스턴세일럼

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


검색을 통해 유입 되는 이용자 88%

사용자 유입 경로 분석

2018년 6월 기준

자료출처 시밀러웹 (www.similarweb.com) & 알렉사 (https://www.alexa.com)

06

검색 키워드

05

A N A L Y S I S

이 용 자 분 석

http://www.similarweb.com/

Sub target크리스피 크림 가맹점 사업에 관심이 있는

예비 창업주

MAIN TARGET

크리스피 크림 매장을 이용하는 소비자

07

A N A L Y S I S

타 겟 설 정

06


이름 : 김소현

나이 : 21세

직업 : 학생

웹사이트 방문 목적 :

이달의 신상 도넛을 알아보기 위해

& 할인 프로모션 이벤트를 확인하기 위해

08

A N A L Y S I S

페 르 소 나 설 정

이름 : 안길강

나이 : 54세

직업 : 창업에 관심이 있는 퇴직자

웹사이트 방문 목적 :

가맹점 개점에 대한 대략적인 정보를

알아보기 위하여 웹사이트 방문

07


나눔고딕, 돋움, 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


메인 비주얼

주로 이벤트, 제휴 정보가 명시되어있는빅 비주얼의 height 550px 로 사이즈가 커서

이용자들의 내용 식별이 용이하며

각 비주얼들이 흥미를 유발 할 수 있도록시각적으로 잘 디자인 되어있다.

10

A N A L Y S I S

웹 사 이 트 분 석 : 장 점

09


SNS (인스타그램) 섹션

메인 페이지에 인스타그램 QR코드를 배치하여크리스피 크림 인스타그램이 홍보될 수 있도록 하였다.

다만 QR코드 스캔 APP을 사용하여 따로 접속 해야 하는번거로움이 있다는 점이 아쉬우므로

해당 SNS에 업로드 되는 이미지에 링크를 걸어메인 페이지에 띄우는 방향으로 개선한다.

11

A N A L Y S I S

웹 사 이 트 분 석 : 장 점

10


신제품/인기제품 조회

일일히 선택하여 ‘확인’ 버튼을클릭해야 하는 번거로움이 있다

조회가 불편함

제품들을 갤러리 형태로 배열하고신제품 이미지는 최상단에 위치하게 한다

또한, 메인 페이지에 신제품 이미지배치하여 관심을 유도한다

13

A N A L Y S I S

웹 사 이 트 분 석 : 단 점

11


SNS 섹션

SNS 섹션의 FACEBOOK 컨텐츠의내용이 비어있어

미완성인 듯한 느낌을 준다

FACEBOOK 을 연동시켜내용이 업로드 될 수 있도록 한다

혹은 업로드가 잦은인스타그램만 컨텐츠만 연동

14

A N A L Y S I S


12


15

A N A L Y S I S


제품 / 이벤트 섹션의 사이즈

해당 섹션의 사이즈와폰트 사이즈가 충분히 크지 않아대략적인 내용을 파악 하는데에

어려움이 있다

해당 섹션의 크기를 키우고가독성 개선을 위해 폰트 사이즈를 키운다

13


# 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


‘빅비주얼’ 의 부재

웹 사이트 이용자에게 병원이 가진 특정한 이미지나 분위기를 전달할 기회가없음

HUMC WEB RENEWAL PROJECT PROPOSAL 4

17


타 사 웹 사 이 트 분 석 : 장 점

신제품 정보

메인 페이지 최 상단에 위치한 tap을 클릭하면이달의 신제품 정보 팝업이 나타나

이용자 입장에서 재미있게 신제품 정보를 확인 할 수 있다.

15


‘빅비주얼’ 의 부재

웹 사이트 이용자에게 병원이 가진 특정한 이미지나 분위기를 전달할 기회가없음

HUMC WEB RENEWAL PROJECT PROPOSAL 4

16


타 사 웹 사 이 트 분 석 : 단 점

Font size

폰트 사이즈가 top menu 10px,gnb 13px 로 작은 편이다.가독성을 저해 하는 요소

폰트 사이즈를 최소 11px 이상으로 적용한다.


#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


빅 비주얼의 사이즈를 크게 지정하여 흥미 유발과 동시에 쉽게 식별할 수 있도록 한다

상품 이미지들을 메인에 다양하게 배치하여 크리스피 크림의 이미지를 강조한다

메인 페이지 내 이벤트와 신제품 섹션의 사이즈를 키워 이용자가 쉽게 확인할 수 있도록 한다

가독성의 개선을 위하여 본문과 헤드라인 등 폰트 사이즈를 키운다.

가맹점주, 예비 가맹점주들을 위한 컨텐츠를 메인 페이지에 배치한다

상품권 관련 컨텐츠를 메인 페이지에 배치한다.

SNS ( instagram ) 에 업로드 되는 이미지들을 메인 페이지에 링크를 걸어 배치한다

20


구 체 적 구 현 방 안

18


2119


I D E A S K E TC H : M A I N PA G E


575 px

110 px

280 px

720 px

160 px

610px

1200 px

250 px

2220


W I R E F R A M E : M A I N PA G E

670 px


250 px


I D E A S K E TC H : S U B PA G E

2321


23


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 메뉴에따라 유동적)


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


S I T E M A P

1_5.공지사항

4_3. Pokemo GO


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 .쿨타임


PA G E M A P : M A I N

고객의 소리 개인정보취급방침 윤리경영 고객의 소리 사이트맵

24


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


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


프로젝트이름

내용



버전

작성자

1.0

김민지


Description

2726



EVENT

IMAGE[헤드라인]

이벤트 설명

날짜 ~ YY.MM.DD

IMAGE[헤드라인]

이벤트 설명

날짜 ~ YY.MM.DD

IMAGE[헤드라인]

이벤트 설명

날짜 ~ YY.MM.DD

가맹점 안내 BANNER

NOTICE STORE


Footer

프로젝트이름

내용

롯데콘서트홀 웹사이트 리뉴얼


버전

작성자

1.0

김민지


Description

고객의 소리 개인정보취급방침 윤리경영

27

배너

27




배너

고객의 소리 사이트맵

주소

카피라이트


SOCIAL LIVE

IMAGE IMAGE IMAGE IMAGE

facebook

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


S TO RY B O A R D : S U B


로그인 회원가입 언어 ENG

4.EVENT1.BRAND 2.MENU 3. STORE 5.DELIVERY

Footer

고객의 소리 개인정보취급방침 윤리경영

배너


배너

고객의 소리 사이트맵

주소

카피라이트


T H A N K Y O U

Documents

Krispy Kreme · 2020. 11. 6. · 크리스피크림(Krispy Kreme) 은미국의도넛체인회 사이다. 모회사의명칭은Krispy Kreme Doughnuts, 으 로1937년에미국노스캐롤라이나주윈스턴세일럼