designing for mobile: early stage ux design process

37
DESIGNING FOR MOBILE EARLY STAGE UX DESIGN PROCESS Raine Qian

Upload: raine-qian

Post on 27-May-2015

490 views

Category:

Mobile


0 download

DESCRIPTION

Presentation for FITC Event: WEB UNLEASHED 2014 An overview of early stage UX design process and key considerations when designing for Mobile. How UX processes impact design outcomes and how to identify the right problem(s) to solve for the user.

TRANSCRIPT

Page 1: Designing for Mobile: Early Stage UX Design Process

DESIGNING FOR MOBILE EARLY STAGE UX DESIGN PROCESSRaine Qian

Page 2: Designing for Mobile: Early Stage UX Design Process

HI, I AM RAINE QIAN

Mobile UI and UX designer

Manager of Product Design at Pivotal Labs

@RaineQian

Page 3: Designing for Mobile: Early Stage UX Design Process

WHAT IS UX?

User experience is how a person feels when interacting with a particular product, system or service.

BEHAVIORS EMOTIONSATTITUDES

Page 4: Designing for Mobile: Early Stage UX Design Process

UX is a Systerm

Page 5: Designing for Mobile: Early Stage UX Design Process

USABILITY

Usability is how easy, efficient and enjoyable a human-made object is to use.

Page 6: Designing for Mobile: Early Stage UX Design Process

5 E of Usability

• Ease of learning : Learnability and Memorability

• Engagement

• Efficiency

• Effectiveness

• Error Tolerance

Page 7: Designing for Mobile: Early Stage UX Design Process

THE DISCIPLINES OF USER EXPERIENCE DESIGN

Page 8: Designing for Mobile: Early Stage UX Design Process

PSYCHOLOGY: LOSS AVERSION

The strong tendency in humans to avoid loss, over and above their desire to acquire gains.

Page 9: Designing for Mobile: Early Stage UX Design Process

OPTION 1 OPTION 2

Save $300/year.

Buy this widget!

Stop losing $300/year.

Buy this widget!

Page 10: Designing for Mobile: Early Stage UX Design Process

COGNITION: PERIPHERAL ATTENTION

Peripheral vision has faster reaction for detecting motion in objects.

Page 11: Designing for Mobile: Early Stage UX Design Process

INVASIVE EFFECTIVE

!!

Page 12: Designing for Mobile: Early Stage UX Design Process

UX DESIGN INCLUDES ALL KINDS OF DESIGN THINKING FOR AN END USER.

Page 13: Designing for Mobile: Early Stage UX Design Process

MOBILE

Page 14: Designing for Mobile: Early Stage UX Design Process

MOBILE VS. DESKTOP

Page 15: Designing for Mobile: Early Stage UX Design Process

DESKTOPMOBILE

• Predictable environments

• Predictable inputs

• Large interface

• For detailed tasks

• Variable environments

• Limited input system

• Smaller interface

• In multitasking scenarios

Page 16: Designing for Mobile: Early Stage UX Design Process

LEAN FORWARD & LEAN-BACK EXPERIENCES

Page 17: Designing for Mobile: Early Stage UX Design Process

• Engaging

• Requires increased

interaction

LEAN FORWARD

Page 18: Designing for Mobile: Early Stage UX Design Process

• Low level of engagement

• Consumption mode

• Longer attention span

LEAN BACK

Page 19: Designing for Mobile: Early Stage UX Design Process

LEAN BACK APPS LEAN FORWARD APPS

Page 20: Designing for Mobile: Early Stage UX Design Process

DESIGN PROCESS

Identify the right problem for the right user

UNDERSTAND CREATE

Page 21: Designing for Mobile: Early Stage UX Design Process

1. Inception

2. Discovery

3. Framing

4. Visual & Interaction Design

5. Implementation

DESIGN PROCESS

Feedback +

Iteration

Page 22: Designing for Mobile: Early Stage UX Design Process

IN THE EARLY STAGES

Goals

End Users

Use Cases, Scenarios

User Needs, Wants, Motivations

Technical Feasibility

Deep Understanding

Page 23: Designing for Mobile: Early Stage UX Design Process

GOALS

• What is the Purpose of the App?

• Client’s Goals User’s Goals

• Stay Focused and Prioritize

Page 24: Designing for Mobile: Early Stage UX Design Process

LEAN VALIDATION WORKSHOP

• Collaborative with key

stakeholders

• Product proposition

• Feature prioritization

Page 25: Designing for Mobile: Early Stage UX Design Process

END USERS

• End user behavior

• Personas

• Focus on target user group

Page 26: Designing for Mobile: Early Stage UX Design Process

ETHNOGRAPHIC RESEARCH

• Observe target users in real

world setting

• Get insight into habits,

preferences and behavior

• Conduct your own practical

research

Page 27: Designing for Mobile: Early Stage UX Design Process

USE CASES, SCENARIOS

• Workflows

• Social context

• Environmental factors

• Errors or edge cases

Page 28: Designing for Mobile: Early Stage UX Design Process

PROJECT EXAMPLE

Universal Mobile Payment App

Page 29: Designing for Mobile: Early Stage UX Design Process

STORYBOARDING

A method used to communicate ideas and create a sense of shared context and purpose.

Page 30: Designing for Mobile: Early Stage UX Design Process

USER EXPERIENCE MAP

A visual representation that illustrates a user’s activity flow, mental status, expectations, and actions for a particular goal.

Page 31: Designing for Mobile: Early Stage UX Design Process

USER NEEDS, WANTS & MOTIVATIONS

• Know the needs and unvoiced desires

• User interviews

• Dig below the surface

Page 32: Designing for Mobile: Early Stage UX Design Process

PROJECT EXAMPLE

Designing An App For

A Cruise Ship

Page 33: Designing for Mobile: Early Stage UX Design Process

ONSITE USER RESEARCH

Page 34: Designing for Mobile: Early Stage UX Design Process

RESULTS OF CUSTORMER PRIMARY NEEDS

Assumed:

Fun activities on the cruise ship

Actual:

Communicating with fellow travellers

Page 35: Designing for Mobile: Early Stage UX Design Process

TECHNICAL FEASIBILITY

• Balance between design and engineering

• Agile style and communication

• Willingness to think about the future

Page 36: Designing for Mobile: Early Stage UX Design Process

ALWAYS REMEMBER WHO YOU ARE DESIGNING FOR AND WHY ARE YOU DESIGNING IT.

Page 37: Designing for Mobile: Early Stage UX Design Process

THANK YOU