Issuu on Google+

쇼핑리스트 작성 어플리케이션 기획 제안서

명지대 시각디자인과 60082843 노연주 V 1.00


Contents 기획/ UI

GUI 디자인

1. Target

1-1) Target 정의 1-2) Target image

4 5

2. 환경조사(VOC) 2-1) 2-2) 2-3) 2-4)

조 소개 회의 모습 컨텐츠 레벨 과정 컨텐츠 레벨 정리

7 8 9 10

3. 의견 정리

12

4. 기능 정리

14

5. 기능 리서치 5-1) 5-2) 5-3) 5-4) 5-5)

장바구니 myShopi 돈 아끼는 장보기 장바구니 요약, 개선방향

6. Main screen

16 17 18 19 20 22

7. GUI 리서치

7-1) Position map 7-2) Mood board 1 칼라 레이아웃 아이콘 7-3) Mood board 2 칼라 레이아웃 아이콘 7-5) 인포메이션 리서치

38 39

43

47


Contents

1. Target 1-1) Target 정의 1-2) Target image 2. 환경조사(VOC) 3. 의견 정리 4. 기능 정리 5. 기능 리서치 6. Main screen 7. GUI 리서치


관계 개선을 위한 UX project

1) Target 정의 _20-30대 결혼 하기 전 혼자 사는 성인

연령 :

20대 초반 30대 후반

직업 :

결혼 전 혼자 사는 성인 (대학생, 직장인)

특징 :

혼자 사는 싱글족 매해 증가 – 싱글족을 위한 제품, 이벤트 증가 독립적인 생활 추구

가계 경제가 어려워짐에 따라 알뜰한 구매가 중요해짐 빠르고 정확한 정보를 찾을 수 있기를 원함 20-30대의 스마트폰 가입자는 전체 60%로 점점 증가

통계자료

4

알뜰한 쇼핑리스트 작성 App

1. Target


관계 개선을 위한 UX project

2) Target Image

5

알뜰한 쇼핑리스트 작성 App

1. Target


Contents

1. Target

2. 환경조사(VOC) 2-1) 2-2) 2-3) 2-4)

조 소개 회의 모습 컨텐츠 레벨 과정 컨텐츠 레벨 정리

3. 의견 정리 4. 기능 정리 5. 기능 리서치 6. Main screen 7. GUI 리서치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

2. 환경조사 (Voc)

1) 조 소개 조 이름

: O.P.P (One Point Project)

조 의미 ‘이 수업의 포인트가 되자!’ ‘조별 프로젝트(과제)를 완벽히 수행하겠다’는 의미

노연주

박경훈

공통주제 1_ 키워드를 ‘건강’이라고 잡고 타이틀을 ‘건강을 지키기 위한, 아플 때 대처하는 컨텐츠 레벨’로 정하여 진행. 2_ 타이틀에서 오류 발견 → ’치료를 해주는 입장에서 관리,대처하는 컨텐츠’로 수정. 3_ 조별회의를 통해 컨텐츠 레벨의 전체적인 틀을 잡음. 4_ 컨텐츠 레벨에서 전체,서브기능을 의논, 기능별로 분류. 5_ 세부내용과 보완점을 서로 토의 후, 개선책 마련. 송혜수

7

한수진

6_ 위 사항을 토대로 개인주제에 적용.


관계 개선을 위한 UX project

2) 회의모습

알뜰한 쇼핑리스트 작성 App

2. 환경조사 (Voc)


관계 개선을 위한 UX project

3) 컨텐츠 레벨 과정

알뜰한 쇼핑리스트 작성 App

2. 환경조사 (Voc)


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

2. 환경조사 (Voc)

4) 컨텐츠 레벨 정리 _장보기의 시간순서대로 행위 파악

순서>

행위>

장보기 전

장보기 중

장보기 후

리스트를 작성하여 충동구매와 낭비를 막음

오랜 시간 장보기는 충동구매를 높이므로 빠른 시간에 장을 볼 수 있도록 함

장을 본 후 과거 내역과 충동구매 내역을 분석해 다음 리스트 작성을 도움

필요한 제품확인

매장 선택

구매목록 확인

목록확인

가계부 작성

제품비교/담기

충동구매내역 확인

