MCM - smilelena.comsmilelena.com/file/file_mcm.pdf · 문서명 MCM APP 스토리보드 Ver. 1.0 작성자 김은성 작성일자 시스템명 MCM 모바일웹사이트 시스템구분

MCM모바일 웹 리뉴얼 기획서

1조 김은성, 박리나, 이아영, 임영은

1조김은성, 박리나, 이아영, 임영은

Contents프로젝트

데이터수집

정보구조

와이어프레임/프로토타입

스토리보드

02

04

05

01

03

P r o j e c t프 로 젝 트

목적

01상품을쉽게

찾을수 없는

레이아웃

많은여백과

작은글자크기로

인한낮은 가독성

모바일을통한

MCM의 접근이

낮음

02 03Problem Problem Problem

B e n c h m a r k i n g벤 치 마 킹

1-1. 벤치마킹장점Strength

TNGT

Quick메뉴 참고.깔끔한 디자인과 주요 컨텐츠를한눈에 볼 수 있어 접근이 용이함.

MARC JACOBS

상세페이지의 레이아웃이깔끔하게 배치되어

상품을 찾을 때 편리함.

ASMAMA

SNS를 통해브랜드와 제품 상세 이미지를

한 눈에 디테일하게확인할 수 있음.

VANS

사이트의 공지가헤더 아랫부분 검정바탕에

나타나 사용자들이 최신 공지를바로 알아 볼 수 있도록 한 것

GIORDANO

화면 전체를 채우는 이미지로메인페이지를 가득 채워 로딩 시간이 길다.

UNIQLO

상품정보 보다 광고와 이벤트가메인페이지에 더 많이 나와있어

상품을 찾을 때 불편하다.

1-1. 벤치마킹약점Weakness

S e r v a y설 문 조 사

20대 30대

20대 84%

30대 16%

1.MCM의 타겟층은?

아니오 10%

예 90%

예 아니오

2.MCM브랜드에대해 알고있는가?

아니오 10%

예 90%

3.MCM을 아는경로는?

광고배너 웹 서핑 기타

지갑 47.4%

가방 31.6%

4.MCM 제품 중 인지도가 높은 제품은?

지갑 가방 기타

지갑 가방 기타

1.MCM의타겟층은?

20대 30대 예 아니오

3.MCM을아는 경로

광고배너 웹 서핑 기타

2.MCM브랜드에 대해 알고있는가? 4.MCM 제품 중 인지도가 높은 제품

2. MCM브랜드에 대해 알고있는가?예90%아니오10%

3. MCM을 아는 경로광고배너 41.2%웹서핑 41.2%

4. MCM 제품 중 인지도가 높은 제품지갑 47.4%가방 31.6%

1. MCM의 타겟층은?20대84%30대16%

MCM 설문조사결과

광고 배너와웹서핑으로알게 된경로가 많습니다.

타겟층을넓히기위해 랜딩페이지를이용하여 새로운타겟층 확보를하고자합니다.

지갑과가방이 MCM 제품 중에서인지도가높습니다.

MCM 기존의사이트가단조로워재방문하기 어렵습니다.

모바일접속이 익숙한 20대타겟층을겨냥해 상품을 한눈에보기 쉽게적용할 것 입니다.

ResultRes

Pe r s o n a페 르 소 나

외향적 내향적

전통적 창조적

계획적 즉흥적

수동적 능동적

성격

프로필

니즈

요구사항

선호브랜드

Persona

이용하는 기기구매 시 고려사항

소개

모바일

PC

태블릿

가격

실용성

디자인

이름 : 김 은정나이 : 28세전공 : 시각디자인직업 : 제일기획광고디자이너가족 : 아버지, 어머니, 여동생

• 커플로맞출 수 있는아이템

• 가벼운물건들을넣을 수 있는 가방

• 무난한데일리 아이템

• 중저가의적당한가격

• 젊은(young)한느낌

• 어떤 룩(look)에도어울리는아이템

입사 1년차로, 회사에 들어간지 얼마되지 않은 신입사원이다.

평소 회사에 출근할 때 들고 다니는 가방의 크기가 너무 크다보니 불편함을 많이 느끼고 있다.

사내 복장은 자율로, 자유롭고 편안하면서 여성적인 스타일을 선호하는 은정씨는 어떤 패션에도

