crafting experience

Crafting Experience UX Design Process and Testing @RezaPrabowo

Upload: reza-prabowo

Post on 11-Aug-2014




1 download


UX Design Process


Page 1: Crafting Experience

Crafting ExperienceUX Design Process and Testing


Page 2: Crafting Experience

Reza PrabowoFull-time Cyclist, part-time UX Designer


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


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


Competitive Analysis• Benchmarking similar products / competitor

Page 16: Crafting Experience


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

do it that way




Page 17: Crafting Experience

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

Page 18: Crafting Experience



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

Page 19: Crafting Experience



• Create relationships.

Between pages,

screens, components

Page 20: Crafting Experience

dɪˈzʌɪnDesignThe fun part.

Page 21: Crafting Experience


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.


Page 23: Crafting Experience


Visual Design

• Communicates the brand, interactivity, workflow, and


• Consistently apply these styles to every instance of each


Page 24: Crafting Experience

dɪˈzʌɪnVisual designDesign

Page 25: Crafting Experience

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

Page 26: Crafting Experience


• Deliver prototypes of concept models for testing by the

usability engineer.

• Increasing process efficiency

Page 27: Crafting Experience



Prototyping: Tools

Page 28: Crafting Experience



Prototyping: Tools

Page 29: Crafting Experience


Prototyping: Tools

Page 30: Crafting Experience


Prototyping: Tools

Page 31: Crafting Experience



• UXPin -

• inVision -

• -

• Axure -

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