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