[gender]10_scenario+prototype

by jylee 2013

by jylee 2013 1 09/06 Introduction

2 09/13 Gender? Feminism차이와 사이? 여성? 남성?

3 09/27 관찰하기

4 10/11 젞더 & 서비스디자인

5 10/18 서비스디자인01_ Discovery단계

6 10/25 서비스디자인02_ Define(Interpretation)단계

7 11/01 서비스디자인03_ Define(Modeling/Mapping)단계

8 11/08 중갂고사

9 11/15 서비스디자인04_ Design(Brainstorming/Ideation)단계

10 11/22 서비스디자인05_ Design(Service Concept)단계

11 11/29 서비스디자인06_ Design(Service Scenario)단계

12 12/06 서비스디자인07_ Delivery(Service Prototype)단계

13 12/13 조별 과제 공유 및 토롞

14 12/20 진행사항 공유

15 12/24 기말고사

by jylee 2013

Define | 배경 및 홖경조사

Discovery | 사용자 조사 및 관찰

Synthesis | 모델링, 아이디어

Implementation | 프로토타이핑, 적용

!

Problem Define

무엇이 문제이고 그것을 어떻게 해결할 것인가?

Design Goal& Principle

해결을 위해 서비스 사용자들의 Unmet Needs와 Latent Needs는 무엇인가?

Solution Suggestion

환경적 문제와 사용자들의 Needs와의 Gap을 줄일 수 있는 방안은 무엇이 있는가?

Big Idea

by jylee 2013





! Big Idea

팽창 확산 擴散 Diffusion

Affinity Diagram

수축 수렴 收斂 Convergence

서비스 원칙 SERVICE PRINCIPLE

대상의 명확화 PERSONA

대상의 문제점 CUSTOMER JOURNEY MAP

by jylee 2013





! Big Idea

팽창 확산 擴散 Diffusion

Ideas

수축 수렴 收斂 Convergence

by jylee 2013

1

by jylee 2013

by jylee 2013 9

by jylee 2013 10

출처: service design network

by jylee 2013 11

출처: service design network

by jylee 2013 12

COLLABORATIVE SERVICES Social innovation and design for sustainability

What is a sustainable lifestyle? What will our daily lives become if we agree to change some of our routines? How do we reduce our environmental impact without lowering our living standards? Observations show that growing material wealth and levels of people satisfaction are increasingly uncoupled. Could the pursuit of more sustainable lifestyles also lead to better quality and more satisfaction? This book attempts to answer some of these questions. Mainly, it suggests a scenario: the Scenario of Collaborative Services.

지속가능성을 위핚 사회혁싞과 디자인 COLLABORATIVE SERVICES 지속 가능핚 생활을 위해 생활수준은 유지하고 환경에 미치는 영향을 감소시킬 수 있는 방법들을 몇 가지 시나리오 형태로 제앆

시나리오의 사례 Text Storyboard Storytelling Video

collaborative_services.pdf >>

출처: The Sustainable Everyday Project (SEP) http://www.sustainable-everyday.net/main/?page_id=26

collaborative_services.pdf

by jylee 2013 13


1st, Map the available technologies

2nd, Define user needs 3rd, Match technologies with user needs. 데스크탑 가상화 전략 두 벆째 단계는 특정 가상화 기술 혜택을 누릯 수도 사용자의 요구와 시나리오를 파악하는 것입니다. 이 과정을 단순화하기 위해 Microsoft 5명의 윈도우 최적화된 데스크탑 시나리오를 파악했다. 각각의 사용 시나리오는 독특핚 사용자의 IT 요구사항을 보여준다.

Desktop Virtualization Strategy 데스크탑 가상화 전략

http://blogs.technet.com/b/microsoftsetup/archive/2009/03/26/desktop-virtualization-strategy-part-1.aspx http://blogs.technet.com/b/microsoftsetup/archive/2009/03/26/desktop-virtualization-strategy-part-ii.aspx

by jylee 2013 14


1st, Map the available technologies 2nd, Define user needs

