Demystifying UX – A toolkit approach to better, cheaper & faster experience design

M. E. Kennedy UX Toolkit 2014

Demystifying

UX

A toolkit approach to

better, cheaper & faster experience

design

Mary E. Kennedy April 2014


Strategic design of Functional,

Intuitive Digital Experiences to be

Persuasive, Educational, Profitable

and Delightful UX Planning:

Adds steps but saves time

Gets better results

WHAT IS UX & WHY DOES IT MATTER?


WHAT DO YOU DO? Human Factors Engineer Information Architect Usability Specialist UX Director UX Architect UX Strategist UX Manager UX Specialist UX Designer UI Designer Content Architect Content Strategist

WHY IS IT SO CONFUSING?


WHY NOT JUST BUILD?

$1 $10 $100

Paper Development

Production

We are going

to make

mistakes – let’s make

them cheap!


COST EFFECTIVENESS OF UX




PERSONAS 5 UX PRINCIPLES TO APPLY TO ALL

DESIGN PROJECTS


PERSONAS KNOW YOUR USER


Higher Ed:

Student

Parent

Faculty

Alumni

Media

Financial Services & Investing:

Potential Customers

Existing Customers

Brokers

Job / Career Seekers

IDENTIFY USER TYPES


Identify the larger needs and user tasks for user types To…

learn about products compare homes purchase a TV search for a hotel download a software trial contact support play a game read recommended articles watch a video share a blog reserve a car

complete transaction…

IDENTIFY USER NEEDS


PERSONAS TOOLKIT: User Types & Tasks


PERSONAS TOOLKIT: User Types & Tasks


• If redesigning a Website, has a content audit been performed?

• What content is needed – what is available vs. new?

• Is any content available?

• Who will create what is needed?

• Who has final say in approving content?

• Will the amount of content writing, editing, approval realistically fit within

project timeline?

• Coupled with analytics, what content should removed, not included?

KNOW YOUR CONTENT

Imagesources: http://upload.wikimedia.org/wikipedia/commons/4/4b/Ames_Free_Library_%28North_Easton%2C_MA%29_-_interior_stacks.JPG http://directory.compostory.org/


AUDIT Tier – Structure within current site

Page Name – Page Title (either name or title if these differ, just be consistent) URL – Full link to use as a reference

Ranking – Pull information from Google Analytics, at least identify top ranked pages (top 50,

100, etc.) Notes - Additional comments that may not have a category (too much content, flash in

use, etc.)

Errors – Note any errors, dead links, etc.

DETAILED SITEMAP Tier – Structure within current site

Page Name – Page Title (either name or title if these differ, just be consistent) Old URL– Copy reference URL from existing site

Wireframe – Does a wireframe exist for the page for reference? Note the page

Template – If templates are being used, (common with a CMS) note the template name Content Assignment - Who will write / rewrite content

Content Status - Not started, complete, etc.

Editor Assignment – Who will edit the final content Editor Status - Not started, complete, etc.

QA Assignment – Who will test

QA Status - Not started, complete, etc.

Toolkit – Content Audit and Detailed Sitemap


Toolkit – Content Audit and Detailed Sitemap

AUDIT

DETAILED SITEMAP


DESIGN YOUR EXPERIENCE

WORKFLOWS NAVIGATION WIREFRAMES


• User tasks -> workflows • Identify user messaging needs • Workflow tool / pen & paper / Whiteboard &Camera • Flow start to finish for specific complex task • Complex = Generally more than 3 steps

SKETCH WORKFLOWS

An extra task, but workflows save more time than perhaps any

other design tool in development & prevent

REDEVELOPMENT!


Single main navigation menu

• Consistent • Obvious • Avoid single button mega navigation • Terms obvious, simple, unique • User location is clear • Functional in all resolutions & browsers • Generic terms (“tools”, “resources”) avoided

DESIGN NAVIGATION







Wireframes should be thought of as electronic whiteboards:

• Help with conversation about design • Very rapid creation • High rate of change

WIREFRAME


While much of responsive design happens and is adjusted in design, always identify and plan ahead for:

• Navigation • Forms

These two structural items are impacted more by mobile than any other items

DEVICE ACCESSIBLE


• Don’t go it alone - recruit testers • Test early – the more complex, the earlier the test • Ask testers to complete most common tasks • Attitude – This is your time to FAIL!! • A site should never “Pass” a usability test • Let testers make mistakes, surprise you, never coach • Test navigation, forms and all transactions on all

devices / resolutions • Make Changes – test again!

TEST DESIGN ASSUMPTIONS

PSST! Testing

is cheap and

fast!! Pass it

on!


• What are top pages? • What are top events / actions? • How long per page? • What content is not being viewed?

• A/B Test / Validate New Content • Where do users come from? Cater new content to them • What devices are most popular?

• Use analytics to prove / disprove your design hunches and inform full design for better engagement & conversion

CONTINUALLY VALIDATE

55% Mobile

40% Tablet

15% Desktop

Referrals:

Google

Twitter

Facebook

reddit…

CONVERSIONS

Top Events:

Report

PDF

Free Trial


TESTING Usabilla – www.usabilla.com

Usability Testing (pre or post launch

Ethnio – www.ethn.io/

Online Usability Recruiting Tool (pre or post

launch)

Five Second Test – www.fivesecondtest.com/

Community based superfast, simple feedback

(pre or post launch)

Google Content Experiments -

https://support.google.com/analytics/answer/17

45147

A/B Testing tied to Google Analytics (post

launch)

ANALYTICS Google Analytics – www.google.com/analytics/

Website traffic, origin and behavior analysis

Crazy Egg – www.crazyegg.com/

Heat map and scroll reports, behavior analysis

RESOURCES

$$

$$

WIREFRAME Mockflow – www.mockflow.com/

Desktop Based template driven tool with

community contributions

Balsamiq – www.balsamiq.com/

Template based, sketchy format wireframe tool

Axure – www.axure.com/

Template based wireframe tool, prototype output

Visio, Omnigraffle – Open wireframe / drawing

tools, (not template based) offer simple click

through via hotspot linking

WORKFLOWS Visio / Omigraffle / Pen, Paper / Whiteboard &

Camera

TOOLKIT Toolkit Brief– https://uxblueprint.box.com/s/zfp9ydvodtnaqwpzp7et

Use it, update it, tear it apart – but share your

comments please!

Connect or email: linkedin.com/in/kennedyme [email protected]

$$

$$

usabilla.com

http://www.usabilla.com/

http://www.ethn.io/

http://fivesecondtest.com/

http://www.fivesecondtest.com/




http://www.google.com/analytics/



http://www.crazyegg.com/



http://www.mockflow.com/

http://www.balsamiq.com/

http://www.axure.com/

https://uxblueprint.box.com/s/zfp9ydvodtnaqwpzp7et

https://uxblueprint.box.com/s/zfp9ydvodtnaqwpzp7et

http://www.linkedin.com/in/kennedyme

http://www.linkedin.com/in/kennedyme


AM+A, Return on Investment for Usable User-Interface Design: Examples and

Statistics, 2002

Barker, D. T. (2000). Cost benefits of usability engineering. Retrieved

October 9, 2001 from www.interfacearchitecture.net/articles/benefits.htm

Bias, R. G & Mayhew, D. J., (Eds.) 1994. Cost Justifying usability. San

Francisco: Morgan Kauffman Publishers.

REFERENCE


THANK YOU!!

Date post:	22-Nov-2014
Category:	Technology
Upload:	dtremonte
View:	207 times
Download:	1 times

Demystifying UX – A toolkit approach to better, cheaper & faster experience design

Technology