designing for mobile – an overview of early stage ux processes

37
DESIGNING FOR MOBILE EARLY STAGE UX DESIGN PROCESS Raine Qian

Upload: fitc

Post on 02-Dec-2014

304 views

Category:

Internet


4 download

DESCRIPTION

Designing for Mobile – An Overview of Early Stage UX Processes with Raine Qian Presented on September 18 2014, 2:45 - 3:30pm at FITC's Web Unleashed Toronto 2014 More info at www.fitc.ca Mobile has a huge influence in our everyday lives and behaviour; technology has evolved and we’re always “connected”, which creates so much opportunity for designers. It is essential that we (as designers) understand the mechanisms that drive human perception, cognition and behaviour, so that we can ultimately craft solutions that achieve our desired outcomes. OBJECTIVE Understanding how UX processes impact design outcomes in mobile applications TARGET AUDIENCE UI/UX Developers and Designers ASSUMED AUDIENCE KNOWLEDGE Basic UI/UX Principles FIVE THINGS THAT THE AUDIENCE WILL LEARN An overview of how Pivotal Labs approaches the Discovery process. Key considerations when designing for Mobile. An overview of early stage UX research. Understanding user personas, behaviour and use cases. How to identify the right problem(s) to solve.

TRANSCRIPT

Page 1: Designing for Mobile – An Overview of Early Stage UX Processes

DESIGNING FOR MOBILE EARLY STAGE UX DESIGN PROCESSRaine Qian

Page 2: Designing for Mobile – An Overview of Early Stage UX Processes

HI, I AM RAINE QIAN

Mobile UI and UX designer

Manager of Product Design at Pivotal Labs

@RaineQian

Page 3: Designing for Mobile – An Overview of Early Stage UX Processes

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 – An Overview of Early Stage UX Processes

UX is a Systerm

Page 5: Designing for Mobile – An Overview of Early Stage UX Processes

USABILITY

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

Page 6: Designing for Mobile – An Overview of Early Stage UX Processes

5 E of Usability

• Ease of learning : Learnability and Memorability

• Engagement

• Efficiency

• Effectiveness

• Error Tolerance

Page 7: Designing for Mobile – An Overview of Early Stage UX Processes

THE DISCIPLINES OF USER EXPERIENCE DESIGN

Page 8: Designing for Mobile – An Overview of Early Stage UX Processes

PSYCHOLOGY: LOSS AVERSION

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

Page 9: Designing for Mobile – An Overview of Early Stage UX Processes

OPTION 1 OPTION 2

Save $300/year.

Buy this widget!

Stop losing $300/year.

Buy this widget!

Page 10: Designing for Mobile – An Overview of Early Stage UX Processes

COGNITION: PERIPHERAL ATTENTION

Peripheral vision has faster reaction for detecting motion in objects.

Page 11: Designing for Mobile – An Overview of Early Stage UX Processes

INVASIVE EFFECTIVE

!!

Page 12: Designing for Mobile – An Overview of Early Stage UX Processes

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

Page 13: Designing for Mobile – An Overview of Early Stage UX Processes

MOBILE

Page 14: Designing for Mobile – An Overview of Early Stage UX Processes

MOBILE VS. DESKTOP

Page 15: Designing for Mobile – An Overview of Early Stage UX Processes

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 – An Overview of Early Stage UX Processes

LEAN FORWARD & LEAN-BACK EXPERIENCES

Page 17: Designing for Mobile – An Overview of Early Stage UX Processes

• Engaging

• Requires increased

interaction

LEAN FORWARD

Page 18: Designing for Mobile – An Overview of Early Stage UX Processes

• Low level of engagement

• Consumption mode

• Longer attention span

LEAN BACK

Page 19: Designing for Mobile – An Overview of Early Stage UX Processes

LEAN BACK APPS LEAN FORWARD APPS

Page 20: Designing for Mobile – An Overview of Early Stage UX Processes

DESIGN PROCESS

Identify the right problem for the right user

UNDERSTAND CREATE

Page 21: Designing for Mobile – An Overview of Early Stage UX Processes

1. Inception

2. Discovery

3. Framing

4. Visual & Interaction Design

5. Implementation

DESIGN PROCESS

Feedback +

Iteration

Page 22: Designing for Mobile – An Overview of Early Stage UX Processes

IN THE EARLY STAGES

Goals

End Users

Use Cases, Scenarios

User Needs, Wants, Motivations

Technical Feasibility

Deep Understanding

Page 23: Designing for Mobile – An Overview of Early Stage UX Processes

GOALS

• What is the Purpose of the App?

• Client’s Goals User’s Goals

• Stay Focused and Prioritize

Page 24: Designing for Mobile – An Overview of Early Stage UX Processes

LEAN VALIDATION WORKSHOP

• Collaborative with key

stakeholders

• Product proposition

• Feature prioritization

Page 25: Designing for Mobile – An Overview of Early Stage UX Processes

END USERS

• End user behavior

• Personas

• Focus on target user group

Page 26: Designing for Mobile – An Overview of Early Stage UX Processes

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 – An Overview of Early Stage UX Processes

USE CASES, SCENARIOS

• Workflows

• Social context

• Environmental factors

• Errors or edge cases

Page 28: Designing for Mobile – An Overview of Early Stage UX Processes

PROJECT EXAMPLE

Universal Mobile Payment App

Page 29: Designing for Mobile – An Overview of Early Stage UX Processes

STORYBOARDING

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

Page 30: Designing for Mobile – An Overview of Early Stage UX Processes

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 – An Overview of Early Stage UX Processes

USER NEEDS, WANTS & MOTIVATIONS

• Know the needs and unvoiced desires

• User interviews

• Dig below the surface

Page 32: Designing for Mobile – An Overview of Early Stage UX Processes

PROJECT EXAMPLE

Designing An App For

A Cruise Ship

Page 33: Designing for Mobile – An Overview of Early Stage UX Processes

ONSITE USER RESEARCH

Page 34: Designing for Mobile – An Overview of Early Stage UX Processes

RESULTS OF CUSTORMER PRIMARY NEEDS

Assumed:

Fun activities on the cruise ship

Actual:

Communicating with fellow travellers

Page 35: Designing for Mobile – An Overview of Early Stage UX Processes

TECHNICAL FEASIBILITY

• Balance between design and engineering

• Agile style and communication

• Willingness to think about the future

Page 36: Designing for Mobile – An Overview of Early Stage UX Processes

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

Page 37: Designing for Mobile – An Overview of Early Stage UX Processes

THANK YOU