[mix 2016] creativity at each step – planning to development / 徐孝真 amoeba design...

32
1 5~8f Hosan bldg. 61-4 Nonhyun-dong Gangnam-gu Seoul 135-010 Korea Tel 82 2 3485 0300 Fax 82 2 3447 7786 ㅣ www.amoeba.co.kr ㅣ Copyright©2015 amoeba. All rights reserved. MIX Conference 2016 2016.5.22ㅣ Hyo-Jin Suh

Upload: hpx

Post on 14-Jan-2017

128 views

Category:

Presentations & Public Speaking


1 download

TRANSCRIPT

Page 1: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

1

5~8f Hosan bldg. 61-4 Nonhyun-dong Gangnam-gu Seoul 135-010 Korea Tel 82 2 3485 0300 Fax 82 2 3447 7786 ㅣ www.amoeba.co.kr ㅣ Copyright©2015 amoeba. All rights reserved.

MIX Conference 20162016.5.22ㅣ Hyo-Jin Suh

Page 2: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

2

Page 3: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

3

[시장 조사 및 조사 설계]Question Define Goal

Questions for Discover

Define Direction/Mission,Problem

Deliver

Discover Ideation

? ?

Page 4: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

4

Evaluation

GUI

UI, UX

Development

DevelopmentUI DesignUX ConceptPlanningResearch

GUI ConceptDesign Key FactorDesign Direction

Main Screen DefinitionDesign Style Direction

Main Design Style DefinitionPain Point Analysis

Detail Design Layout/Fonts/ColorVisual Effects

GUI Guideline and Evaluation Maintenance

User/Market ResearchService AnalysisTrend Benchmarking

UX Concept SpecificationsDesign Key Factor AnalysisDesign Direction

Use CasesFunctional RequirementsInformation Architecture

Interaction Style DesignMenu TreeDetail Screen & Interations

UI Guideline and EvaluationMaintenance

UX Flow Analysis Interaction SpecficationConcept Analysis

Interaction VisualizationDraft Sample Test

Interaction Motion GuideSimulation Flash Prototyping

Development EvaluationMaintenance

Planning Design Develop

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

Page 5: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

5

Evaluation

GUI

UI, UX

Development

DevelopmentUI DesignUX ConceptPlanningResearch

GUI ConceptDesign Key FactorDesign Direction

Main Screen DefinitionDesign Style Direction

Main Design Style DefinitionPain Point Analysis

Detail Design Layout/Fonts/ColorVisual Effects

GUI Guideline and Evaluation Maintenance

User/Market ResearchService AnalysisTrend Benchmarking

UX Concept SpecificationsDesign Key Factor AnalysisDesign Direction

Use CasesFunctional RequirementsInformation Architecture

Interaction Style DesignMenu TreeDetail Screen & Interations

UI Guideline and EvaluationMaintenance

UX Flow Analysis Interaction SpecficationConcept Analysis

Interaction VisualizationDraft Sample Test

Interaction Motion GuideSimulation Flash Prototyping

Development EvaluationMaintenance

Planning Design Develop

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

Page 6: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

6http://jasonfurnell.files.wordpress.com/2011/08/customer-journey.png

standardized questionnaire

online questionnaire, a face-to-face

interview, or a telephone interview

normally short and to the point,

less than 5 minutes to complete.

aids and product samples.

user-centered design ethnographic

research method.

two-hour, one-on-one interaction

watches normal activities

discusses what they see with the

user.

Page 7: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

7

Today’s Keyword

“Truck”

Page 8: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

8

Step 1 : Understanding Customer Modeling

Step 2 : Hypothesis

Step 3 : Customer Behavior, Mind mapping

Discover Insights through Desk Research

[Tip]

- Early stage in understanding the key players

and role.

- Caution in pre-mature conclusions and

assumptions

Hypothesis for user modeling, concept and

design direction

[Tip]

- Do not assume key players share same view

- Need customer journey, requirements, types

- Comparison between existing customer

research

Evaluation by ethnographic methods

[Tip]

- Anaylysis based on ethnographic approaches

rather than anthropological or business

analysis methods.

https://sites.google.com/site/journeymapping/

Identifying Service UX Elements and Framework

Page 9: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

9

Step 4 : Analyze customer data,Requirements

Step 5 : User Modeling, CustomerJourney map

Discover Insight Touch points and Service

Interaction

Evaluating Hypothesis

Develop User Modeling

[Tip]