어울리고 튀지않는 아이템들을 주로 이용한다.

회사에 입사를 하며, 적금을 이제 막 넣기 시작한 은정씨는 부담스러운 가격대의 제품들보다는 중

저가의 제품을 생각하고 있다.

현재 은정씨는 곧 다가올 연인과의 기념일을 위해 선물을 고민하고 있는데 커플 아이템으로 이용

할 수 있는 것과 부담스럽지 않은 가격선에서 젊은 느낌이 드는 그런 선물을 찾고있다.

외향적 내향적

전통적 창조적

계획적 즉흥적

수동적 능동적

성격

프로필

니즈

요구사항

선호브랜드

Persona

소개

이름 : 박 우진나이 : 23세전공 : 실용음악과직업 : 대학생가족 : 아버지, 어머니, 누나

• 가격 부담없는중저가브랜드

• 가격 부담없는중저가브랜드

• 유니크한디자인

이용하는 기기구매 시 고려사항

모바일

PC

태블릿

가격

실용성

디자인

고등학교부터 아르바이트를 하며 용돈을 벌기 시작해 독립적인 편이다.

평소 패션에 관심이 많아, 일정을 마친 뒤, 모바일로 브랜드 사이트를 구경하는 편이다.

다음달에 진행되는 축제 공연 연습과 아르바이트, 학업을 병행하느라 직접 옷을 보며 쇼핑할 시간이

없다.

바쁜 일정 탓에 주로 모바일 쇼핑을 자주 이용하는 편이다.

활발하고 개방적인 성격으로 주변 사람들 앞에 주목받는 것을 좋아한다.

틈틈히 밴드 친구들과 패션에 관한 이야기를 자주 한다.

최근 유행하는 트렌드를 온전히 따라가는 것이 아니라 개성있는 패션으로 코디하는 편이다.

소개

I n f o r m a t i o n A r c h i t e c t u r e정 보 구 조

W i r e f r a m e / P r o t o t y p e와 이 어 프 레 임 / 프 로 토 타 입

검색 로그인 마이페이지장바구니 프로필편집Navigation

로그인

NO YES

로그인 마이페이지비밀번호 재설정 회원가입Navigation

로그인

NO YES

매장찾기 로그인 마이페이지

Navigation로그인

NO YES

로그인-NO

로그인-YES

상품 중메뉴 상품 상세페이지 장바구니SNS연동 컬렉션컬렉션 상세페이지

S t o r y b o a r d스 토 리 보 드

Description

1. 네비게이션 메뉴버튼

서브페이지로 연결되는 네비게이션 form이 나타난다.

2. 로고

로고를 누르면 메인페이지로 돌아온다.

3. 돋보기버튼

검색창이 슬라이드형식으로 왼쪽에서 오른쪽으로 나타난다.

4. 장바구니버튼

선택한 상품을 볼 수 있는 장바구니 페이지로 이동한다.

5. 마이페이지 버튼

비로그인 상태면 로그인페이지로 이동, 로그인상태면 버튼 하단에

‘마이페이지’ 글자가 생성된다.

6. 공지사항

스크롤해서 하단으로 이동시 전환되며 사라진다.

7. 비주얼 슬라이드

첫 비주얼 사진이 나타나고 4초후 다음 사진으로 이동 무한 반복하

고 순서대로 버튼에 색상이 이동한다.

8. 대메뉴 아이콘

선택 시 해당하는 페이지로 이동한다.

9. 베스트 메뉴

사용자의 비슷한 연령대에서 구매율이 가장 높았던 제품으로 순서

대로 배치. 화면은 고정 되어 있지만 손가락으로 넘길 시 숨어있던

다음 사진이 나오며 버튼도 순서에 맞게 색상이 이동한다. 사진이

나 글자 선택 시 해당 상품페이지로 이동한다.

10. Review 메뉴

빠른 시간안에 MCM제품의 다양한 코디를 볼 수 있도록 인스타그

램에서 MCM으로 태그된 제품 중 조회수와 좋아요가 가장 많이 눌

려진 제품 순으로 게시한다.

문서명 MCM APP 스토리보드 Ver. 1.0 작성자 김은성 작성일자

