01 Renewal Concept

목차 요거프레소 소개 요구사항 및 분석 웹사이트 방문자 분석 타겟 설정 페르소나 구체적 구현 방안 아이디어 스케치 02 01. INTRODUCE 02. REQUIREMENT 요거프레소 소개 요구사항 및 분석 웹사이트 방문자 분석 타겟 설정 페르소나 03. ANALYSIS 05. RENEWAL CONCEPT 04. BENCH MARKING 구체적 구현 방안 아이디어 스케치 와이어 프레임 사이트 맵 스토리 보드 검찰청 웹사이트 분석 검찰청 웹사이트 장단점 경쟁사_ 웹사이트 분석 경쟁사 웹사이트 장단점 SWOT 분석

+ INPRODUCE tast y trend y togethe r 03 2005년 기업사업본부 설립 1호점 오픈 YOGERPRESSO 소개 2013년 ‘제10회 웹 어워드 코리아’ 최우수상 수상 trend y tast y togethe r + INDEX 01 2014년 2014 ‘우수프랜차이즈’ 수상 시그니처 메뉴’메리딸기 100만잔 판매돌파 요거프레소는 시대의 변화(Trendy)에 따라 최상의 재료로 만든 맛있는 음료(tasty)를 가장 합리적인 가격에 제공하며 가맹점과 더불어(Together) 성장하는 ‘따뜻한 기업’ 입니다. 2018년 1300개의 지점 오픈

REQUIREMENT 요구사항 및 분석 곧 이벤트가 많이 시작 될 예정이니 이벤트 창이 잘 보이게 해주세요 04 요구사항 및 분석 곧 이벤트가 많이 시작 될 예정이니 이벤트 창이 잘 보이게 해주세요 이벤트 배너의 위치를 사이트의 상단으로 올리고 크기조정으로 강조 시키겠습니다 INDEX 02 요고프레소만의 느낌을 강조 시켜주세요 요고프레소의 시그니처메뉴인 ‘메리딸기’ 의 색상을 사용하여 포인트컬러로 사용하겠습니다 창업자가 많이 늘어나고 있습니다 창업을 위한 창이 잘 보여졌으면 좋겠습니다 창업관련 배너를 글씨와 함께 배너를 따로 만들고 이벤트배너와 어우러지게 배치 하겠습니다

검색으로 방문하는 접속자가 57.24%로 가장 높은 수치를 기록함 ANALYSIS 05 방문자 분석 INDEX 02 검색으로 방문하는 접속자가 57.24%로 가장 높은 수치를 기록함 출처 : https://www.similarweb.com

SNS로 유입되는 방문자가 Twitter와 Facebook으로 확인되면서 젊은층의 방문자가 많은것을 알 수 있다 ANALYSIS 06 방문자 분석 INDEX 02 SNS로 유입되는 방문자가 Twitter와 Facebook으로 확인되면서 젊은층의 방문자가 많은것을 알 수 있다 출처 : https://www.similarweb.com

어플리케이션과 앱이용자가 있으며 다시 한번 젊은층의 방문자가 많은것을 알 수 있다 ANALYSIS 07 방문자 분석 INDEX 02 어플리케이션과 앱이용자가 있으며 다시 한번 젊은층의 방문자가 많은것을 알 수 있다 출처 : https://www.similarweb.com

ANALYSIS 타겟 설정 MAIN TARGET SUB TARGET 08 INDEX 03 가맹점 위치와 이벤트를 알아보기 위해 방문한 20대 여성 요거프레소 창업을 희망 하는 30대 남성

ANALYSIS 알아 보기 위해 방문 하여 정보를 얻기 위해 방문 페르소나 이름 : 안지영 나이 : 25세 09 페르소나 MAIN TARGET SUB TARGET INDEX 03 이름 : 안지영 나이 : 25세 방문목적 : 요거프레소의 신메뉴를 알아 보기 위해 방문 이름 : 윤두준 나이 : 31세 방문목적 : 요거프레소 창업을 희망 하여 정보를 얻기 위해 방문

BENCH MARKING 홈페이지 분석 Color Font MAIN: #ffffff POINT: #c40e24 10 홈페이지 분석 Color INDEX 04 MAIN: #ffffff POINT: #c40e24 Font NotoKR-Medium "Noto Sans",돋움 SIZE : 12 – 18px

BENCH MARKING 11 홈페이지 장점 INDEX 04 젊은 방문자들을 위해 트렌드에 맞게 디자인 되어있다

BENCH MARKING 12 홈페이지 장점 INDEX 04 배너들이 정리정돈이 잘 되어 있어 깔끔하다

BENCH MARKING 탑메뉴의 폰트 크기가 크고 보기 좋으며, 메인메뉴리스트와 색상을 13 홈페이지 장점 INDEX 04 탑메뉴의 폰트 크기가 크고 보기 좋으며, 메인메뉴리스트와 색상을 다르게 주어 다른 메뉴인것을 알기 쉽게 배치 하였다