3rd, Match technologies with user needs 다음표의 데스크톱 가상화 솔루션은 각각의 시나리오에 가장 적합핚 지침을 제공합니다

Desktop Virtualization Strategy 데스크탑 가상화 전략

http://blogs.technet.com/b/microsoftsetup/archive/2009/03/26/desktop-virtualization-strategy-part-iii.aspx

by jylee 2013 15


SEATTLE CHILDREN’S HOSPITAL PROCESS MAP

This is an example of an illustrated storyboard used to support the explanation of the process during the staff internal meetings and to support the communication of the service to the final users, explaining how the hospital will take care of him. In particular this representation describes the complicated and frightening stages surrounding the children surgery: what the family of a child who is being treated at the medical centre will experience. The representation shows the different steps of the storyboard taking into account their spatial position: we have four steps to arrive to the patient surgery, that is the central point of the experience, and for steps after the surgery. Each action is illustrated and supported by other two layers of information: one is given by the pictogram, that indicates if it is a moment of wait, a moment of planning or a moment of interaction with the medical staff and the other is given by the text. ‚Going through the consulting session with XPLANE allowed us to hone in on the nine critical steps that we wanted to clearly communicate to families at the medical center. We recognize that having a child undergo surgery is a life-altering experience for families and we want to do everything in our power to promote their peace of mind and understanding; we feel this map helps accomplish that goal.‛ David Perry, vice president of marketing, Children’s Hospital http://www.xplane.com/

수술에 대한 공포와 무서움이 더 큰 어린이들을 위한 병원서비스

http://www.xplane.com/

by jylee 2013 16


Showing an entire service encounter at Argos. 아고르에서의 발생하는 전체 서비스.

씽크퍼블릭은 세 페이지 만화를 통해 아르고스에서 발생하는 전체 서비스를 보여주었다. 우선, 시각화는 백 오피스에서 무슨 일이 일어나는지 정보를 제공하지 않고, 전적으로 고객 관점에 중심으로 했다. 또핚, 낮은 레벨의 스케치를 위해 사진을 포토샵을 통해 필터링하는 방법을 사용하였다. 그냥 사진을 사용하기 보다 결과적으로 만화 같은 시각적 스타일을 유지하였다.

http://thinkpublic.com/news/ http://designforservice.wordpress.com/2009/01/20/thinkpublic-comic

by jylee 2013 17


NARRATIVE DESIGN TOOLKIT 이야기 디자인 툴 킷 Marco Zamarato

일반적으로 퍼소나와 시나리오를

프로토타입을 만들거나 다른 이와의 프로젝트 소통에 사용하지만,

퍼소나 및 시나리오가 때로는 틀에 박힌 결과로 나오기 때문에

스토리텔링에 유용하도록 이야기디자인 툴 킷을 개발하였고,

이를 활용해서 시나리오 제작에 활용

출처: http://www.pidublu.com/projects/narrative_design

by jylee 2013 18


Explore Chicago Mobile Application: This project was commissioned by the City of Chicago Center for Innovation. Our goal was to develop a mobile application that provides tools for exploration for both Chicago locals and out-of-town travelers.

시카고 여행을 위한 모바일 어플리케이션 시카고시의 의뢰로 시카고 지역 주민과 시카고를 여행하는 여행객을 위핚 모바일 어플리케이션을 개발하는데 있어 사용된 스토리보드

과정: 사용자 인터뷰 – 사용자 분석 – 시나리오 기획 – 페이퍼 프로토타이핑 – 좀더 상세한 프로토타이핑

Explore Chicago Mobile Application

출처 : http://www.linlindesigns.com/exploreChicago.html

by jylee 2013 19


case study from Dave Chiu and David Hilhorst

RentAThing, Reputation Management Service

Rentathing이란 서비스를 통해 올릮 사람의 평판에 따라

판단하여 물건을 빌려주고 받을 수 있다는 서비스를

인형을 통해 시나리오 결과물을 만든 사례

출처: http://goo.gl/2NM45

by jylee 2013

2

by jylee 2013 21

Sketch Prototype

What I do, I remember. What I do, I understand.

Leonardo da Vinci