(유통기한 / 남은 양)

리스트 작성 가격비교, 할인정보

구매하기 보통 한 매장에서 장을 봄 → - 지정한 매장 내에서 목록작성 - 리스트 작성 후 매장 선택 기능 추가

메인 기능 10

가계부 작성에서 지출 내역만 보여 주는 것이 아니라 월별로 충동 구매 내역을 비교하여 다음 장보기에 참 고할 수 있게 함


Contents

1. Target 2. 환경조사(VOC)

3. 의견 정리 4. 기능 정리 5. 기능 리서치

6. Main screen 7. GUI 리서치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

3. 의견정리

3. 의견정리 _장보기 중 불편사항과 요구사항 정리

리스트 작성

1.리스트 작성 -가격, 개수에 대한 정보를 넣고 싶다. -핸드폰으로 작성하는 것보다 메모지에 적는 것이 더 편하다.

1. 가는 길 정보 -가까운 매장이 어디 있고, 교통편과 주차 정보도 알고 싶다. -지도와 연동이 가능하면 좋겠다.

2. 유통기한/ 남은 양 -미리 확인해야 하는 점이 불편하다.

2. 할인정보 - 매장 내 이벤트나 쿠폰 같은 정보를 한꺼번에 볼 수 있으면 좋겠다. - 매장 별로 할인, 이벤트 기간에 대한 정보를 알고 싶다.

3. 매장 선택 -매장 별로 최저가의 제품이 달라서 가격을 비교하기 어렵다. 4. 리스트 저장, 불러오기 -과거에 샀던 제품을 자동으로 저장,불러오기 기능으로 리스트 작성이 쉬웠으면 좋겠다.

12

매장선택

3. 매장 내 위치 파악 - 제품이 어디에 있는지 알기 어렵다. - 오랜 시간 쇼핑을 할 경우 충동구매를 하기 쉬워진다.

쇼핑

1. 리스트 바로보기 - 앱을 통해 리스트를 확인하는 것이 귀찮다. 2. 매장 내 위치보기 - 매장 내 제품 위치와 내 위치를 알고 싶다. 3. 할인카드, 포인트 보기 - 카드 및 포인트 사용량 이 얼마나 남았는지 확인하기 번거롭다. 4. 바코드 촬영 - 새로 나오거나 처음 구입한 제품일 경우 정보를 바로 알고 싶다.

가계부 작성

1.리스트를 가계부로 전환 - 구매한 목록을 바로 가계부로 전환할 수 있으면 좋겠다.

2. 구매내역 비교 - 월별로 충동 구매한 내역을 비교해 한눈에 볼 수 있었으면 좋겠다. 3. 할인카드, 포인트 내역 - 얼만큼의 할인을 받고, 포인트가 쌓였는지 알고 싶다.


Contents

1. Target 2. 환경조사(VOC) 3. 의견 정리

4. 기능 정리 5. 기능 리서치

6. Main screen 7. GUI 리서치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

4. 기능정리

4. 기능정리 _장보기 과정의 불편사항과 요구사항을 개선한 기능정리

Main

리스트 작성

1. 유통기한/ 남은 양 알림 + 자동 추가 2. 리스트 작성 1) 품목 2) 가격 3) 개수 3. 음성인식 4. 매장 정보 보기 1) 할인정보 2) 이벤트 기간 5. 리스트 저장, 불러오기 7. 내보내기

14

매장선택

쇼핑

가계부 작성

1. 매장 정보 1) 거리, 교통, 주차 2) 개장 시간 3) 위치(지도)

1. 리스트 바로보기 + 리스트 체크기능

1.리스트 자동 가계부 전환

2. 매장 내 위치 보기

1. 할인정보 1) 이벤트 2) 전단지, 쿠폰 3) 할인카드, 포인트

3. 할인카드, 포인트 가능 금액 알림

2. 월별 충동구매 내역 비교

3. 최단거리 순 자동 리스트 정리

4. 바코드 촬영 기능

3. 할인카드, 포인트 사용내역 보기


Contents

1. Target 2. 환경조사(VOC) 3. 의견 정리 4. 기능 정리

5. 기능 리서치 5-1) 5-2) 5-3) 5-4) 5-5)