메인페이지에서 사진의 비중이 크고 글씨가 없어서 BENCH MARKING 14 홈페이지 단점 메인페이지에서 사진의 비중이 크고 글씨가 없어서 스크롤을 끝까지 안내려 보게 된다 INDEX 04 사진의 크기를 조절하고 글씨와 조합하여 배너들의 가독성을 높힌다

상품페이지에서 상품을 호버하거나 클릭시 구분이 BENCH MARKING 15 홈페이지 장점 INDEX 04 상품페이지에서 상품을 호버하거나 클릭시 구분이 안되어 있어서 무엇이 선택되는지 헷갈린다 메인메뉴바에서 마우스 호버했을시, 폰트의 변화를 준다

BENCH MARKING 창업배너나 이벤트 등 중요 배너들의 위치가 맨 아래에 있어 찾기 힘들다 16 홈페이지 단점 창업배너나 이벤트 등 중요 배너들의 위치가 맨 아래에 있어 찾기 힘들다 INDEX 04 창업배너와 이벤트등의 배너의 위치를 조절하여 찾기 편하게 배치한다

BENCH MARKING C27 홈페이지 분석 Color Font MAIN: #ffffff POINT: #222222 17 C27 홈페이지 분석 Color INDEX 04 MAIN: #ffffff POINT: #222222 SIGNATURE: #444444 Font basic "Nanu-Gothic",돋움 SIZE : 13 – 24px

BENCH MARKING 18 C27 홈페이지 장점 INDEX 04 전체적인 디자인이 깔끔하고 보기 편한하다

BENCH MARKING 19 C27 홈페이지 장점 INDEX 04 상품들의 구분이 잘 되어 있어 선택하기 편하다

BENCH MARKING 로그인창과 회원가입 창이 새페이지로 열리게 해서 페이지 이동 횟수를 줄였다 C27 홈페이지 장점 20 INDEX 04 로그인창과 회원가입 창이 새페이지로 열리게 해서 페이지 이동 횟수를 줄였다

BENCH MARKING 색상이 하얀색과 검은색 회색계열의 색상으로 이루어져 고급스럽지만 카페의 이미지와는 거리가 멀다 21 C27 홈페이지 단점 색상이 하얀색과 검은색 회색계열의 색상으로 이루어져 고급스럽지만 카페의 이미지와는 거리가 멀다 INDEX 04 브랜드의 시그니처 메뉴의 치즈케이크의 색상인 노랑계열을 사용하여 시그니처 컬러를 추가한다

BENCH MARKING sns의 오류로 로딩으로 넘어가고 페이지가 뜨지않는다. 주소수정이나 css를 다시 재조정한다 22 C27 홈페이지 단점 INDEX 04 sns의 오류로 로딩으로 넘어가고 페이지가 뜨지않는다. 주소수정이나 css를 다시 재조정한다

BENCH MARKING 폰트가 너무 작아서 가독성이 떨어지면서 너무 단조롭고 심심한 느낌을 준다 폰트의 크기를 늘리고, 23 C27 홈페이지 단점 INDEX 04 폰트가 너무 작아서 가독성이 떨어지면서 너무 단조롭고 심심한 느낌을 준다 폰트의 크기를 늘리고, 폰트의 종류를 좀더 트랜드 하게 변경한다

S O T W BENCH MARKING SWOT 분석 Strength Opportunity Weakness Threat 24 SNS홍보와 어플케이션, 앱 등 접하기 쉽게 편리하게 이용 할 수 있게 운영 하고 있다 요거프레소의 시그니처 메뉴인 ‘메리딸기’ 가 강한 이미지를 주어 인지도가 높다 INDEX 05 Weakness W Threat T 가맹점을 많이 보유하고 있지 않아 찾기 여러 지역에서 보기 쉽지 않다 최근 요거프레소의 가맹점주가 직원의 성차별적인 갑질로 인해 논란이 일어 났다

Renewal concept 구체적인 구현방안 Color Font MAIN: #ffffff POINT: #c40e24 25 구체적인 구현방안 Color MAIN: #ffffff INDEX 05 POINT: #c40e24 SIGNATURE: #ef92a9 Font Nanum-Square "Noto Sans",돋움 SIZE : 12 – 18px

Renewal concept 구체적인 구현방안 요거프레소의 시그니처메뉴인 ‘메리딸기’와 어울리는 색상을 26 구체적인 구현방안 요거프레소의 시그니처메뉴인 ‘메리딸기’와 어울리는 색상을 추가하며 글꼴을 Nanum-Square로 변경하여 상쾌한 이미지로 변화를 준다 배너의 크기와 위치를 변경하고 가독성을 위해 이벤트 배너와 창업배너를 이미지배너들 사이에 배치시킨다 INDEX 05 SNS홍보 배너를 탑메뉴에서 내리고 어플리케이션과 앱의 아이콘도 만들어 같이 배치시킨다 커피와 디저트등 미리 볼 수 있는 상품페이지에서 마우스 호버시 변화가 없는 것을 구분하기 위해 호버시 선이 생기는것, 크기변화를 추가한다

Renewal concept 27 아이디어 스케치 INDEX 05

Renewal concept 28 와이어 프레임 INDEX 05

Renewal concept 29 사이트맵 INDEX 05

Renewal concept 30 스토리 보드 INDEX 05