managing change with prototyping

Managing Change with Prototyping

GEORGE ABRAHAM, Ph.DProduct Design Manager for Indigo Studio

Twitter @jabbersga / gabraham@infragistics.com

Change is unavoidable!whether you like it or not

Users have changed UI patterns changed Business has changed!Yours is not the only system

in the market! Competition is nipping at your heels.

Touch is not the only Interaction pattern that has changed. Desktop apps have also

evolved!

Some digital/physical products have moved on to become web

enabled services.

OverviewWhy Prototype?

How to Prototype?

Prototyping for large-ish applications with custom UI librariesIndigodesigned.com

Prototyping basics for Indigo Studio

Change is unavoidable!whether you like it or not

Users have changed

UI patterns changed

Business has changed!Yours is not the only

system in the market! Competition is nipping at

your heels!

Touch is not the only Interaction pattern that has

changed. Desktop apps have also evolved!

Some digital/physical products have moved on to

become web enabled services.

Software is not something you take to an Antiques Roadshow.

www.pbs.org/wgbh/roadshow/

Why Prototype?

It’s UX season!Do you “speak” user experience?

What users can give actionable feedback on is a small piece ( by evaluating prototypes)

Your UX processYour Annotated WireframesYour design rationaleYour PersonasYour Scenariosand so on…

Users Don’t Care About …

Why Prototype?

Shared Learningnot deliverables

Why Prototype?

Shared Learning with UsersNot deliverables

Images from https://ubuntu.mybalsamiq.com/projects/ubuntuphonecoreapps

Delivering wireframes is NOT the goal of a good design process.

Annotated wireframes is complex enough for the team, let alone the user.

Only serves as one of many ways to start a design conversation. Not with users

Why Prototype?

Evaluate Experience for AdoptionWITH USERS, IN USE, IN CONTEXT

LESS OF

THIS

MORE OF

THIS!

Stop “presenting” your design. Start “evaluating” it with users.

Observations gathered by evaluating with users is more actionable and relevant to design iteration

If the context is a device, try to evaluate it on a device

Why Prototype?

Trying it Out - Finding Outwith users, in use, in context

Evaluate in Use,

with Users, in the right

context.

New Insights/Le

arnings

NEED MOREINFORMATIO

N?

Trying it out

On your own

Idea/Question

Why Prototype?

OverviewWhy Prototype?

How to Prototype?

Prototyping for large-ish applications with custom UI librariesIndigodesigned.com

Prototyping basics for Indigo Studio

To evaluate an idea with participation from intended users

Prototyping the Experienceand not the application

Prototype only what’s needed to evaluate the experience

Think of experience as stories-of- use or user-flow, and not page design

Prioritize and start prototyping the most valuable story or riskiest assumptions first. Go Lean.

Spend couple of hours to couple of days prototyping for the story. Taking longer? Something is amiss.

Application

Stories/Flow

How to prototype?

Prototyping the Experience1. Plan for user flows, and not screens

How to prototype?

Prototyping Stories-of-Use“What does the user do… then what happens?”

AND THEN?AND

THEN?

How to prototype?

User flow for Withdraw transaction (ATM)

User Interaction (e.g., Tap)

Prototyping the Experience2. Enough content fidelity to make a decision, not Lorel Ipsum

$ x,xxx.xx

$ x,xxx.xx

How to prototype?

Prototyping the Experience3. Consistent style for user action buttons/links

white space or

negative space!

How to prototype?

OverviewWhy Prototype?

How to Prototype?

Prototyping for large-ish applications with custom UI librariesIndigodesigned.com

Prototyping basics for Indigo Studio

To evaluate an idea with participation from intended users

Goal-driven task/user flows; relevant content; consistent affordance and style for interaction

Prototyping with Indigo Studio

STORY-OF-USEPrototyping Video

Start state Tapped all other transactions

Tapped get cash Tapped checking account

User flow for Withdraw transaction (ATM)How to prototype with Indigo Studio?

Start state Tapped all other transactions

Tapped get cash Tapped checking account

User flow for Withdraw transaction \ Get Cash interactionHow to prototype with Indigo Studio?

Design UI changes

2. edit

1. move

editedit

1. Draw the UI 3. Create a new state

Ix. (Tap)

How to prototype in Indigo Studio?

And make UI changes

Get cash

2. Add InteractionTaps “get cash”Change this screen

taps1. move

editedit

2. edit

Get Cash0ms 300ms 600ms

moveresize

Deposit remove

Timeline area always keeps track of changes you are making in the new state.

Design UI changesHow to prototype in Indigo Studio?

Timeline >

OverviewWhy Prototype?

How to Prototype?

Prototyping for large-ish applications with custom UI librariesIndigodesigned.com

Prototyping basics for Indigo Studio

To evaluate an idea with participation from intended users

Goal-driven task/user flows relevant content consistent style for interactive UI elements

Draw the starting UI for user flow add interaction to create a new state make necessary UI changes

Enterprise UI libraryOur UI Elements Your Screenparts

UI Elements for Desktop/Mobile

Create & Reuse custom UI Elements

Storyboard

Screen

Screenpart

Capturing Stories

Drawing User Interfaces

Reusable/Custom UI Elements

Using screenparts

Video tutorial

Video tutorial

Video TutorialHelp topic on adding interactions

Help topic on screenparts

OverviewWhy Prototype?

How to Prototype?

Prototyping for large-ish applications with custom UI librariesIndigodesigned.com

Prototyping basics for Indigo Studio

To evaluate an idea with participation from intended users

Goal-driven task/user flows relevant content consistent style for interactive UI elements

Draw the starting UI for user flow add interaction to create a new state make necessary UI changes

Standardize UI components by styling and converting them to screenparts, and reuse

Visit indigodesigned.com

Manage your shares on any device

Organize and curate your designs using collections & Tags

A dashboard for your prototypes

Browse and download designs contributed by the indigodesigned community

OverviewWhy Prototype?

How to Prototype?

Prototyping for large-ish applications with custom UI librariesIndigodesigned.com

Prototyping basics for Indigo Studio

To evaluate an idea with participation from intended users

Goal-driven task/user flows relevant content consistent style for interactive UI elements

Draw the starting UI for user flow add interaction to create a new state make necessary UI changes

Standardize UI components by styling and converting them to screenparts, and reuse

Browse and download prototypes and re-usable UI libraries

Prototyping Stories-of-Usedrawing + adding interactions + animation

View Prototypes

Keeping it lean w/ Indigo Studio

@indigodesignedFOLLOW US

www.infragistics.com/products/indigo-studioDOWNLOAD 30-DAY TRAIL

Indigostudio.uservoice.comNEW IDEAS?