장바구니 myShopi 돈 아끼는 장보기 장바구니 요약, 개선방향

6. Main screen 7. GUI 리서치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

5. 기능리서치

5-1) 장바구니 _많은 기능 보유, 정돈 되지 않은 디자인

1. 주요서비스 1) 2) 3) 4)

최저가 검색 기능 바코드 상품 검색 및 이름, 가격 자동입력 예상금액 / 남은 금액 확인 기능 구입내용 수정 관리하기 기능

2. 장점

1) 최저가 검색 하기와 장바구니 연결로 예상 금액을 미리 알 수 있음 2) 바코드 인식기능으로 제품정보를 얻을 수 있음 3) 장 본 목록을 수정할 수 있어서 가계부 작성이 쉬움 4) 지도 앱과 연동되어 가까운 매장을 찾을 수 있음

3. 단점

1) 검색 된 제품정보가 간결하지 않음 2) 바코드 입력 메뉴가 최저가 검색 메뉴에 있어서 바로 사용하기가 번거로움 3) 최저가로 검색했을 경우, 행사 장소를 찾기 어렵고, 제품이 없는 경우가 있음

2-1)

3-2)

2-4)

4. 수용점

1) 가까운 매장 찾기 기능 2) 장 본 목록의 수정이 용이 3) 제품 검색과 바코드 촬영 가능

5. 개선점

1) 제품 설명을 보기 편하게 정리 2) 최저가로 검색했을 경우 매장 별로 제품이 한정되어 있는 경우가 있기 때문에 최저가 검색 후 매장 정보도 볼 수 있도록 개선

16

3-1)


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

5. 기능리서치

5-2) myShopi _사진 아이콘을 통한 재미, 정보의 부족

1. 주요서비스 1) 2) 3) 4)

쇼핑리스트 작성 여러 개의 쇼핑 목록 작성 가능 실시간으로 남은 금액 표시 자주 구입한 품목 내역 추가 가능

4-1) 2-1)

2. 장점

1) 텍스트가 아닌 사진 형태의 아이콘으로 목록에 시각적 요소를 부여함 2) 바코드 인식기능으로 제품정보를 얻기 쉬움 3) 자동완성 기능으로 리스트 작성이 용이

3. 단점

1) 가격정보를 리스트에서 확인하기 번거로움 2) 아이콘으로 구성된 페이지와 텍스트로만 구성된 리스트 페이지가 시각적으로 통일감으로 주지 못함 3) 아이콘을 사용하여 시각적인 재미는 있지만, 모든 제품을 표현하기 어려움

3-2)

4. 수용점

1) 자동완성 기능을 사용하여 검색 및 리스트 작성이 용이 2) 저장 및 내보내기 기능으로 가계부 작성을 도와줌

5. 개선점

1) 제품 검색 화면과 리스트 디자인을 통일하여 같은 어플리케이션임을 보여줌 (같은 계열 색 사용) 2) 아이콘은 간단한 메뉴에서만 사용하며 재미를 줄 수 있도록 함 3-1)

17


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

5-3) 돈 아끼는 장보기 _간편하고 편리한 사용, 정보의 부족

1. 주요서비스

3-1)

1) 쇼핑리스트 작성 2) 장 본 내역 저장 3) 실시간 잔액 표시

2. 장점 1) 2) 3) 4)

최소한의 기능으로 복잡하지 않음 깔끔한 디자인으로 목록을 확인하기 쉬움 자주 구입한 목록 저장기능으로 리스트 작성 용이 날짜와 목록, 가격까지 바로 저장 가능

3. 단점

1) 리스트 작성 외에 정보를 얻는 기능은 없음 2) 품목 추가 시 정확한 가격을 알 수 없기 때문에 미리 작성할 경우 예상금액 변동이 심함 3) 리스트 작성 후 제품을 고르는 선택창이 없어 바로 구입 목록을 확인할 수 없음

4. 수용점

1) 깔끔하고 사용이 편한 점을 반영 2) 날짜, 목록, 가격이 바로 저장되는 것을 가계부에 연동시킴

5. 개선점

1) 휴대 중 리스트 확인 시 구입 목록 체크 기능 추가 2) 리스트 작성 외에, 제품 및 매장 정보를 함께 넣어 예상가격을 알 수 있도록 함

