[Msd09]mobile design
45
http://msd2013.jylee6977.com/tc KGIT 2013 SPRING CLASS @ JYLEE Mobile Service Design
description
Transcript of [Msd09]mobile design
![Page 1: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/1.jpg)
http://msd2013.jylee6977.com/tc
KGIT 2013 SPRING CLASS @ JYLEE
Mobile
Service
Design
![Page 2: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/2.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
1 Class Orientation - 수업 및 프로젝트 소개
- 아이스 브레이킹
2 What is Mobile App?
What is Service Design?
- 모바일과 모바일 앱에 대한 이해
- 모바일 서비스 개발을 위한 서비스 디자인
3 Mobile Context
& User Experience
- 모바일 컨텍스트에 대한 이해
- 모바일 사용자 경험에 대한 이해
- 모바일 UI에 대한 이해
4 Mobile Service Design(1)
- Discovery Phase
- 무엇을 서비스화/디자인 할 것인가?
- Desk Research를 통한 발견
5 Mobile Service Design(2)
- Define Phase : 문제정의
- 서비스 대상에 대한 문제정의
- User Research. Service Safari
6 Mobile Service Design(3)
- Define Phase : 서비스전략
- 문제정의에 따른 컨셉 및 전략 구축
- Interpretation & Mapping
7 Mobile Service Design(4)
- Define Phase : 디자인원칙수립
- 전략 및 컨셉에 따른 사용자 시나리오
- Persona, Service Principle, Design Criteria
![Page 3: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/3.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Define | 배경 및 환경조사
Discovery | 사용자 조사 및 관찰
Synthesis | 모델링, 아이디어
Implementation | 프로토타이핑, 적용
!
Problem Define
무엇이 문제이고 그것을 어떻게 해결할 것인가?
Design Goal& Principle
해결을 위해 서비스 사용자들의 Unmet Needs와 Latent Needs는 무엇인가?
Solution Suggestion
환경적 문제와 사용자들의 Needs와의 Gap을 줄일 수 있는 방안은 무엇이 있는가?
Big Idea
![Page 4: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/4.jpg)
Mobile
Service
Design
FOR APP PROCESS
![Page 5: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/5.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 6: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/6.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
기획
디자인 개발
개발 디자인 Collaboration
![Page 7: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/7.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
REVIEW & GO
Session1 Session2
REVIEW & GO REVIEW & GO
![Page 8: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/8.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
MAPPING
![Page 9: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/9.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
IDEA WIREFRAME DESIGNING
Mapping
![Page 10: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/10.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
IDEA WIREFRAME DESIGNING
Mapping
![Page 11: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/11.jpg)
Mobile
Service
Design
1. Converting Idea to Contents
USER SCENARIO
![Page 12: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/12.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
•
•
•
•
![Page 13: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/13.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 14: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/14.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 15: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/15.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 16: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/16.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 17: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/17.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
•
•
•
•
•
•
![Page 18: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/18.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 19: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/19.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 20: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/20.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 21: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/21.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
>
![Page 22: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/22.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 23: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/23.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
![Page 24: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/24.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
IDEA WIREFRAME DESIGNING
Mapping
![Page 25: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/25.jpg)
Mobile
Service
Design
2. For Information Architecture
Mobile IA
![Page 26: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/26.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns
![Page 27: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/27.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns 1. Hierarchy
![Page 28: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/28.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns 2. Hub & Spoke
![Page 29: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/29.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns 3. Nexted Doll
![Page 30: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/30.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns 4. Tabbed View
![Page 31: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/31.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns 5. Bento Box / Dashboard
![Page 32: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/32.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile IA Patterns 6. Filtered Views
![Page 33: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/33.jpg)
Mobile
Service
Design
3. For List of tasks and functions
Prototyping
![Page 34: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/34.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Why Prototype?
![Page 35: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/35.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Why Mobile is Difference?
![Page 36: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/36.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Why Mobile is Difference?
![Page 37: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/37.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
CONTENTS STRATEGY
INFORMATION VISUALIZATION
정보의 CONTENTS
화
아이디어,
기능, 메타포
일반정보
일반정보
일반정보
사용자에게 유의미한
CONTENTS
REQUIREMENT
USER’S TASK TO ACHIEVE
GOAL
![Page 38: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/38.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Paper Prototype Process
![Page 39: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/39.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Paper Prototype Process
![Page 40: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/40.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Paper Prototype Process
![Page 41: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/41.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Paper Prototype Process
![Page 42: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/42.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Paper Prototype Process
![Page 43: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/43.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
iPhone Idea Sheet iPhone Application Sketch Template
Android Wireframe Templates Wireframe Print and Sketch Template
![Page 44: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/44.jpg)
Mobile
Service
Design
FOR NEXT WEEK
1. SCENARIO 2. SELECT KEY IDEA & IA PATTERN 3. PAPER PROTOTYPE 4. SITEMAP (LIST OF FUNCTIONS&SPECS)
5. UI WIREFRAME
준비해올 것!
![Page 45: [Msd09]mobile design](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7fc194a795907498b45dd/html5/thumbnails/45.jpg)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
SAMPLES >>선배들의 작업들을 한번 볼까요? (MASH UP SERVICE DESIGN 2010)
U-GALLERY Date Couch