시스템명 MCM 모바일 웹 사이트 시스템구분 사용자(Client) Page 1

단위업무 메인페이지 디렉토리 홈

3 4 521

6

8

7

9

10

Description

1-1-1. X버튼

선택 시 닫히며 현재 위치하고 있던 페이지가 나타난다.

1-1-2. -+버튼

해당하는 네비게이션 바 선택시 안쪽에 숨겨져 있던 중메뉴들이 펼

쳐지며 나타난다.

1-1-3. 중메뉴

선택 시 해당 페이지로 이동한다.

1-1-4. 선물메뉴

MCM 제품을 통해 선물을 많이 하기 때문에 선물의 메뉴를 추가로

생성한다.

1-1-5. 배송조회

로그인이 되어있으면, 마이페이지로 넘어가고 아니면 로그인 페이

지로 넘어간다.

1-1-6. 매장찾기

매장찾기 페이지로 넘어간다.



단위업무 네비게이션 디렉토리 홈 > 네비게이션

1

3

2

1

5 6

1-1 Navigation

4

Description

6-1-1. 검색

원하는 주소를 입력하면 입력된 주소에 가까운 매장이 새 창으로

바뀌면서 나타난다.

6-1-2. 현재위치에서 찾기

현재위치로 설정된 곳에서 가까운 매장이 새 창으로 나타난다.



단위업무 매장찾기 디렉토리 홈 > 네비게이션 > 매장찾기

6

Navigation

6-1

1-1

1

2

Description

1. 검색창

검색창에 찾고 싶은 정보 입력 후 Go버튼 누르면 해당 정보를 찾아

페이지를 이동한다.

2. 히스토리 창

검색된 단어를 히스토리 창에 표시되며 최근 검색한 내용이 가장

위에 나타난다.



단위업무 검색창 디렉토리 홈 > 검색

3

2

1

3-1 돋보기Button

Description

4-1-1. 상품선택

체크박스를 이용해 상품들을 다중으로 선택 및 해제 할 수 있다.

선택한 상품은 하단의 상품내역에 상품이름 및 가격이 나타나고 자

동으로 합계되어 나타난다.

4-1-2. 수량선택

셀렉박스를 이용해 원하는 수량을 입력할 수 있다.

4-1-3. 자세히보기

자세히보기 버튼을 누르면 해당 상품의 상세페이지로 넘어간다.

4-1-4. ‘재고가 별로 없습니다!’

장바구니에 들어간 상품의 재고가 5개 이하일 경우, 빨간색 글씨로

재고가 없다는 메시지가 해당 상품 하단에 나타난다.

4-1-5. 프로모션 코드

이벤트 및 개인적으로 보유한 프로모션 코드를 입력하고 적용버튼

을 누르면 할인이 적용된다.

4-1-6. 구매하기

구매하기 버튼을 누르면 구매하기 페이지로 넘어간다.



단위업무 장바구니 디렉토리 홈 > 장바구니

4

12

3

5

6

4

4-1 장바구니

Description

5-1. 비로그인일 시, 로그인페이지로 이동

5-2. 로그인되어 있을 경우, 마이페이지로 이동



단위업무 로그인, 마이페이지 디렉토리 홈 > 로그인홈 > 마이페이지

5

1 2

3

1

2 3

5-1 5-2

Description

1. 비밀번호찾기

비밀번호 찾기를 누르면 새 창으로 비밀번호 재설정 창이 나타난다.

1-1. 이메일보내기(renewal_pw.html)

입력한 이메일로 설정된 비밀번호가 전송된다.

2. 회원가입

회원가입을 누르면 회원가입 창이 새 창으로 나타난다.

2-1. 회원가입(join.html)

성명, 이메일, 비밀번호 입력을 통해 새 계정을 생성한다.

3. 로그인

로그인을 누른 후, 로그인이 실패하면 메시지가 나타나고 성공하면

메인으로 돌아간다.

문서명 MCM APP 스토리보드 Ver. 1.0 작성자 박리나 작성일자


단위업무 로그인, 비밀번호 재설정, 회원가입 디렉토리 홈 > 로그인 > 비밀번호재설정홈 > 로그인 > 회원가입

1 2

1-1

2-1

3

Description

1. 프로필 편집