18

2-4)

5. 기능리서치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

5. 기능리서치

5-4) 장바구니 _통일되고 사용하기 편리한 디자인, 비용 입력 불가능

1. 주요서비스 1) 2) 3) 4)

쇼핑목록 작성 여러 개의 목록 관리 가능 이전 제품 등록 기능 다양한 레시피 다운 기능

2. 장점 1) 2) 3) 4)

2-4)

디자인이 깔끔하고 보기 편함 메모지 컨셉으로 친근감을 줌 레시피 다운 기능으로 목록 작성에 도움을 줌 메모기능으로 기타내용 작성 가능

3. 단점

1) 리스트 작성시 가격 입력이 불가능하여 예상 비용을 알기 어려움 2) 계산기능이 없음

2-3)

4. 수용점

1) 리스트와 함께 메모 기능을 첨가하여 메모장으로도 사용가능 2) 레시피에 따른 재료 보기 기능으로 조리 시 필요한 제품을 리스트에 바로 추가할 수 있게 함 3) 실제 메모지에 작성하는 느낌을 주어 사용자로 하여금 친근함을 느낄 수 있게 함

5. 개선점

1) 가격 정보를 볼 수 있도록 개선

19

3-1)

4-2)


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

5. 기능리서치

5-4) 요약,개선방향 _유사 어플리케이션의 문제점과 개선방향 제시

리스트 작성이 편리하고 쇼핑 정보를 쉽게 접할 수 있는 컨텐츠 필요

기존 컨텐츠의 문제점

20

개선점

1_ 핸드폰 입력의 번거로움으로 인한 사용량 감소

1_ 바탕화면에서 목록 작성 가능 (위젯 기능)

2_ 정보 입력의 불편함

2_ 음성인식과 자동 추가 기능으로 정보 입력의 번거로움을 줄임

3_ 제품 비교가 최저가 위주로만 구성되어 선택 및 비교가 어려움

3_ 리스트 작성 후 매장, 할인 등의 정보 보기 기능으로 비교 가능

4_ 리스트 작성 외에 쇼핑 정보를 얻기가 어려움

4_ 리스트 외에 필요한 정보 (매장, 할인, 제품 등)를 서브 메뉴 에서 볼 수 있도록 아이콘 메뉴를 메인 상단에 표시


Contents

1. Target 2. 환경조사(VOC) 3. 의견 정리 4. 기능 정리 5. 기능 리서치

6. Main screen 7. GUI 리서치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 1) Key screen_ 리스트

Concept 상태표시

! 장바구니

알림

마트

List 1

가계부

바코드

Sub menu

1) 타겟은 알뜰한 2-30대 미혼 성인으로, 장보기 리스트 작성에 용이 2) 쇼핑 정보를 리스트 화면에서 모두 보여줌 _선택한 매장의 할인 및 이벤트 정보를 체크박스 옆에 표시 _개수, 예상금액, 잔액 등의 정보도 자세하게 표시

3) 리스트는 텍스트로, 서브 메뉴는 아이콘으로 표시

(2012년 5월 30일)

저장

메모 목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

3

3,000

치약

E

10%

입력 창

세부

10%

부분별 기능

상태표시

list

Sub menu

List 예상금액 뒤로

리스트

16,000 메인

설정 설정

고정 메뉴

입력 창

고정메뉴

22

내용 - Date : 날짜 - Clock : 시간 - Battery : 배터리 충전 알림 - 부가 기능 5가지를 아이콘으로 표시 매장정보, 알림, 장바구니 (리스트 저장/내보내기) , 가계부, 바코드 촬영 기능 - 평소에는 숨겨져 있음 - 아이콘을 선택하면 해당화면으로 넘어감

형태 text

Graphic +Text

- 메인 기능으로, 리스트 작성에 필요한 제품명, 개수, 가격을 텍스트로 표시 - 모두선택 가능

Text

- 입력창 : 입력창을 누르면 키패드가 자동으로 표시되며 sub menu가 사라짐 리스트 목록 순서로(목록→수→가격)입력 - 메모 : 기타 사항을 간단히 기록할 수 있는 메모기능

Text

