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

PERSONAS5 UX PRINCIPLES TO APPLY TO ALL
DESIGN PROJECTS

PERSONASKNOW 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

PERSONASTOOLKIT: 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.JPGhttp://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
Kennedymek@yahoo.com
$$
$$

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!!

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à Demystifying UX – A toolkit approach to better, cheaper & faster experience design (20)

Plus de Harvard Web Working Group

Plus de Harvard Web Working Group (20)

Dernier

Dernier (20)

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