Crafting Experience

Crafting ExperienceUX Design Process and Testing

@RezaPrabowo

Reza PrabowoFull-time Cyclist, part-time UX Designer

@RezaPrabowo

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

has explained it brilliantly.

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

IAInformation ArchitectureThe interface structure and navigation scheme

IDInteraction DesignThe page-level layout, task fulfilment, and

component flow

UEUsability EngineeringThe study of discrepancies between expected

and actual user behavior

VDVisual DesignThe consistent visual treatment of elements

and components

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

PTPrototypingThe functioning composition of proposed

interactive concepts

UX Design Process

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

əˈ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

əˈnalɪsɪsAnalysis

Competitive Analysis• Benchmarking similar products / competitor

əˈ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

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

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

Doodle!

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

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

Screenflow

• Create relationships.

Between pages,

screens, components

dɪˈzʌɪnDesignThe fun part.

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

dɪˈzʌɪnLo-fi wireframes

Tools: UXPin, Balsamiq, Axure, OmniGraffle.

Design

dɪˈzʌɪnDesign

Visual Design

• Communicates the brand, interactivity, workflow, and

relationships

• Consistently apply these styles to every instance of each

element

dɪˈzʌɪnVisual designDesign

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

ˈprəʊtətʌɪPrototyping

• Deliver prototypes of concept models for testing by the

usability engineer.

• Increasing process efficiency

ˈprəʊtətʌɪ

UXPin

Prototyping: Tools

ˈprəʊtətʌɪ

inVision

Prototyping: Tools

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

Prototyping: Tools

ˈprəʊtətʌɪAxure

Prototyping: Tools

dɪˈzʌɪnPrototyping

Tools

• UXPin - uxpin.com

• inVision - invisionapp.com

• Proto.io - proto.io

• Axure - axure.com

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

Making it easier for developer to understand how it works

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

deliver the application / website as designed

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

But this is the easiest way to explain what UX is

Never mind the fact that they use comic sans

Reza PrabowoFull-time Cyclist, part-time UX Designer

behance.net/RezaPrabowo