- 자주 사용하는 4가지 메뉴 (뒤로 가기, 리스트보기, 메인, 설정 기능)

Text


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 1-1) 리스트 입력 _ 텍스트

! 장바구니

알림

마트

List 1

가계부

1)-2 품목입력 2_ sub menu창 위로 사라짐

바코드

List 1

(2012년 5월 30일)

추가

완료

(2012년 5월 30일)

김 저장

메모 목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

3

3,000

치약

E

10%

1_입력 창 클릭

뒤로

23

리스트

10%

16,000 메인

과거 작성했던 목록 자동완성 기능으로 나열

김밥 햄

스크롤 영역

2_ 키패드 나타남 예상금액

김치

설정 설정

ㄱㅋ

ㄴㄹ

ㄷㅌ

다음

ㅂㅍ

ㅅㅎ

ㅈㅊ

영문

.,?!

ㅇㅁ

뒤로

리스트

메인

설정

음성 설정

목록 작성 중 작성을 취소하고 싶을 때 1) 뒤로 버튼 2) 지움 버튼


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen

1)-3 품목선택

List 1

1)-4 개수입력

List 1

(2012년 5월 30일)

추가

완료

추가

완료

김치

개수

단위

4

g

5

ea

6

can

김밥 햄

4_ 개수, 단위, 가격 순으로 입력

가격

5,000

1

2

3

ㄱㅋ

ㄴㄹ

ㄷㅌ

다음

4

5

6

ㅂㅍ

ㅅㅎ

ㅈㅊ

영문

7

8

9

.,?!

ㅇㅁ

음성

.

0

다음

뒤로

리스트

메인

설정

뒤로

리스트

메인

설정

3_ 입력 창에 목록을 작성한 후, 다음 버튼을 누르거나 자동 입력된 리스트에서 목록 선택

24

(2012년 5월 30일)

위, 아래로 드래그하여 조절 가능

← ↑ 설정

설정

간단한 개수는 상, 하 버튼으로 조절 가능


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen

1)-5 단위입력

List 1

1)-6 추가/완료

List 1

(2012년 5월 30일)

추가

(2012년 5월 30일)

완료

추가

완료

개수

단위

4

g

5

ea

6

can

가격

5,000

ea

G

oz

pcs

kg

Lb

pack

ml

Gal

box

l

can

뒤로

리스트

메인

개수

단위

4

g

5

ea

6

can

창을 위,아래로 드래그하여 조절 가능

가격

5,000

1

2

3

4

5

6

7

8

9

.

0

다음

뒤로

리스트

메인

설정

설정

← ↑ 설정

설정

추가_ 리스트 화면으로 돌아가지 않고 바로 다음 추가 목록 작성 ( 1)-2 화면으로 돌아감 ) 완료_ 리스트 작성을 완료하고 리스트 목록으로 돌아감 25


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 1-1) 리스트 입력 _ 음성

! 장바구니

알림

마트

List 1

가계부

1)-2 품목입력 2_ sub menu창 위로 사라짐

바코드

List 1

(2012년 5월 30일)

추가

완료

(2012년 5월 30일)

김 저장

메모 목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

3

3,000

치약

E

10%

1_입력 창 터치

김밥 햄

10%

스크롤 영역

2_ 키패드 나타남 예상금액 뒤로

26

리스트

16,000 메인

김치

설정 설정

ㄱㅋ

ㄴㄹ

ㄷㅌ

다음

ㅂㅍ

ㅅㅎ

ㅈㅊ

영문

.,?!

ㅇㅁ

뒤로

리스트

메인

설정

음성 설정


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen

1)-3 음성입력

List 1

1)-4 추가/완료

List 1

(2012년 5월 30일)

추가

완료

김치

추가

김치

김치

김밥

김밥

김밥 햄

김밥 햄

음성 인식 중 입니다. 뒤로

리스트

메인

3_ 키패드 대신 음성인식 창이 뜸 인식한 단어와 유사한 품목들이 리스트에 나열됨 27

(2012년 5월 30일)

완료

음성인식이 완료되었습니다. 설정

뒤로

리스트

메인

설정

4_ 이 후 과정은 텍스트입력 1)-4와 동일하게 진행


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 1-3) 메모 추가(리스트 외 필요정보 입력)