by jylee 2013 22

Sketch Prototype

What I do, I remember. What I do, I understand.

Leonardo da Vinci

by jylee 2013 23

Sketch Prototype

참고 <사용자 경험 스케치>빌 벅스턴 지음

by jylee 2013 24

참고 <사용자 경험 스케치>빌 벅스턴 지음

by jylee 2013

by jylee 2013 26

출처 : This is service design thinking 중 발췌 [출처] 서비스 경험 프로토타이핑에 대해... (쓸만핚웹! usableweb.co.kr) | 작성자 윤성원

by jylee 2013 27

출처 : This is service design thinking 중 발췌

[출처] 서비스 경험 프로토타이핑에 대해... (쓸만핚웹! usableweb.co.kr) | 작성자 윤성원

by jylee 2013 28

Rapid Rough Right

by jylee 2013 29

by jylee 2013 30

출처: 그린 출처 : google.com. 좌) 프로토타입, 우) 최종 완성 제품 디자인에 집중하라. IDEO 팀브라운

by jylee 2013 31

출처: <서비스디자인하라>, 제니아 빌라데스 지음/ 이원제 옮김

by jylee 2013 32

IDEO <TECH BOX>

by jylee 2013

Digital Sketch

<그린> 태블릿에 스케치를하고 각 화면에 UI를 그릮다음 버튺위치에 압력 위젯을 붙여 테스트 해보고 있는 그린. KAIST

by jylee 2013

서비스나 상품에 대핚 것들을 그린이나 사진 등으로 정리핚 계획표. 스토리(story) 내용을 보는 사람이 이해핛 수 있도록 그린으로 그려 정리핚 판(board). 주요 장면을 앞으로 완성해야 핛 영상에 가장 가깝게 미리 보여 주는 기능을 핚다. 기획 단계에서 시나리오를 구체적으로 시각화하는 도구로 쓰이며 촬영장에서는 주요 제작진 사이 의사소통을 위핚 중요핚 도구로 쓰인다.

Storyboard

by jylee 2013

스토리보드의 형태는 다양하다. 스케치로만 마무리 되는 경우도 있고 애니메이션으로 제작하여 음악이나 음성을 넣어 보여주는 경우도 있다.

<그린> design dive 2020 융합 5팀이 작업핚 농촌에서의 교통서비스에 대핚 스토리보드

Storyboard _Animation

by jylee 2013 36

사용성 검사를 위해 종이로 인터페이스의 프로토타입을 만들고

테스트하여 피드백을 얻는 일렦의 과정

<그린> I’m Feeling Really Lucky라는 웹사이트를 위핚 paper 프로토타입 사례 / time limit : 60 min

Paper Prototyping

by jylee 2013 37

쉽고 빠르게 제작이 가능핚 FOAM을 통해서 실물의 형태를 가늠. 러버폼, 우레탄폼, 폼글라스, 폼콘크리트 같은 복합 재료를 사용핚다.

Foam model

by jylee 2013 38

실물 크기의 모형으로 제작해보는 방법.

갂단하고 빠르게 만드는 것부터 3D를 이용핚 디지털 목업까지 원하는 완성도에 따라 다양하게 제작핚다.

이후에 목업핚 제품을 가지고 롤플레이나 경험프로토타입에 사용하기도 핚다.

<그린> 로봇을 종이로 갂단히 만들어 보는 그린 (60분) / 톱니바퀴를 종이로 만들어 시험해 보는 그린

Mock Up

by jylee 2013 39

레고를 이용하여 만드는 프로토타입.

단적인 사용자 경험보단 고객이 경험하는 서비스의 과정이나 상황을 표현하기 알맞은 방법.

<그린> 엔진의 ‘happier customers’ <출처> Creative Lapland Seminar 2010 발표자료 중, Stefan Moritz

Lego Playing

by jylee 2013 40

상황을 설정하고 여러 명의 사람들 각자가 맡은 역을 연기하여 비슷핚 체험을 통해 특정핚 일이 실제로 일어났을 때 올바르게 대처핛 수 있게 하는

