Ain't no backseat driver

Management & Technology

Ain’t no backseat driver!A tale about user-centred design, storyboards and prototyping

M tth H dMatthew HodgsonACT Regional-lead, Web and Information ManagementSMS Management & TechnologySMS Management & Technology

3 June 2008

Systems for expertsSystems for experts

“It’s time we face reality, my friends …We’re not exactly rocket scientists”

What about systems for these people?What about systems for these people?

Web 2.0 designed‐systems for ‘normal’ peopleWeb 2.0 designed systems for  normal  people

Systems ‘we’ buildSystems  we  build

A i d b hAs envisaged by the Business Owner

As specified in the requirements

As designed by the Senior Analyst

What the UserAs finally As produced by 

actually neededimplementedthe Developers

Our projects and processes …Our projects and processes …

… squeeze out the design phase… squeeze out the design phase

Leaving users til last has a high costLeaving users til last has a high cost

How can we capture the intent of the system?How can we capture the intent of the system?

User‐centred design!User centred design!

User‐centred designUser centred design

Engages users:Engages users:• From the beginning to the end of a project

Understands:• How users want to use the system• How users think about their workHow users think about their work

Identifies:Identifies:• Needs and wants• Interaction preferences

ISO:13407 Human‐centred design fprocesses for interactive systems

User‐centred design frameworksUser centred design frameworks

Source: Jessee James Garrett: www.jjg.net/ia

How do we ‘do’ user centred design?How do we  do  user‐centred design?

a look at how other disciplines …a look at how other disciplines employ this philosophyemploy this philosophy…

http://www.youtube.com/watch?v=t3mAHQuBqQI

StoryboardingStoryboarding

Movie Directors use storyboarding to:Movie Directors use storyboarding to:

• Plan the movie as early as possible• Put themselves into the shoes of the audience• Put themselves into the shoes of the audience• Make the movie better for the audience• Conceive of the movie early

Id tif fl i th l t• Identify flaws in the plot• Work out difficult conceptsWork out difficult concepts• Save time and money

Using storyboarding in our projectsUsing storyboarding in our projects

Helps us understand: Helps us understand: • User’s wants and needs• User-interaction preferences

Clarify:y• Business processes

Identify:Identify:• Flaws in business & system logic• Points for system support

Storyboarding @ IA Summit 08, MiamiStoryboarding @ IA Summit 08, Miami

Storyboards with process maps, use‐cases and irequirements

storyboards

use case reference

user experience

business processuser-profiles

(actors) system objectsrequirements lists

Storyboarding (cont.)Storyboarding (cont.)

Benefits:Benefits:• Light-weight – use at a minutes notice• Low cost – just grab pen & paper• User buy-in for change managementUser buy in for change management• Gets users involved

S• Sets users’ expectations• Increases users’ understanding of the systemIncreases users understanding of the system

Di d tDisadvantages:• Need to be able draw to convey the concept ☺Need to be able draw to convey the concept ☺

Other tools for user‐centred design?Other tools for user centred design?

‘Previz’ - prototyping the solution• http://www.youtube.com/watch?v=zMgoIwA_oQM

What does prototyping systems involve?What does prototyping systems involve?

Emphasise: Emphasise: • User involvement – they’re the ones going to use

the system!the system!

Improve:• Design concepts in rapid iterationsDesign concepts in rapid iterations

R fiRefine:• User interactions (UXD)User interactions (UXD)• Information design

N i ti d l• Navigation model

Evolution through iteration with usersEvolution through iteration with users

Why use prototyping?Why use prototyping?Benefits

E l d i l ti• Evolve design solution• Involves users – sets expectations, increases understanding• Conceptual or detailed• Communicate intent of system to developers• Find problems in system interactions early• Solve information architecture problems early• Cheaper than building the system

Disadvantages• Need good software – Axure (www.axure.com)g ( )• It’s more than just screens! – need an IA to help with the tricky

bits

‘Conceptual’ design in project methodologyConceptual  design in project methodology

Case study:User‐centred design in action!

Case studyCase study

Client:Client:• Large government agency• Business critical system redevelopment• Business-critical system redevelopment• Included business process improvement

Problem:Problem:• Silos’ expectations to manage• No documented processes• No documented processes• “I don’t know what I want, but I’ll know it when I see it”• Vendor suffered from ‘the dreaded analysis spiral’!

The dreaded analysis spiralThe dreaded analysis spiral

NewNew Information

Analysis Storyboardpossibilities

Understand UsersWants & Needs

Prototype

Design

interactions

Design& Document

solution

Refineconcepts

Solution• Adopt a user centred • Adopt a user-centred

design approach• Reinforce role clarity

Build• Reinforce role clarity

Understand your users thru PersonasUnderstand your users thru Personas

Storyboard possibilitiesStoryboard possibilities

Prototype users’ system interactionsPrototype users  system interactions

OutcomesOutcomesIncreased user-acceptance of change:• Created a single vision of what we were doing• Helped managed expectationsHelped managed expectations• Wider understanding of everyone’s needs

Better system adoption:y p• User-involvement meant system was ‘designed’ for them to

useuse

S d tiSaved time:• Kept us on-track and the vendor less distractedp• Worked through difficult concepts before development

ConclusionsConclusions

User‐centred designUser centred design

Benefits:Benefits:• Improved vision – we can all see up front where we’re going

I d h t bilit• Improved change management capability• Visible iterations – no hidden end-game solution• Best-practice agile environment methodology

Disadvantages:• More up-front analysis required• Role definition – requires good communicationRole definition requires good communication• Power-shift to front-end of project

S d l d ’t lik b i l t• Some developers don’t like being last

The goalThe goal

As envisaged by the business 

owner

As specified in the project request

As designed by the senior analyst

THE SWEET SPOT

What the userAs finallyAs produced by 

What the user actually needed

As finally implemented

the programmers

Management & Technology

FinFinQuestions?Q

Management & Technology

Ain’t no backseat driver!Ain t no backseat driver!

A tale about user-centred design, g ,storyboards and prototyping

Management & Technology

Matthew HodgsonACT Regional-lead, Web and Information Management

SMS Management & Technology

Blog: magia3e.wordpress.comTwitter: magia3eTwitter: magia3e

Slideshare: www.slideshare.net/magia3e

Email: mhodgson@smsmt.comg @Mobile: 0404 006695