탐앤탐스 웹 리뉴얼 프로젝트 CHOI JUNG WON

Contents 01 02 04 03 Introduce Target Analysis Renewal Concept 탐앤탐스 소개 요구사항 및 분석 방문자 분석 Target Analysis 타겟 설정 페르소나 02 Renewal Concept COLOR/FONT 컨셉 구체적 구현방안 아이디어 스케치 와이어 프레임 사이트 맵 스토리보드 04 Bench Marking 탐앤탐스 분석 탐앤탐스 장/단점 할리스커피 분석 할리스커피 장/단점 SWOT분석 03 02

01. Introduce 01. Introduce TOM N TOMS 소개 TOM N TOMS 소개 TOM N TOMS WEB RENEWAL PROJECT 01. Introduce TOM N TOMS 소개 01. Introduce TOM N TOMS 소개 탐앤탐스는 대한민국 커피전문점 문화가 태동하던 1999년 초 서울 압구정동에 첫 발을 내디딘 이래 현재까지 토종 커피전문점브랜드로써의 자존심을 굳건히 지키고 있습니다. 최상의 커피를 제공하기 위해 토종 커피전문점 최초로 로스팅 공장과 커피 아카데미를 설립했으며, 국내 커피전문점 중 유일하게 매장에서 직접 프레즐을 제조 판매하는 등 맛과 품질에 대한 경쟁력을 강화하고 있습니다.  03

01. Introduce 요구사항 및 분서 메인 디자인을 단조롭지 않게 해주세요. TOM N TOMS WEB RENEWAL PROJECT 01. Introduce 요구사항 및 분서 메인 디자인을 단조롭지 않게 해주세요. 이용자가 탐앤탐스 메뉴를 쉽게 볼 수 있게 해주세요. 종료된 이벤트는 삭제 해주세요. 04

TOM N TOMS WEB RENEWAL PROJECT 01. Introduce 요구사항 및 분석 메인 디자인을 단조롭지 않게 해주세요. 헤더에 디자인을 주고 텍스트나 아이콘에 마우스 오버 시 애니메이션 효과나 동적인 변화를 준다. 이용자가 탐앤탐스 메뉴를 쉽게 볼 수 있게 해주세요. 탐앤탐스의 메뉴들을 메인페이지에 잘 보이도록 추가한다. 종료된 이벤트는 삭제 해주세요. 진행중인 이벤트만 남기고 종료된 이벤트는 삭제한다. 05

02. Target Analysis 방문자 분석 검색으로 접속하는 방문자가 65%로 전체 접속자 절반에 해당된다. TOM N TOMS WEB RENEWAL PROJECT 02. Target Analysis 방문자 분석 검색으로 접속하는 방문자가 65%로 전체 접속자 절반에 해당된다. 남,여 비율은 크게 차이 없지만 여성이 조금 더 높았으며, 주로 저녁 시간대에 다양한 연령대로 검색을 하였지만 10대, 20대가 가장 많았다. 출처 https://www.similarweb.com/website/tomntoms.com https://datalab.naver.com 06

02. Target Analysis 방문자 분석 MAIN TARGET SUB TARGET TOM N TOMS WEB RENEWAL PROJECT 02. Target Analysis 방문자 분석 MAIN TARGET SUB TARGET 탐앤탐스 메뉴를 확인하려는 20대 여성 탐앤탐스 창업에 관심이 있는 40대 남성 07

“ 과제를 하면서 먹을 메뉴를 확인하려고 방문 ” TOM N TOMS WEB RENEWAL PROJECT 02. Target Analysis 방문자 분석 신예은 / 24살 “ 과제를 하면서 먹을 메뉴를 확인하려고 방문 ” MAIN TARGET SUB TARGET 공지철 / 41살 “ 카페 창업에 관심을 갖고 방문 “ 08

03. Bench Marking TOM N TOMS 분석 COLOR MAIN SUB POINT FONT #FFFFFF TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 분석 COLOR MAIN SUB POINT #FFFFFF #EEEEEE #571F1C #C1262C FONT NanumGothic 10px~40px 09

01 03. Bench Marking TOM N TOMS 장점1 메인페이지에 매장 찾기 서비스와 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 장점1 01 메인페이지에 매장 찾기 서비스와 신규매장 배너가 있어 매장 홍보에 적극적이다. 10

02 03. Bench Marking TOM N TOMS 장점2 탐앤탐스의 원두, 커피용품 등의 제품들을 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 장점2 02 탐앤탐스의 원두, 커피용품 등의 제품들을 판매하는 사이트가 따로 있어 더 편리하고 자세히 이용할 수 있다. 11