- Missing logical analytic data

- Overlooking Contextual data (not Statistical)

Developing Customer Journey map

[Tip]

- Data overloading

- Efficient Infographics for conceptualization

https://sites.google.com/site/journeymapping/

Identifying Service UX Elements and Framework

Page 10: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

10

http://jasonfurnell.files.wordpress.com/2011/08/customer-journey.png

combining user modeling with customer journey

map,

better understanding of the user needs.

needed before user interface and interaction design

focusing on the task flow and the user

experience system

provide base for main usage scenes and

touch points

recommended for new services or

unfamiliar areas

Page 11: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

11

[Gesture] [Editing] [Layout] [Hierarchy]

Page 12: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

12

[Incheon Airport 1F]

캠코더 설치 위치

2

3

1

[Incheon Airport 1F]

관찰 멤버 위치• 1 – Roaming center 부스 안쪽• 2 – Roaming center 부스 바깥 쪽, 우측• 3 – 부스와 일정 거리 유지 (상황에 따라 이동하며 관측)

Page 13: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

13

Evaluation

GUI

UI, UX

Development

DevelopmentUI DesignUX ConceptPlanningResearch

GUI ConceptDesign Key FactorDesign Direction

Main Screen DefinitionDesign Style Direction

Main Design Style DefinitionPain Point Analysis

Detail Design Layout/Fonts/ColorVisual Effects

GUI Guideline and Evaluation Maintenance

User/Market ResearchService AnalysisTrend Benchmarking

UX Concept SpecificationsDesign Key Factor AnalysisDesign Direction

Use CasesFunctional RequirementsInformation Architecture

Interaction Style DesignMenu TreeDetail Screen & Interations

UI Guideline and EvaluationMaintenance

UX Flow Analysis Interaction SpecficationConcept Analysis

Interaction VisualizationDraft Sample Test

Interaction Motion GuideSimulation Flash Prototyping

Development EvaluationMaintenance

Planning Design Develop

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

Page 14: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

14

THE HANDYMAN SHOP

Storyboard for explaining Multi-service Center

By using specific scene, helps designers understand the space

and context of the customer experience

THE ARGOS EXPERIENCE

Using the comical approach defines a persona that goes shopping at a

local market, looking for a product and purchasing the product.

Using images, pictures and videos to generate service usage scenes showing all touch points and user

experiences and relations

Page 15: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

15

Character Profiles is used to share information about the service users. It assumes an imaginary

character with image and text.

A Persona is the generalized version of a character that represents the group characteristics.

(Social aspects / Needs / Desires / Cultural Background)

Page 16: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

16

Promotes new ideas and productive communication and saves time and money within a non-digital

environment.

Step 1. Prepare Sketchboard

Step 2. Assign Analysis areas for each team

Designate a large canvas or space for memo and sketch

Site Map, Affinity Diagram, User Requirements

Device Specifications

Provide 6 or more templates

for the main design problems

Draw ideas of the user

requirements, UI layouts,

interactions etc.

Generalize Design problems,

approaches and main function

flow

Step 3. Sketch Main Screen and Flow

Page 17: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

17

Step 4. Selection and Refinement Step 5. Evaluation and Confirmation

Sketch board

refinement

based on new

requirements

Discussions with

team members

Choose 1-2

template ideas

for detail

scenario

Finalize

sketchboard

Final requirement and design

fix amongst members

Presentation and understanding

with stakeholders

Page 18: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

18

Page 19: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

19

CASE STUDY

Page 20: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

20

Evaluation

GUI

UI, UX

Development

DevelopmentUI DesignUX ConceptPlanningResearch

GUI ConceptDesign Key FactorDesign Direction

Main Screen DefinitionDesign Style Direction

Main Design Style DefinitionPain Point Analysis

Detail Design Layout/Fonts/ColorVisual Effects

GUI Guideline and Evaluation Maintenance

User/Market ResearchService AnalysisTrend Benchmarking

UI Concept SpecificationsDesign Key Factor AnalysisDesign Direction

Use CasesFunctional RequirementsInformation Architecture

Interaction Style DesignMenu TreeDetail Screen & Interations

UI Guideline and EvaluationMaintenance

UX Flow Analysis Interaction SpecficationConcept Analysis

Interaction VisualizationDraft Sample Test

Interaction Motion GuideSimulation Flash Prototyping

Development EvaluationMaintenance

Planning Design Develop

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

Page 21: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

21

