W E B S I T E R E N E W A L P R O J E C T 롯데콘서트홀웹사이트리뉴얼프로젝트 c PRODUCED BY SHIN HYEJI 2018 JUNE
0 1. I N T R O D U C E Lotte Concert Hall 소개 0 2. A N A LY S I S CONTENTS 요구사항분석해결방안분석 TARGET 분석 PERSONA 설정웹사이트분석 BENCH MARKING 0 3. R E N E W A L C O N C E P T 구체적구현방안 IDEA SKETCH WIRE FRAME SITE MAP STORY BORAD
I N T R O D U C E 롯데콘서트홀소개 롯데콘서트홀 ( Lotte Concert Hall ) 은대한민국서울특별시송파구올림픽로 300 롯데월드몰 8층부터 10층에걸쳐위치한클래식음악전용콘서트홀이다. 2016년 8월 18일, 정명훈지휘의서울시립교향악단개관공연과함께개관하였다. 객석수는합창석을포함하여 2,036석이며현재롯데문화재단에의해운영되고있다.
04 A N A L Y S I S 요구사항 롯데문화재단, 롯데콘서트홀의 Identity 를가진디자인구축 고객들을위한이용편의성, 정보가독성을위한최적의디자인을제시할것 공연의생동감이웹사이트를통해느껴질수있도록디자인
05 A N A L Y S I S 해결방안분석 적절한색상및이미지를활용한디자인으로롯데콘서트홀의특징및고유이미지를현대적으로표현 가독성을높이기위한디자인요소활용, 기능적편의를위한레이아웃 웹사이트에동적인효과가미빅비주얼에공연이미지를배치하여현장감선사
06 A N A L Y S I S 이용자분석 검색을통해유입되는이용자 66% 사용자유입경로분석 2018 년 5 월기준 검색키워드대부분이롯데콘서트홀을직접검색 자료출처시밀러웹 (www.similarweb.com)
07 A N A L Y S I S 타겟설정 MAIN TARGET 공연관람을위해공연정보를열람하려는일반인 Sub target 공연기획분야종사자
08 A N A L Y S I S 페르소나설정 이름 : 연정훈나이 : 40 세직업 : XX 기업 X 팀과장 웹사이트방문목적 : 공연관람을위한정보수집및웹을통한예매서비스이용 이름 : 박민영나이 : 31 세직업 : 공연기획레이블기획팀사원 웹사이트방문목적 : 기획중인 11 월공연의공연장대관문의를위해 HUMC WEB RENEWAL PROJECT PROPOSAL 4
09 A N A L Y S I S 롯데콘서트홀웹사이트분석 #e60313 #676767 #ad9a73 #221715 재단기업인롯데그룹의컬러레드를메인으로그와어울리는무채색들을서브컬러로지정하여웹사이트에사용고급스러우면서도은은한세련미를추구 현대적인느낌의어두운배경색과메인빅배너란에선율을시각화한듯한곡선이배너들을관통하는것이특징 나눔고딕, 돋움, Helvetica, Arial, Verdana, Tahoma, sans-serif; 주로한글은나눔고딕, 영문은 Arial 체를사용 폰트사이즈는본문 14px / GNB 16px / LNB 14px
10 A N A L Y S I S 웹사이트분석 : 장점 하단에공연일정을볼수있는캘린더가 fixed 되어있다. 막대형태의달력이페이지하단에고정되어있다특정날짜에마우스를오버하면블록처리되면서공연일정정보가간략하게제공되며해당박스를클릭하면상세페이지로이동하여이용자의정보접근이편리함 HUMC WEB RENEWAL PROJECT PROPOSAL 4
11 A N A L Y S I S 웹사이트분석 : 장점 우측상단의공연전체보기버튼 계획된연간공연과기획공연을한번에조회할수있음페이지를넘길수있다. 대략적인관람계획을세우기에용이하다. 다만고정된하단달력에내용이가려지는부분이존재하며좌우여백차이등의문제가있으므로가독성개선이필요해보임
12 A N A L Y S I S 웹사이트분석 : 단점 메인페이지공지섹션 공지사항의카테고리가일반 / 이벤트 / 앙코르 / 대관공고등으로분류되어있으나메인섹션에서는통합게재되어있다이용자의특성에따라열람하고자하는정보의속성이다르므로불편을야기할수있음 빅비주얼 의부재 웹사이트이용자에게병원이가진특정한이미지나분위기를전달할기회가없음 공지사항섹션내에해당탭들을추가, 공지는날짜없이최신순으로게재
13 A N A L Y S I S 웹사이트분석 : 단점 공연전체보기섹션 앞서언급했듯, 하단막대형태의달력에컨텐츠가가려지는부분이있으며좌우여백의차이등으로정돈되지못한느낌을준다 기존전체메뉴팝업을 새페이지팝업 혹은 페이지이동 으로변환작업. 기존팝업형태를유지하고자할경우레이아웃을수정한다.
14 A N A L Y S I S 웹사이트분석 : 단점 서브페이지타이틀섹션 모든서브페이지의타이틀이미지가동일하여. 통일감은있으나다소지루한느낌을줄수있다. 롯데콘서트홀의다양한이미지를서브페이지타이틀섹션에활용한다
15 A N A L Y S I S 웹사이트분석 : 단점 메인비주얼란전면수정 상영중이거나예정인공연데이터를메인화면중앙에전면노출하는방법으로접근을단순화, 이용자들에게즉시관람가능한공연정보를빠르게확인할수있도록설계하여기능적인편의를도모한점은장점이나 심미성이다소낮은부분이있으며 Top class 클래식전용홀 이라는독자성전달어려움 롯데콘서트홀이표방하고자하는브랜드의이미지를위해서빅비주얼을기존정보제공에서, 정체성을강조하는방향으로전면수정 다만공연데이터는메인페이지에서필수적으로제공되어야하는정보이므로따로섹션을마련한다.
16 B E N C H M A R K I N G 경기도문화의전당웹사이트분석 # ffffff #ededed #d3572a 백색을바탕으로하여깔끔하다로고에사용된색상중하나인주황색을포인트컬러로활용하여활기찬느낌을주었다. 엷은회색을 background 블록으로사용하여섹션간구분이명확 나눔스퀘어, 나눔바른고딕, NotoSans Bold 나눔스퀘어는헤드라인, 나눔바른고딕은본문 NotoSans Bold 는서브페이지헤드에사용 본문 14~15px / 헤드라인 25~38px GNB 18px / LNB 12px 등 본문과헤드라인의폰트타입, 사이즈차를크게두어제목과내용의식별이편리하다.
17 B E N C H M A R K I N G 타사웹사이트분석 : 장점 메인페이지퀵링크와로켓메뉴 메인상단부좌측과 GNB 우측에사용빈도높은메뉴들의 퀵링크와 로켓메뉴 를배치하여이용자들이원하는서비스를빠르게이용할수있도록함 다만 로켓아이콘 빠른접근 의연상이사용자에게는다소개념적일수있음또, 퀵링크와중복되는메뉴가있기때문에정리필요 빅비주얼 의부재 웹사이트이용자에게병원이가진특정한이미지나분위기를전달할기회가없음 HUMC WEB RENEWAL PROJECT PROPOSAL 4
18 B E N C H M A R K I N G 타사웹사이트분석 : 단점 슬라이더섹션 트랙섹션배너중복사용 트랙섹션의배너이미지중복사용으로사용자에게혼란을줄수있음 ( 공연장소가다름 ) 마우스오버시캡션효과를주어공연장소정보제공 빅비주얼 의부재 웹사이트이용자에게병원이가진특정한이미지나분위기를전달할기회가없음 트랙섹션 * 트랙섹션배너클릭시바로HUMC 상단의WEB 슬라이더 RENEWAL 섹션에내용이 PROJECT 표시되는 PROPOSAL 구조 4
19 R E N E W A L C O N C E P T 구체적구현방안 #e60313 #ffffff #ededed #ad9a73 Concept color Main color Sub color 1 Sub color 2 시그니처색상의일부그대로사용하여롯데그룹브랜드의일관된아이덴티티를유지하되 Red 색상의과용주의, 사용면적조절가독성을위해배경을백색위주로사용한다. 나눔스퀘어, Arial 본문에는간결하고현대적이며가독성이좋은 san-serif 폰트채택하여 GNB 16px, LNB 16px 본문 14px 적용 빅비주얼영문헤드라인에포인트서체 (serif 폰트 ) 사용으로클래식의고전적인느낌부여 Times
20 R E N E W A L C O N C E P T 구체적구현방안 가독성개선을위해배경에백색사용면적확대 빅비주얼란생성, 이미지배치하여사용자로하여금콘서트홀의현장감체험 서브페이지타이틀섹션에롯데콘서트홀의다양한이미지사용함 Top menu 정리 : 롯데문화재단, 로그인 [ 마이페이지 ], 회원가입, 언어, 검색제외한링크하단 footer 로이동 (SNS 링크포함 ) Quick menu : 아이콘사이즈축소하고링크개수 8 개로늘림 예매 / 빈야드회원가입 / 오시는길 / 좌석배치도 / 대관신청 / FAQ / 공연예절 / 재단소개 로고디자인과일맥상통하는 선율을시각화한곡선이미지 footer 의배경으로활용 메인에배치되는공지사항섹션에일반 / 이벤트 / 앙코르 / 대관공고탭추가
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 : M A I N P A G E
1180 px 22 110 px 50 px 610 px 115 px 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 515 px 150 px 330 px 190 px
23 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
1180 px 24 110 px 50 px 180 px 50 px 890 px (LNB 메뉴에 따라서유동적임 ) 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 190 px
25 R E N E W A L C O N C E P T S I T E M A P 0. 메인 1. 공연안내 / 예매 2. 롯데콘서트홀 3. 이용안내 4. 커뮤니티 5. 대관안내 / 신청 6. 마이페이지 1_1. 공연예매 2_1. 공연장소개 3_1. 시설안내 4_1. 공지사항 5_1. 대관절차안내 6_1. 예매확인. 취소 1_2. 예매안내 2_1-1. 음향 3_1-1.. 객석안내 4_1-1. 공지 5_2. 대관사용료 6_2.1:1 문의결과 1_3. 패키지예매 1_4. 예매확인. 취소 1_5. 공연관람예절 2_1-2. 객석 2_1-3. 무대시설 2_2. BI 소개 2_3. 브랜드스토리 3_1-2. 편의시설안내 3_1-3. 장애인이용안내 3_1-4. 비상대피안내 4_1-2. 이벤트 4_1-3. 앙코르곡 4_1-4. 대관 4_2. 자주하는질문 5_3. 대관시설안내 5_4. 대관규약 5_5. BI사용규정 5_4. 대관규약 6_3. 쿠폰 / 예매권 6_4. 회원정보변경 6_5. 빈야드회원가입 2_4. 공연장둘러보기 3_2. 오시는길 4_3. Contact us 5_4. 대관신청 3_2-1. 공연장오시는길
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-1 작성자 신혜지 빈야드회원가입홍보배너 롯데콘서트홀로고 로그인 / 회원가입 롯데문화재단 언어설정 ENG Description 검색창 1. 공연안내 / 예매 2. 롯데콘서트홀 3. 이용안내 4. 커뮤니티 5. 대관안내 / 신청 6. 마이페이지 BIG VISUAL Bringing People Together with Music [ 연간공연계획버튼 ] CALANDAR / YYYY.MM > D D D D D. D CONTENT ( 공연정보 ) CONTENT ( 공연정보 ) CONTENT ( 공연정보 ) CONTENT ( 공연정보 ) 예매하기 좌석배치도 대관신청오시는길공연예절 FAQ 빈야드회원가입 롯데문화재단소개
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 예매하기 좌석배치도 대관신청오시는길공연예절 FAQ 빈야드회원가입 롯데문화재단소개 NOTICE ( 일반 / 이벤트 / 앙코르곡 / 대관문의 ) CONTENT 이용약관개인정보취급방침영상정보처리기기운영. 관리방침오시는길 SNS 링크 SNS 링크 SNS 링크 SNS 링크 Footer 롯데콘서트홀로고 Family site 리스트메뉴
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 P A G E 프로젝트이름 롯데콘서트홀웹사이트리뉴얼 화면이름 (ID) 서브페이지 ( 5. 대관안내 ) 버전 1.0 내용 서브페이지레이아웃 작성자 신혜지 빈야드회원가입홍보배너 롯데콘서트홀로고 로그인 / 회원가입 롯데문화재단 언어설정 ENG Description 검색창 1. 공연안내 / 예매 2. 롯데콘서트홀 3. 이용안내 4. 커뮤니티 5. 대관안내 6. 마이페이지 SUB BIG VISUAL [ 경로표시 Home > GNB > LNB ] Ex ) Home > 대관안내 > 대관절차안내 5-1. 대관절차안내 5-2. 대관사용료 5-3. 대관시설안내 5-4. 대관규약 5-5.BI 사용규정 5-6. 대관공고 LNB CONTENT 이용약관개인정보취급방침영상정보처리기기운영. 관리방침오시는길 SNS 링크 SNS 링크 SNS 링크 SNS 링크 Footer 롯데콘서트홀로고 Family site 리스트메뉴
T H A N K Y O U