presentation DOOKKI Renewal 2018 – 10 - 17 BY. 윤이나 최윤서 구민희

웹선정 경쟁사 선정, 분석 리뉴얼 방향 PROJECT STEPS 웹 디자인 분석 벤치마킹 웹 선정 완성본 (예상)

두끼 소개 브랜드 소개 “두끼 떡볶이” 두끼 떡볶이는 대한민국 대표 간식 떡볶이의 올바른 이해와 누구나 좋아하는 떡볶이의 끝없는 진화의 모습을 보여드리기 위해 만들어진 브랜드입니다. “떡볶이로 한끼! 볶음밥으로 두끼!” 떡볶이로부터 볶음밥까지 누구나 자유롭게 많은 재료를 가지고 직접 조리해 즐길 수 있는 즉석떡볶이 무한리필 뷔페를 의미합니다.

웹 페이지 분석

< 정성적조사 > SNS 두끼 매장 가려고 이용방법 찾으러 후기 보려고 했더니 sns 부분이 애매하네요. 홈페이지에 들어왔는데 잘못 들어온줄 알았어요. 즉석떡볶이 프랜차이즈점 홈페이지가 아니라 보험사나 전자기업홈페이지에 들어온 줄 알았어요. 후기 보려고 했더니 sns 부분이 애매하네요. sns 아이콘 바로 밑이 아니라 한 줄 더 밑에 눈 내용이 있는지 모르겠어요. 가독성이 떨어지는 것 같아요. 두끼떡볶이 이번에 신메뉴 나왔다고 해서 즐거운 마음으로 홈페이지 들어갔다가 실망했어요. 신메뉴에 대한 정보를 배너에 있는 사진 1장 말고는 찾을 수 없었어요. 메뉴에도 없고… 사이트가 너무 불친절하네요. 사이트 첫 페이지에 찾으려는 정보가 없어 불편하네요. 모든 컨텐츠를 메뉴라인에 압축 해 놓는것 보다는 첫 페이지에 사용자들이 원하는 정보들로 배치하는게 좋을 것 같아요. 하나하나 메뉴라인에서 찾아보기 불편합니다!

< 정량적조사 > 20대 10대 30대 기타 40대 남자 여자 연령대 62% 40% 36% 38% 16% 3% 5% 설문 < 정량적조사 > 20대 62% 40% 10대 36% 38% 30대 기타 16% 3% 40대 5% 남자 여자 연령대

상징적인 컬러 미흡 #272727 #191919 1. 적합한 색을 사용했는가? 두끼 웹 분석 1. 적합한 색을 사용했는가? 상징적인 컬러 미흡 메인 비쥬얼 영역의 배너는 어두운 필터를 사용하거나 음식과 배경을 음식과 유사한 색으로 배치하여 주가 되어야 할 음식이 부각되지 않음. #272727 #191919 배경 컬러로 어두운 색을 사용하여 홈페이지에 방문했을 때 떡볶이(외식) 브랜드라는 것을 인지하기 힘듦.

확대 샷

? “맛있는 떡볶이, 그 이상의 즐거움” 2. 브랜드 이미지와 일치하는가? 추구하는 이미지와 회사 슬로건과는 거리가 멀다. 두끼 웹 분석 2. 브랜드 이미지와 일치하는가? “맛있는 떡볶이, 그 이상의 즐거움” ? 추구하는 이미지와 회사 슬로건과는 거리가 멀다. 지나친 홍보에 치우친 컨텐츠로 구성되어 지루하고 답답한 느낌.

노출하고 싶은 정보 중 일부만 지나치게 노출되어있음. 두끼 웹 분석 3. 노출하고 싶은 정보와 노출되어있는 정보가 일치하는가? 세계화 , 프렌차이즈 체결 증명 노출하고 싶은 정보 중 일부만 지나치게 노출되어있음. 기업에서 노출하고 싶어하는 정보 중에 글로벌 기업이라는 이미지와 고객들이 신뢰하는 브랜드는 메인 배너와 푸터 영역에 잘 나타나고 있으나, 메인페이지 대부분이 브랜드 홍보에만 너무 치중되어 있는 느낌. 주목도와 우선 순위를 고려하지 않은 레이아웃. 수상 인증 마크

