WITH A FOCUS ON TOOLING FOR FA'S

      The goal of UX design in business is to
    Improve customer satisfaction and loyalty
through the utility, ease of use, and pleasure provided
          in the interaction with a product.

"

"

WHAT IS USER EXPERIENCE DESIGN ?

But what does it mean...

    UXD is a methodology we apply to make sure an   
    application is easy, efficient, enjoyable,... to use.

    This is achieved by giving the real enduser a central part in our play.

    It is a total experience.
    We eliminate friction between user and technology.

"

"

WHAT IS USER EXPERIENCE DESIGN ?

USER EXPERIENCE DESIGN DEFINED

BUT WHY ?

GUESS WHAT...

USER EXPERIENCE DESIGN PROCESS

USER-, TASK- AND CONTEXTANALYSIS

USER EXPERIENCE DESIGN CREATION PHASE

USER EXPERIENCE DESIGN FRAMEWORK

UXD FRAMEWORK

IMPLEMENTATION

ITERATIONS

TEAM

FINAL PRODUCT

RESEARCH

CREATIVE PROCESS

TESTING FEEDBACK

User analysis
Task- & goal analysis
Context analysis

Wireframing
Low- & high fidelity mockups
Prototyping

Usability
Likeability, accessibility
Cross-platform, docs

YOU CAN USE AN ERASER ON THE DRAFTING TABLE,

OR A SLEDGE HAMMER ON THE CONSTRUCTION SITE.

that's what FRANK LLOYD WRIGHT said

TOOLING FOR WIREFRAMING & PROTOTYPING

PAPER & PENCIL

USE

ALTERNATIVE

COMPLEXITY

ADD-ONS

Capture ideas. Do it early and often. Don't skip this!

Draw basic components, document on the side

Whiteboard

Everybody can do this, easy on the colours

TOOLING FOR WIREFRAMING & PROTOTYPING

Regular paper, big size and markers

ADOBE INDESIGN

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

For drawing navigationstructures

After analysis phase, to visualize application boundaries

MS Visio (most likely you have this installed)

Choose a tool you know, you could use an UML-diagram

Anything you can draw with will do

TOOLING FOR WIREFRAMING & PROTOTYPING

Design- & desktop-publising tool

ADOBE PHOTOSHOP

High fidelity mockups. Pixel perfect representations of a

specific situation or modus

Steep learning curve due to possibilities. Not so difficult if you

focus on the basics. Otherwise, ask designer

TOOLING FOR WIREFRAMING & PROTOTYPING

Photo- and image-editing software

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

BALSAMIQ

Use Balsamiq if collaboration with collegues is important
Use Pencil (next slide) if you need standalone / more libraries

Relatively easy to use. Simple components

Work close together wit collegues and share with your client

At Realdolmen we use the webapp

Ask me for an account, and login at:

https://www.mybalsamiq.com/login

TOOLING FOR WIREFRAMING & PROTOTYPING

A wireframing and mock up tool with a high focus on usability

Refine your paper wireframes in an online tool. Very basic,
but gives a more clear view on components / structure / layout

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

PENCIL PROJECT

If online collaboration is important, use Balsamiq

or create prototype in Invision

Easy to use, with a significant amount of options.

Might run a bit slow with multiple complex mockups

TOOLING FOR WIREFRAMING & PROTOTYPING

An open-source GUI prototyping tool that's available for ALL platforms

Create your wireframes for use in your analysis or user stories

Communicate your ideas and explain interactions

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

HTML5

If other than web, use a throw-away prototyping tool like Invision

or UXPin-alternatives. HTML5's potential to be recycled is valuable

Static WYSIWYG HTML-editors are fairly easy to use

Basic HTML-understanding helps / think about structures / RWD

A wide variety available free/paying, use a framework

TOOLING FOR WIREFRAMING & PROTOTYPING

Hypertext markup language, used for structuring and presenting content

For interactive prototypes. All interactions are real, under

lifelike conditions. A fine line between prototyping & frontend development

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

INVISION APP

Lots of alternatives availble online, take a pick

Invision is free for 1 project at a time

If project is for webapp, go for HTML5-prototype

After creating images in other tool, adding interaction is easy. 

Extensive collaboration possible, ideal for testing on actual devices

Create your account at:

https://www.invisionapp.com

TOOLING FOR WIREFRAMING & PROTOTYPING

A leading prototyping, collaboration & workflow platform

Add interaction to static mockups. Ideal for prototyping

static image flow (low- & high fidelity). 

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

UX PIN

Variety of tools, ending with pure development tools
Well known is Axure, but Adobe XD (eXperience Design) is in beta...

Just like Photoshop, tools with lots of features

It takes an effort to learn, but an advantage in your project

Only temp. free accounts

TOOLING FOR WIREFRAMING & PROTOTYPING

Everything you ever wanted in a UX Design Platform

For building interactive prototypes, with different levels of

fidelity. Still throw away...

USE

ALTERNATIVE

COMPLEXITY

DOWNLOADS

TOOLING COMBINATIONS

ONLY WIREFRAMING

Not likely, but possible if integrated in sprints

in scrum-project

LOW FIDELITY MOCKUPS

With navigation structure

as a part of functional analysis, user stories,

uxd-document

LOW FIDELITY PROTOTYPE

With navigation structure

mockups part of functional analysis, user stories,

uxd-document, interaction in prototype

HIGH FIDELITY MOCKUPS

Attach to navigation structure

limited amount of screens, describe interaction

Use in styleguide

HIGH FIDELITY PROTOTYPE

Interaction with gestures possible

Attention; time consuming. It remains a throw away prototype

Lifelike experience

LOW/HIGH FIDELITY PROTOTYPE

Possibility to recycle prototype for development

Highly accurate interaction up front in project

Ideal for styleguide documentation

ALL IN PROTOTYPING TOOLS

Potential time consuming for building

Good support for platformbased interaction (guidelines)

Rather expensive if few projects

JUST SO YOU KNOW...

DOES IT BETTER” will always beat “DID IT FIRST.

"

"

Aaron Levie, CEO at Box

WHAT'S NEXT ?

UXD OFFERING

THANK YOU

Contact me for anything UXD

Presentations, training,

but most of all projects ;-)

hendrik.mondelaers@realdolmen.com

HENDRIK  MONDELAERS

Made with Slides.com