Touchpoints

Persona

Actions

Devices/Contexts

Character Profiles is used to share information about the service users. It assumes an imaginary

character with image and text.

A Persona is the generalized version of a character that represents the group characteristics.

(Social aspects / Needs / Desires / Cultural Background)

Page 22: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

22

share different ideas and perspectives through the design game

the game is a platform for different parties to share ideas and different expectations

the Main Rule is no negative comments during the game process

Page 23: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

23

Page 24: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

24

Evaluation

GUI

UI, UX

Development

DevelopmentUI DesignUX ConceptPlanningResearch

GUI ConceptDesign Key FactorDesign Direction

Main Screen DefinitionDesign Style Direction

Main Design Style DefinitionPain Point Analysis

Detail Design Layout/Fonts/ColorVisual Effects

GUI Guideline and Evaluation Maintenance

User/Market ResearchService AnalysisTrend Benchmarking

UI Concept SpecificationsDesign Key Factor AnalysisDesign Direction

Use CasesFunctional RequirementsInformation Architecture

Interaction Style DesignMenu TreeDetail Screen & Interations

UI Guideline and EvaluationMaintenance

UX Flow Analysis Interaction SpecficationConcept Analysis

Interaction VisualizationDraft Sample Test

Interaction Motion GuideSimulation Flash Prototyping

Development EvaluationMaintenance

Planning Design Develop

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

Page 25: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

25

INDI-ACTION PROJECT

Interaction testing on a subject from

a rural Indian village.

The feedback is shown on the

computer screen.

without exposing the evaluation process,

observes the user interaction and service response.

allows the designer to gather feedback and user response directly.

Page 26: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

26

mockup is picture of ideas for the service and interaction design.

starting from planning to interaction design,

mockups help refine the concepts and design and meet requirements and limitations

Page 27: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

27

CASE STUDY

Page 28: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

28

Evaluation

GUI

UI, UX

Development

DevelopmentUI DesignUX ConceptPlanningResearch

GUI ConceptDesign Key FactorDesign Direction

Main Screen DefinitionDesign Style Direction

Main Design Style DefinitionPain Point Analysis

Detail Design Layout/Fonts/ColorVisual Effects

GUI Guideline and Evaluation Maintenance

User/Market ResearchService AnalysisTrend Benchmarking

UI Concept SpecificationsDesign Key Factor AnalysisDesign Direction

Use CasesFunctional RequirementsInformation Architecture

Interaction Style DesignMenu TreeDetail Screen & Interactions

UI Guideline and EvaluationMaintenance

UX Flow Analysis Interaction SpecficationConcept Analysis

Interaction VisualizationDraft Sample Test

Interaction Motion GuideSimulation Flash Prototyping

Development EvaluationMaintenance

Planning Design Develop

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

User Testing EvaluationNext Planning

Page 29: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

29

Define Project

Goal and Problem

Discuss Before &

After ResultsDefine Function Map

Prioritize

Problem/Solutions

PROCESS

User Profile

Before After Future

Subtasks

Considerations

Pain Points

Functionality

issue cards are used for communication within team members and also promote different

perspectives and suggestions.

each card has insights, images, pictures and sometimes explanations of issues in had.

the process helps members to open up to new problems and solutions. a simple method with an dynamic

outcome.

Page 30: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

30

Case 1 : LA PERLA, INTERACTIVE TOOL FOR STAFF TRAINING Case Study 2 : TRAVEL GLOBAL | READ LOCAL

http://www.servicedesigntools.org/tools/24

observing user interactions within the context and space for the service.

provides a simulated environment for products, systems and services that has not been finalized but

provides a similar experience.

gives insight into the service and design directions and also notifying limitations and hurdles

La Perla Project(1999) / Simulating education for sales personal at each franchiseBrochures, Catalogs for guests at hotel checkins.

Designers monitor guest behavior and pain points for the day.

Page 31: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

31

http://www.servicedesigntools.org/tools/24

Simulation Process

Definition

Virtual Service Simulation

Preparation

Discussion about Virtual

Experinece

PROCESS

using touchpoint design discover related images and objects.

effective method to recognize interaction between service and users and evaluate initial service

design directions.

recommended for detailed ideation and user experience designing.

Page 32: [MIX 2016] CREATIVITY AT EACH STEP – PLANNING TO DEVELOPMENT / 徐孝真 Amoeba Design 使用者經驗總監

33

AMOEBA PROJECTS