! 장바구니

알림

마트

List 1

가계부

1)-2 내용 입력 2_ sub menu창 위로 사라짐

바코드

(2012년 5월 30일)

목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

3

3,000

저장 E

10%

1_입력 창 클릭

예상금액

28

리스트

완료

취소_ 리스트로 돌아감 완료_ 메모 저장

10%

16,000 메인

라면 대신 빵도 괜찮음(5000원 내외)

빈 공간을 터치하면 키패트 창 내려감

2_ 키패드 나타남

뒤로

취소

치약은 평소에 쓰던 걸로 사오기 메모

치약

메모

설정 설정

ㄱㅋ

ㄴㄹ

ㄷㅌ

엔터

ㅂㅍ

ㅅㅎ

ㅈㅊ

영문

.,?!

ㅇㅁ

뒤로

리스트

메인

음성 설정


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 1-4) 리스트 수정

1)-2 저장 확인

! List 1

1)-3 저장 완료

2012년/ 5월/ 1일

!

리스트 목록 (2012년 5월 30일)

메모

저장

목록

가격(원)

E

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

치약

3

3,000

밥 라면 김치 양말 비누 휴지

1 2 1 2 1 1

1000원 3000원 15000원 2000원 4000원 5000원

저장이 완료되었습니다.

리스트 화면으로 돌아가기

예상 금액 : 30000원

장바구니

저장하시겠습니까?

예상금액 뒤로

리스트

아니오

리스트

메인

내보내기

16,000 메인

1_ 리스트 작성을 마친 후 저장 버튼을 누른다

설정

뒤로

설정

2_ 날짜, 리스트 목록, 수량, 예상금액이 정리되어 보여지고 저장안내 창이 뜸 리스트 제목은 당일 날짜로 자동 입력 되며 후에 장바구니에서 변경 가능함

29

뒤로

리스트

메인

설정

3_ 저장이 완료되면 안내문구가 뜨고 다음 작업 선택지를 보여줌


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 1-5) 리스트 저장

1)-2 내용 수정

! 장바구니

알림

마트

List 1

가계부

목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

3

3,000

치약

예상금액

삭제

완료

리스트

저장 E

10%

개수

단위

4

g

5

ea

6

can

√ 2_리스트 세부정보 화면이 뜸 10%

16,000 메인

1_ 제품명이나 개수 및 가격을 변경할 경우, 수정할 제품명 터치

30

(2012년 5월 30일)

(2012년 5월 30일)

메모

뒤로

List 1

바코드

설정 설정

가격

5,000

1

2

3

4

5

6

7

8

9

.

0

다음

뒤로

리스트

메인

3_ 수정 후 완료 터치

← ↑ 설정

설정

제품 삭제 시 삭제버튼 터치


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 서브메뉴 부가 설명

! 장바구니

알림

마트

List 1

가계부

바코드 마트

(2012년 5월 30일)

저장

메모 목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

3

3,000

치약

E

10%

√ √

10%

! 알림

가계부

바코드

장바구니

예상금액 뒤로

31

리스트

16,000 메인

설정 설정

-마트 선택 → 층별 안내 / 쿠폰 / 세일 기간 - 교통 정보 / 지도 - 유통기한 알림 - 남은 양 알림 (필요한 제품은 자동으로 리스트에 추가) -

월별 충동 카드 카드

구매내역 비교 구매내역 비교 및 포인트 사용내역 안내 및 포인트 사용 가능한 금액 안내

-바코드 촬영 → 제품 정보 / 유통기한 / 매장 별 가격비교

- 저장된 목록 보기 - 저장된 목록 가계부 전환 - 내보내기 기능 → 문자 메시지 / e-mail


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 2-1) Sub menu _마트

! 장바구니

알림

마트

List 1

가계부

!

바코드

(2012년 5월 30일)

목록

가격(원)

라면

5

5,000

1

1,000

계란

1

3,000

치약

저장

1

10,000

3

3,000

E

10%

2_ 선택한 아이콘 밑으로 관련 정보가 뜸

E 이마트

10%

H

즐겨찾기

홈플러스

롯데마트

예상금액 리스트

1_ 마트 아이콘 터치

32

