crafting experience

36
Crafting Experience UX Design Process and Testing @RezaPrabowo

Upload: reza-prabowo

Post on 11-Aug-2014

2.799 views

Category:

Design


1 download

DESCRIPTION

UX Design Process

TRANSCRIPT

Page 1: Crafting Experience

Crafting ExperienceUX Design Process and Testing

@RezaPrabowo

Page 2: Crafting Experience

Reza PrabowoFull-time Cyclist, part-time UX Designer

@RezaPrabowo

Page 3: Crafting Experience

What is UX?I’m pretty sure the dude before me

has explained it brilliantly.

Page 4: Crafting Experience

But what does a UX Designer do?The Five Competencies of User Experience Design

Page 5: Crafting Experience

IAInformation ArchitectureThe interface structure and navigation scheme

Page 6: Crafting Experience

IDInteraction DesignThe page-level layout, task fulfilment, and

component flow

Page 7: Crafting Experience

UEUsability EngineeringThe study of discrepancies between expected

and actual user behavior

Page 8: Crafting Experience

VDVisual DesignThe consistent visual treatment of elements

and components

Page 9: Crafting Experience

VD“What people often overlook is that, for every type of

user interface element the interaction designer

specifies, the visual designer must design a widget or

devise a corresponding style. And the visual designer

must consistently apply these styles to every instance

of each element throughout the application”

- Steve Psomas

Page 10: Crafting Experience

PTPrototypingThe functioning composition of proposed

interactive concepts

Page 11: Crafting Experience

UX Design Process

Page 12: Crafting Experience
Page 13: Crafting Experience

AnalysisCollecting information about the probleməˈnalɪsɪs

Page 14: Crafting Experience

əˈnalɪsɪsAnalysis

User Research

• Surveys - Get feedback from users

• User Interviews - Everyone has a story, dig them deep

• User testing - Sitting users in front of your website or app and

asking them to perform tasks, and to think out loud while doing so

Page 15: Crafting Experience

əˈnalɪsɪsAnalysis

Competitive Analysis• Benchmarking similar products / competitor

Page 16: Crafting Experience

əˈnalɪsɪsAnalysis

Trend Analysis• Spot the latest trend and find out why they

do it that way

• patterntap.com

• uxporn.uxpin.com

• pttrns.com

Page 17: Crafting Experience

ˌʌɪdɪˈeɪʃ(ə)nIdeationThe formation of ideas or concepts.

Page 18: Crafting Experience

ˌʌɪdɪˈeɪʃ(ə)nIdeation

Doodle!

• Sketch your ideas. Proven to be the fastest UX solutions • Adaptive Path's Sketchboard

Page 19: Crafting Experience

ˌʌɪdɪˈeɪʃ(ə)nIdeation

Screenflow

• Create relationships.

Between pages,

screens, components

Page 20: Crafting Experience

dɪˈzʌɪnDesignThe fun part.

Page 21: Crafting Experience

dɪˈzʌɪnDesign

Low fidelity wireframes

• A visual guide that represents the skeletal framework of a

website / application

• With lo-fi wireframe, we can test and iterate design

solutions faster

Page 22: Crafting Experience

dɪˈzʌɪnLo-fi wireframes

Tools: UXPin, Balsamiq, Axure, OmniGraffle.

Design

Page 23: Crafting Experience

dɪˈzʌɪnDesign

Visual Design

• Communicates the brand, interactivity, workflow, and

relationships

• Consistently apply these styles to every instance of each

element

Page 24: Crafting Experience

dɪˈzʌɪnVisual designDesign

Page 25: Crafting Experience

ˈprəʊtətʌɪPrototypingMaking it work

Page 26: Crafting Experience

ˈprəʊtətʌɪPrototyping

• Deliver prototypes of concept models for testing by the

usability engineer.

• Increasing process efficiency

Page 27: Crafting Experience

ˈprəʊtətʌɪ

UXPin

Prototyping: Tools

Page 28: Crafting Experience

ˈprəʊtətʌɪ

inVision

Prototyping: Tools

Page 29: Crafting Experience

ˈprəʊtətʌɪProto.io

Prototyping: Tools

Page 30: Crafting Experience

ˈprəʊtətʌɪAxure

Prototyping: Tools

Page 31: Crafting Experience

dɪˈzʌɪnPrototyping

Tools

• UXPin - uxpin.com

• inVision - invisionapp.com

• Proto.io - proto.io

• Axure - axure.com

Page 32: Crafting Experience

ˈdɒkjʊm(ə)ntDocumentMaking documents and specifications of the user experience.

Making it easier for developer to understand how it works

Page 33: Crafting Experience

ˈɪmplɪm(ə)ntImplementWorking with the developer to make sure they

deliver the application / website as designed

Page 34: Crafting Experience

dɪˈplɔɪDeployYou can relax now. But is it over?

Page 35: Crafting Experience

But this is the easiest way to explain what UX is

Never mind the fact that they use comic sans

Page 36: Crafting Experience

Reza PrabowoFull-time Cyclist, part-time UX Designer

behance.net/RezaPrabowo