프로필 편집 상세창이 나타난다.

2. 로그아웃

로그아웃을 누르면 메인으로 이동한다.

3. 계정탈퇴

하단의 체크박스를 체크하지 않은 상태로 계정탈퇴를 누르면, 체크

박스를 체크하라는 메시지가 나타난다.

문서명 MCM APP 스토리보드 Ver. 1.0 작성자 임영은 작성일자


단위업무 마이페이지 디렉토리 홈 > 로그인 > 마이페이지

1

2 3

Description

1. Tab Menu

터치 할 시 해당 분류의 목록만 나타난다.

2. 앨범형, 리스트형 전환 아이콘

앨범형 목록과 리스트형 목록 두 가지 형태로 상품을 나타낼 수 있

다.

3. 정렬

사용자의 제품 구매 기준에 따라 빠르게 접근할 수 있도록 가격 높

은 순/낮은 순/인기순/상품평순으로 재정렬이 될 수 있다.

4. 상품 메인 사진

터치 할 시 제품 상세 페이지로 이동한다.

5. 제품 이름, 찜하기, 공유, 가격 노출

터치 할 시 제품 상세 페이지로 이동한다.

6. 찜하기

찜하기를 누르면 장바구니 페이지에 상품이 들어간다.

7. 공유

버튼을 누르면 제품상세페이지 링크주소가 복사되어 SNS를 통해

제품에 대한 내용을 상대방과 쉽게 공유할 수 있다.

문서명 MCM APP 스토리보드 Ver. 1.0 작성자 이아영 작성일자


단위업무 제품 페이지(중메뉴) 디렉토리 홈 > (왼쪽상단) NAV 바 > 여성 > 가방 > 제품 상세 페이지홈 > (원형 아이콘) 여성 > 제품 상세 페이지

1

2 3

4

5

6

7

Description

1. 제품 상세 이미지

슬라이드 형식으로 제품 관련 이미지가 4장 나타난다. 하단의 슬라

이드바를 클릭하면 해당 사진으로 변경된다.

2. 장바구니에 담기

장바구니 페이지에 해당 상품이 저장된다.

3. 추천상품

사용자의 비슷한 연령대의 다른 고객들이 선택한 상품과 함께 구매

가 많이 된 상품을 나타냄으로써 MCM제품의 트랜드를 알 수 있도

록 한다. 추천 상품을 클릭하면, 상세페이지로 이동한다.

문서명 MCM APP 스토리보드 Ver. 1.0 작성자 임영은 작성일자


단위업무 상세페이지 디렉토리 홈 > (왼쪽상단) NAV 바 > 여성 > 가방 > 제품 상세 페이지홈 > (원형 아이콘) 여성 > 제품 상세 페이지

1

3

2

Description

1. 이전

이전 페이지로 이동한다.

2. Tab Menu

터치 할 시 해당하는 컬렉션 상세 페이지로 이동한다.

3. 컬렉션 메인 사진

사진 터치 시 해당 컬렉션의 상세 페이지로 이동한다.

4. 컬렉션 설명

터치 할 시 제품목록 페이지로 이동한다.

5. 캠페인 광고

캠페인 광고 페이지(유튜브)로 이동한다. 유튜브는 새 창에서 열기

로 설정한다.



단위업무 컬렉션 디렉토리 홈 > (왼쪽상단) NAV 바 > 컬렉션홈 > (원형 아이콘) 컬렉션

1

2

3

4

5 6

Description

1. 컬렉션 메인 visual section

제품 컬렉션 영상을 삽입한다. 영상은 새 창에서 유튜브를 통해 시

청할 수 있다.

2. 캠페인 광고

터치 할 시 해당 제품의 상세페이지로 이동한다.

3. 상세이미지

터치 할 시 해당 컬렉션의 제품목록 페이지로 이동한다.



단위업무 컬렉션 상세페이지 디렉토리 홈 > (왼쪽상단) NAV 바 > 컬렉션홈 > (원형 아이콘) 컬렉션

1

2

3

4

Documents

MCM - smilelena.comsmilelena.com/file/file_mcm.pdf · 문서명 MCM APP 스토리보드 Ver. 1.0 작성자 김은성 작성일자 시스템명 MCM 모바일웹사이트 시스템구분