3. 노출하고 싶은 정보와 노출되어있는 정보가 일치하는가? 두끼 웹 분석 3. 노출하고 싶은 정보와 노출되어있는 정보가 일치하는가? 신메뉴이지만 배너 3번째에 위치해서 인지하기 어려우며 클릭시 해당 페이지로 넘어가지 않아 신메뉴에 대한 정보를 얻을수가 없음. 주가 되어야 할 음식 사진 또한 4번째 배너에 위치하고 있어 유저들이 보지 못하고 지나치는 경우가 많음.

최적화 되지 않은 불완전한 페이지 구성으로 신뢰도 반감 두끼 웹 분석 4. 사용자가 사용하기 편한가? 두끼 떡볶이 메뉴가 명확하게 나타나 있지 않아, 사용자가 직접 들어가봐야만 어떤 메뉴가 있는지 인지할 수 있음. 새로운 정보, 이벤트, 공지들이 텍스트 숨김효과로 인해 잘 전달되지 않으며, 정보를 찾기 위해서는 다른페이지로 이동해야함. 최적화 되지 않은 불완전한 페이지 구성으로 신뢰도 반감

경쟁사 웹 페이지 분석

경쟁사 소개 “청년다방” 경쟁사 소개 젊은 다방을 컨셉트로 한 떡볶이 프렌차이즈 브랜드입니다. (복고풍) 경쟁사 소개 “청년다방” 젊은 다방을 컨셉트로 한 떡볶이 프렌차이즈 브랜드입니다. (복고풍) 유행에 편입되지 않는 (오랫동안 변하지 않는 브랜드) 처음 가게를 가진, 처음 장사를 시작한, 처음 손님을 기다리는 청년의 그 마음을 떠올리며 청년다방이라는 브랜드를 만들었습니다. 알바생을 화자로 설정해 주 소비층인 20대의 공감을 이끌어냈으며 구독자들이 공감할 수 있는 상황별 공감 에피소드를 생산하고, 계절별로 공감요소를 더한 다양한 시즌성 컨셉 컨텐츠를 생산해 유저들의 흥미를 유발시켰습니다.

로고나 메인배너의 일러스트를 통해 7080의 느낌을 잘 살리고 있음 일관된 청년/복고 이미지와 경쟁사 분석 로고 청년 이미지 로고나 메인배너의 일러스트를 통해 7080의 느낌을 잘 살리고 있음 블로그 / SNS 메인 음식 사진 일관된 청년/복고 이미지와 유저를 고려한 알찬 컨텐츠 구성 등이 인상적 검증된 맛집 홍보용 동영상 떡볶이 판매 기업이라는 것을 한번에 파악할 수 있음 이미지나 폰트를 큼직하게 사용 →가독성이 좋음 브랜드 이미지와 성공스토리 제시 일러스트나 개성있는 폰트의 사용으로 세련됨과 재미를 줌

두끼 vs 청년다방 두끼떡볶이 vs 청년다방 VS 정보 얕음 충분 유용성 차별화 글로벌화 강조 청년 강조 레이아웃 아주 얕음 콘텐츠 정보 얕음 충분 유용성 차별화 글로벌화 강조 청년 강조 두끼 vs 청년다방 디자인 레이아웃 아주 얕음 얕음 컬러 충분 타이포 그래피 고딕체 궁서체 사용성 접근성 어려움 간편한, 편리한 총평 별점

벤치마킹1 벤치마킹 ▶죠스떡볶이 http://www.jawsfood.co.kr/ ▶콘텐츠/서비스 측면 메뉴구조 : 회사소개, 메뉴, 매장안내, 커뮤니티 유용성 측면 : 충분 마케팅 차별화 : 즐거움 강조 ▶디자인 측면 레이아웃 : 깔끔함 컬러 : red, warm grey 타이포그래피 : 나눔고딕 – 귀엽고 깔끔한 ▶사용성 측면 접근성 : 쉬운, 간편한 벤치마킹1 전체적으로 벤치마킹

벤치마킹2 벤치마킹 ▶KFC (케이에프씨) https://www.kfckorea.com/ ▶콘텐츠/서비스 측면 메뉴구조 : 박스, 세트, 치킨, 버거, 사이드, 음료 유용성 측면 : 충분 마케팅 차별화 : HOT한 메뉴 강조 ▶디자인 측면 레이아웃 : 깔끔한, 알찬 컬러 : red, white 타이포그래피 : 깔끔한 ▶사용성 측면 접근성 : 쉬운, 간편한 벤치마킹2 컨텐트 벤치마킹