03 03. Bench Marking TOM N TOMS 장점3 창업에 관심이 많은 방문자를 위해 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 장점3 03 창업에 관심이 많은 방문자를 위해 가맹문의 서비스가 잘 되어있다. 12

01 03. Bench Marking TOM N TOMS 단점1 비주얼이 부드럽게 넘어가지않고 양쪽 끝 부분과 가운데 부분이 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 단점1 01 비주얼이 부드럽게 넘어가지않고 양쪽 끝 부분과 가운데 부분이 끊어지다가 합쳐지는 느낌을 주며 넘어간다. 하나하나의 비주얼 이미지 전체가 왼쪽으로 부드럽게 넘어가게 수정한다. 해결방안 13

02 03. Bench Marking TOM N TOMS 단점2 Gnb 메인메뉴 오버 시 몇몇개의 하위 메뉴명 앞에 붙는 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 단점2 02 Gnb 메인메뉴 오버 시 몇몇개의 하위 메뉴명 앞에 붙는 ‘탐탐’의 글자가 중복으로 붙어 깔끔해 보이지 않는다. 해결방안 하위메뉴 앞에 붙는 '탐탐'글자를 없애고 깔끔하게 하위 메뉴명만 보이게 수정한다. 14

03 03. Bench Marking TOM N TOMS 단점3 메인페이지에 빅비주얼, 배너를 제외하고 단조로운 느낌을 준다. TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking TOM N TOMS 단점3 03 메인페이지에 빅비주얼, 배너를 제외하고 단조로운 느낌을 준다. 해결방안 이용자의 관심을 끌기 위해 마우스 오버 시 동적인 효과를 준다. 15

03. Bench Marking HOLLYS COFFEE 분석 COLOR MAIN SUB POINT FONT #FFFFFF TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 분석 COLOR MAIN SUB POINT #FFFFFF #BA000C #8b9091 FONT NanumGothic 11px~30px 16

01 03. Bench Marking HOLLYS COFFEE 장점1 빅비주얼에서 신제품의 계절감을 잘 표현하였고, TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 장점1 01 빅비주얼에서 신제품의 계절감을 잘 표현하였고, 깔끔함과 재미를 주어 디자인하였다. 17

02 03. Bench Marking 2 1 3 HOLLYS COFFEE 장점2 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 장점2 1 2 02 3 가맹문의 서비스를 창업에 관심이 많은 이용자가 쉽게 접할 수 있도록 잘 보이는 곳에 여러 개를 배치하였다. 18

03 03. Bench Marking HOLLYS COFFEE 장점3 메인페이지에서 로고색상과(빨강,검정) 하얀색을 사용하여 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 장점3 03 메인페이지에서 로고색상과(빨강,검정) 하얀색을 사용하여 통일성이 있고 깔끔해 보인다. 19

01 03. Bench Marking HOLLYS COFFEE 단점1 gnb메인메뉴 오버했을때 영문과 한글을 같이 보이는데 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 단점1 01 gnb메인메뉴 오버했을때 영문과 한글을 같이 보이는데 한글 메뉴명은 링크 연결이 되어있지 않다. 해결방안 한글 메뉴명을 눌러도 서브페이지로 이동할 수 있게 수정한다. 20

02 03. Bench Marking HOLLYS COFFEE 단점2 gnb오버 시 하위메뉴들의 배경색이 짙고 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 단점2 02 gnb오버 시 하위메뉴들의 배경색이 짙고 글씨 색상이 같은 계열의 회색이라 답답한 느낌을 준다. 해결방안 배경색을 하얀색으로 바꾸고 글자색은 짙은 회색으로 수정한다. 21

03 03. Bench Marking HOLLYS COFFEE 단점3 서브페이지에서 서브메뉴가 세로로 되어있는데 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking HOLLYS COFFEE 단점3 03 서브페이지에서 서브메뉴가 세로로 되어있는데 그 안의 하위메뉴를 볼때마다 마우스를 오버해야 하는 번거로움이 있다.. 해결방안 lnb의 하위메뉴를 가로로 보이게 수정한다. 22

S W O T 03. Bench Marking SWOT 분석 토종 커피전문점 최초로 로스팅 공장과 커피 아카데미를 TOM N TOMS WEB RENEWAL PROJECT 03. Bench Marking SWOT 분석 강점 약점 토종 커피전문점 최초로 로스팅 공장과 커피 아카데미를 설립하였고, 국내 커피전문점 중 유일하게 매장에서 직접 프레즐을 제조 판매하는 등 맛과 품질에 대한 경쟁력을 강화하고 있습니다.  커피값을 인상하는 과정에서 가맹점에 값싼 원두를 공급했다는 논란이 불거지며 여론의 도마 위에 오르기도 했다. S W O T 탐앤탐스 매장이 대한민국을 넘어서 해외로 까지 점점 넓혀 가고 있다. 집에서 직접 원두를 내려 마시는 홈카페의 성장과 더불어 커피 브랜드의 포화로 경쟁은 더욱 치열해지고 있다. 기회 위협 23