즐겨찾기 된 마트

도보 :10분 자동차 :3분 대중교통 : 101번, 20번 88번

지도 정보

L

뒤로

바코드

마트를 선택하면 자세한 정보를 볼 수 있습니다.

메모

샴푸

가계부

장바구니

알림

마트

도보 :15분 자동차 :8분 대중교통 : 11번, 22번

도보 :5분 자동차 :2분 대중교통 : 10번

지도 정보

지도 정보

16,000 메인

설정 설정

뒤로

리스트

메인

설정

스크롤 영역


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 2-2) Sub menu _마트 -지도

1)-2 정보 선택 도보

자동차

1)-3 정보 확인 도보

대중교통

자동차

대중교통

!

E

마트를 선택하면 자세한 정보를 볼 수 있습니다.

E

이마트

H

도보 :15분 자동차 :8분 대중교통 : 11번, 22번

L

도보 :5분 자동차 :2분 대중교통 : 10번

홈플러스

롯데마트

뒤로

도보 :10분 자동차 :3분 대중교통 : 101번, 20번 88번

리스트

1_ 지도 아이콘 터치

33

메인

이마트

도보 :10분 자동차 :3분 대중교통 : 101번, 20번 88번

E

이마트

도보 : 10분 100m 직진 후 우회전 4m 직진 후 광장에서 좌회전

지도 정보

지도 정보

지도 정보

설정

뒤로

리스트

메인

설정

2_ 이동방법(도보, 자동차, 대중교통) 아이콘이 상단에 뜨고, 간단한 매장정보가 표시됨 하단에는 지도상의 위치를 표시

뒤로

리스트

메인

설정

3_ 도보, 자동차, 대중교통 중 하나를 선택하면 그에 따른 정보와 가는 길이 표시됨


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 2-3) Sub menu _마트 -정보

E

!

이마트

마트를 선택하면 자세한 정보를 볼 수 있습니다.

E

이마트

H

홈플러스

L

롯데마트

도보 :10분 자동차 :3분 대중교통 : 101번, 20번 88번

도보 :15분 자동차 :8분 대중교통 : 11번, 22번

도보 :5분 자동차 :2분 대중교통 : 10번

전체보기

품목별

담기

리스트

1_ 정보 아이콘 터치

메인

정보

10%할인

전체보기와 품목별 목록을 볼 수 있게 함

전체보기

10%할인

1+1 행사

봄 맞이 세일기간! 4월30일~ 5월15일 품목별

2)

담기

1+1 행사

1)

지도 정보

단독 특가

단독 특가

지도

제품이미지와 할인 정보를 보여줌

정보

설정

뒤로

리스트

메인

설정

2_ 상단에 이벤트 및 세일 알림 문구를 띄움 하단에 그에 해당하는 목록을 보여줌

리스트를 선택하면 작성된 리스트 품목 위주로 할인정보가 정렬됨

34

이마트

지도

단돈 1000원

뒤로

E

봄 맞이 세일기간! 4월30일~ 5월15일

단돈 1000원

뒤로

리스트

메인

설정

3_ 체크박스를 사용하여 제품을 선택한 후 담기 버튼으로 리스트에 추가할 수 있음


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen 2-4) Sub menu _마트 –세부정보

E

이마트

전체보기

봄 맞이 세일기간! 4월30일~ 5월15일 품목별

E

이마트

봄 맞이 세일기간! 4월30일~ 5월15일

담기

담기

1+1 행사

10%할인

맛있는 우유 단독 특가

판매가 제조사 유통기한

2,050원 남양유업 2012/07/01

단돈 1000원

뒤로

리스트

메인

1_ 자세한 정보를 보고 싶을 경우 해당 정보 창을 누름

35

설정

뒤로

리스트

메인

2_ 확대된 이미지와 함께 할인 정보 및 상세 내용 확인가능

설정

작성 중인 리스트에 담을 수 있도록 함

6. Key Screen


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

6. Key Screen

6. Key Screen 3) 바코드 촬영

! List 1

코드 촬영

앨범

닫기

담기

제품정보

맛있는 우유

(2012년 5월 30일)

메모

저장

목록

가격(원)

E

라면

5

5,000

1

1,000

계란

1