리뉴얼 방향 단정한, 정리된 레이아웃 주황색, 갈색 계열 컬러 깔끔한 타이포그래피 리얼한 음식 사진 이용하기 편리하고 알찬 컨텐츠

와이어프레임 와이어프레임 & 스토리보드

<Header> <Main Visual> <Menu> 스토리보드 헤더 영역 메인 비쥬얼 영역 # ff7900 # ffa22a # ffac2a #3d2312 #ffffff 헤더 영역 1 <Header> 1 logo gnb 언어 - font-color:#3d2312 - gnb영역에 마우스 오버시 밑줄이 생기고 드롭 다운 형식으로 하위 항목이 나타남 - border: 5px solid #ff7900 - 선택된 하위 항목은 글자 굵기 굵어짐 - 언어는 국기로 표현하고 옆에 위치한 화살표 아이콘 클릭 시 다른 국기가 드롭다운 형식으로 나타남 2 <Main Visual> 2 메인 비쥬얼 영역 - 메인 비쥬얼 영역은 이미지 슬라이드로 제작 - 5초마다 한 번씩 슬라이드가 작동 - 오른쪽에서 왼쪽으로 작동 - 약 2~3개의 이미지 3 <title> 3 메뉴 영역 <Menu> - 메뉴영역의 첫번째 줄은 이용방법이고 두번째 줄은 메뉴영역으로 나뉨 - 선택항목 클릭시 content 내용 변경 됨 - 선택된 항목의 font: bold #ff7900 - 두번째 메뉴는 content 슬라이드로 제작 - 화살표 클릭시 숨겨진 내용 나타남 <title>

스토리보드 store 영역 <New Store> 이벤트 영역 <Event> SNS 영역 4 store 영역 - store영역의 좌측은 신규매장 소개, 우측은 매장찾기 영역으로 나뉨 - 신규매장 영역은 슬라이드로 제작 - 5초마다 한 번씩 슬라이드가 작동 - 오른쪽에서 왼쪽으로 작동 - 페이져 버튼은 화살표 아이콘을 사용 - 매장 찾기 영역은 input사용 4 <New Store> 5 이벤트 영역 - event 영역의 좌측은 푸드트럭, 가운데는 동영상 영역, 우측은 환경부담금 제도 영역으로 나뉨 - 푸드 트럭 영역 클릭시 해당 이벤트 안내 페이지로 이동 - 동영상 영역 클릭시 동영상이 팝업창 형태로 나타남 - 환경부담금 영역 클릭시 해당 제도 안내 페이지로 이동 - 푸드트럭과 환경부담금제도 영역의 배경색은 #ffac2a 5 <Event> 6 6 SNS 영역 - sns 영역은 슬라이드로 제작 - 페이져 버튼 클릭시 슬라이드 작동 - 왼쪽에서 오른쪽으로 작동 - sns 이미지에 마우스 오버시 해당 내용이 나타남 - sns 아이콘에 마우스 오버시 아이콘 컬러 변경 <SNS>

스토리보드 content 영역 <content> 퀵메뉴 영역 <quick menu> 푸터 영역 7 content 영역 - content영역의 좌측은 global영역 우측은 창업영역으로 나뉨 global영역은 해외 지점 소개가 주 목적으로 세계지도와 국기를 통해 나타냄 - 클릭시 해당 안내 페이지로 이동 -창업 영역 클릭해 해당 안내 페이지로 이동 7 <content> 8 퀵메뉴 영역 - quick menu는 페이지 하단과 우측에 고정 - 하단 메뉴는 가맹문의 우측메뉴는 매장찾기/가맹문의/사업설명회 신청/ 고객의 소리/top 버튼을 아이콘으로 나타냄 -우측메뉴 마우스 오버시 아이콘이 글자로 바뀜 8 <quick menu> 9 푸터 영역 9 - background-color: #3d2312 - footer은 상단의 수상 영역과 하단 영역으로 나뉨 - 하단 영역에는 회사관련정보와 copyright 입력 <Footer> logo

완성본 완성본 (예상)

리뉴얼 요약 사용자의 편의를 위한 웹사이트의 UI/UX의 개선과 목적에 적합한 레이아웃 재배치를 통하여 매출증대 · 높은 이벤트 참여율을 이루기 위함. 또한, 새로운 컨텐츠를 통하여, 신규 웹 페이지 방문자가 보다 자주 드나들 수 있는 웹사이트로 발전시킴. 리뉴얼 요약

Q & A Q & A

THANK YOU.