04. Renewal Concept 스토리보드 COLOR MAIN SUB POINT FONT TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 스토리보드 SUB컬러와 POINT컬러를 서로 바꿔준다. COLOR MAIN SUB POINT #FFFFFF #043925 #571F1C FONT NanumSquare 12px~40px 글자크기 최소 10px에서 12px로 변경 24

04. Renewal Concept 스토리보드 텍스트나 아이콘, 이미지에 마우스 오버 시 효과가 나오게 수정한다. TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 스토리보드 텍스트나 아이콘, 이미지에 마우스 오버 시 효과가 나오게 수정한다. gnb오버 시 보이는 하위메뉴명에 ‘탐탐＇단어를 삭제한다. 메인페이지에 상품메뉴소개 섹션을 추가하여 눈에 띄게 한다. 빅비주얼에 끊기는 이미지 에러를 부드럽게 넘어가도록 해결한다. 최소 글자 크기를 12px로 수정하고 포인트 컬러를 #043925로 변경하여 디자인 한다. 25

TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 스토리보드 MAIN SUB 26

04. Renewal Concept MAIN PAGE 와이어프레임 와이어프레임-MAIN 200PX 650PX 1920PX TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 와이어프레임-MAIN 200PX 650PX 1920PX MAIN PAGE 와이어프레임 360PX 60PX 360PX 350PX 450PX 550PX 500PX 170PX 27

04. Renewal Concept SUB PAGE 와이어프레임 와이어프레임-SUB 300PX 60PX 360PX 500PX TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 와이어프레임-SUB 300PX 60PX 360PX 500PX SUB PAGE 와이어프레임 120PX 1200PX 500PX 291PX 12PX 28

04. Renewal Concept 사이트맵 MAIN 28 TOM N TOMS WEB RENEWAL PROJECT 6.1 브랜드 소개 6.2 회사소개 6.3 채용안내 6. TOM N TOMS 1.1 커피 1.2 음료 1.3 프레즐 MENU 2.1 이벤트 2.2 공모전 2. EVENT 3.1 국내매장찾기 3.2 글로벌매장찾기 3.3 신규매장소개 3. STORE 4.1 프랜차이즈 4.2 마이탐 멤버스 4.3 제휴할인/기프트카드 4. SERVICE 4.4 아카데미 5.1 소식 5.3 사회복지 후원활동 5.2 예술문화 후원일동 5. COMMUNITY 5.4 고객만족센터 1.4 브레드 외 탐앤탐스몰 매장찾기 로그인 회원가입 language 28

04. Renewal Concept 스토리보드 2 TNB TNB TNB TNB TNB logo 1 3 GNB GNB GNB TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 스토리보드 1.0 버전 작성자 Description 설명 번호 01 02 03 04 05 로고(탐앤탐스) TOP MENU (탐앤탐스몰, 매장찾기, 로그인, 회원가입, LANGUAGE) 빅비주얼 탐앤탐스 메뉴보기 프로젝트이름 내용 탐앤탐스 리뉴얼 메인페이지 레이아웃 1-1 화면이름(ID) 메인페이지 ( 0.메인 ) 최정원 2 TNB TNB TNB TNB TNB logo 1 3 GNB GNB GNB GNB GNB GNB (MENU, EVENT, STORE,SERVICE,COMMUNITY, TOM N TOMS) 4 VIG VISUAL 5 IMAGE 30

(개인정보처리방침, 멤버스이용약관, 가맹안내, 고객만족센터,SITEMAP, ADDRESS, COPYRIGHT) TOM N TOMS WEB RENEWAL PROJECT 04. Renewal Concept 스토리보드 1.0 버전 작성자 Description 설명 번호 06 07 08 10 11 Image (가맹문의,매장찾기,신규매장) Banner (탐앤탐스 아카데미) FOOTER (개인정보처리방침, 멤버스이용약관, 가맹안내, 고객만족센터,SITEMAP, ADDRESS, COPYRIGHT) 프로젝트이름 내용 탐앤탐스 리뉴얼 메인페이지 레이아웃 1-1 화면이름(ID) 메인페이지 ( 0.메인 ) 최정원 09 6 IMAGE IMAGE IMAGE Banner (이벤트) 7 BANNER Contents (공지사항) image (sns) 8 BANNER 9 CONTENTS 10 IMAGE 11 FOOTER 31