3,000

샴푸

1

10,000

치약

3

3,000

제품 이미지

판매가 제조사 유통기한

2,050원 남양유업 2012/07/01

마트별 가격비교

유사 인기상품

예상금액 뒤로

리스트

바코드/QR코드를 자동으로 인식합니다.

16,000 메인

1_ 특정 제품의 정보검색을 위하여 바코드 촬영 버튼을 터치

설정

뒤로

리스트

메인

설정

2_ 촬영 창이 뜨면서 자동으로 바코드 인식 앨범_ 앨범에 담긴 사진을 선택하여 바코드를 읽을 수 있는 기능 닫기_ 리스트로 돌아감

뒤로

리스트

메인

설정

3_ 촬영 후 바로 화면전환 되어 제품정보를 보여줌 (제품명, 가격, 유통기한 등) 그 외 유사 인기상품과 매장 별 가격비교를 확인할 수 있도록 함 담기_ 작성 중인 리스트에 제품을 담는 기능

36


Contents

1. Target 2. 환경조사(VOC) 3. 의견 정리 4. 기능 정리 5. 기능 리서치 6. Main screen

7. GUI 리서치 7-1) 7-2) 7-3) 7-4)

Position map Mood board 1 Mood board 2 Information Research


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

7. GUI 리서치

7-1) Position map _단순하고 사용하기 편리한 GUI 디자인

단순한

단순하고 사용하기 편리한 디자인

기능중심

사용성 중심

장식적인 38


관계 개선을 위한 UX project

7-2) Mood Board 1 _종이 질감의 사용으로 아날로그 감성을 디자인

종이 질감을 사용해 아날로그 느낌을 줌

39

알뜰한 쇼핑리스트 작성 App

Mood Board 1


관계 개선을 위한 UX project

7-2) Mood Board 1 Color

40

- 전체적으로 브라운 계열로 통일하고 채도가 높지 않은 파스텔 톤으로 포인트를 줌 - 종이 질감을 사용하여 사용자에게 편안한 느낌 부여

알뜰한 쇼핑리스트 작성 App

Mood Board 1


관계 개선을 위한 UX project

7-2) Mood Board 1 Icon

41

핸드 드로잉 컨셉의 아이콘으로 사용자에게 재미있고 친근한 느낌을 줌

알뜰한 쇼핑리스트 작성 App

Mood Board 1


관계 개선을 위한 UX project

7-2) Mood Board 1 layout

42

깔끔한 레이아웃 / 아이콘과 텍스트의 적절한 배합

알뜰한 쇼핑리스트 작성 App

Mood Board 1


관계 개선을 위한 UX project

7-3) Mood Board 2 _냉장고 자석을 사용, 자유롭고 재미있는 디자인

냉장고 자석 및 메모지 이미지

43

알뜰한 쇼핑리스트 작성 App

Mood Board 2


관계 개선을 위한 UX project

7-3) Mood Board 2 Color

44

배경은 화이트와 아이보리 계열로, 아이콘은 높은 채도의 색상으로 사용함

알뜰한 쇼핑리스트 작성 App

Mood Board 2


관계 개선을 위한 UX project

7-3) Mood Board 2 Icon

45

동글동글한 디자인으로 귀여운 자석의 느낌을 줌

알뜰한 쇼핑리스트 작성 App

Mood Board 2


관계 개선을 위한 UX project

7-3) Mood Board 2 layout

46

조금씩 어긋나며 겹치는 판화 스타일의 레이아웃 (자유로운 느낌은 유지하되 과하지 않도록 함)

알뜰한 쇼핑리스트 작성 App

Mood Board 2


관계 개선을 위한 UX project

알뜰한 쇼핑리스트 작성 App

Mood Board 2

7-4) Information Research _ 제안서의 내용을 간결하게 보여주기 위한 인포메이션 리서치

1

1._ 장보는 시간 순서대로 리서치 정보를 나열 원형 인포메이션 디자인으로 장보기 후에서 다시 장보기 전으로 돌아오는 순차적인 과정을 보여줌 2_ 기능리서치와 UI 부분을 가지치기 형태의 다이어그램을 사용하여 시각적 재미를 줌

2

47


Thank you


0828_UI제안서_노연주