학습 방법들 가운데 하나로 실제와 비슷핚 다양핚 장면을 미리 체험함으로써 실제로 경험을 쌓은 것과 같은 효과와 예상치 못했던 인사이트들이 도출될 수 있다.

Role-play / Body storming

<영상> 웹사이트 서비스에 대핚 롤플레이 장면 / 레스토랑에서 주문을 받는 롤플레이

by jylee 2013 41

단순히 소프트웨어와 사용자갂의 기능위주로 검증하는 것에서 더 나아가

시나리오가 있는 비디오 형태의 애니메이션으로 제작하여 사용자나 고객이 겪는 일렦의 과정 및 경험들에 대해 검증해보는 프로토타입

출처: Project : Stud'car

Desktop Walkthrough

by jylee 2013

Experience prototype은 표현의 일종으로,

여러 프로토타입의 방법을 복합적으로 사용핚다.

디자인에 대해 이해하거나 탐험 또는 의사소통 알아보는 매체로서,

디자인하는 제품, 시스템, 공갂에 대해 이해하도록 설계핚다.

<그린> 경험 시앆을 이용해 지하철역에서 사용자를 대상으로 많은 질문과 시험을 거듭했다.(사용자경험 검증 사례)

Experience prototype_복합(1/2)

by jylee 2013

<영상&그린> 경험 시앆을 이용해 대화하는 전시장을 만들기 위핚 Museum experience prototype

User Experience(사용자경험) 각 컬러에 맞는 악기를 다같이 두드리면 화면으로 조화되며 소리가 나는 전시모습을 프로토타입으로 제작하여 경험하는 모습

Human Experience(인갂경험) (좌) 팔을 묶고 식사하는 실험 (중) 입에 뭐 물고 대화하는 실험 (우) 시끄러운 음악을 들으며 대화하기

Experience prototype은 표현의 일종으로,

여러 프로토타입의 방법을 복합적으로 사용핚다.

디자인에 대해 이해하거나 탐험 또는 의사소통 알아보는 매체로서,

디자인하는 제품, 시스템, 공갂에 대해 이해하도록 설계핚다.

Experience prototype_복합(1/2)

by jylee 2013

3

by jylee 2013

Reality

[Product]

Image

[User]

Identity

[Company]

Intersection [Branding] “브랜드는 고객이 인식하는 모든것을 말하며,

브랜드의 실제 Realyty와 브랜드가 지향하는 Identity그리고 소비자가 받아들이는

Image의 교집합을 넓히는 모든 활동을 말한다”

by jylee 2013

by jylee 2013

Schematic Your User Interfaces

Wireframe

4

by jylee 2013

by jylee 2013

1. Use pen & paper

by jylee 2013

2. Use Online Tools

https://gomockingbird.com/

http://lovelycharts.com/

http://www.lumzy.com/

https://www.jumpchart.com/

http://balsamiq.com/

http://www.google.com/google-d-s/drawings/

by jylee 2013

| Wireframe

Proto : only 5 proto free | Interactive Moqups : Iphone (Non- Interactive) UXPin : 30days Free | Interactive

Balsamiq : Download App Justinmind : Download App | Interactive Fluid : Interactive Free

http://proto.io/

https://moqups.com/

http://uxpin.com/

http://www.balsamiq.com/

http://www.fluidui.com/

by jylee 2013

| Wireframe

Axure : Download App | Interactive High Mockflow : 5pages free | Interactive Protoshare : Fee Included

Wireframe : So simple Wireframe Sketcher : Download Pidoco : Fast and Interactive

http://www.axure.com/

http://www.mockflow.com/

http://wireframe.cc/

http://wireframesketcher.com/

by jylee 2013

| Wireframe

Invision : Share Your Prototype Mock.me (simplest to check) iPLOTZ : Share your project

Pencils : Download GUI

http://www.invisionapp.com/

https://iplotz.com/

by jylee 2013 by jylee 2013

1. 지금까지 진행사항 PPT로 정리 2. Service Prototyping / 금일 아이디어를 중심으로 시나리오 작업

[gender]10_scenario+prototype

Documents