It doesn’t really matter how great you think your website is if your intended user thinks it’s a loser. There are some very easy methods to getting your website headed down the right track and creating a positive user experience (UX) for your target audience. In this presentation I discuss the steps that lead up to a the launch or re-launch of your website from a down-to-earth UX perspective. Each site is different, so while there are fundamentals there is also a strong need for critical thinking and creative solutions.

1. Turning that UX
frown upside-down
Saturday, October 2, 2010

2. #uxfrown
@hellofisher
Saturday, October 2, 2010

3. Hello. I’m a
UX designer
Saturday, October 2, 2010

4. A Drupal
designer?
Saturday, October 2, 2010

5. a
simple
answer
Saturday, October 2, 2010

6. a
simple
answer
Saturday, October 2, 2010

7. So what is
UX design?
Saturday, October 2, 2010

8. The creation,
integration and
harmonization of
all user-facing
aspects within an
organization or
project, with the
goal of impacting
perceptions and
behavior.
Saturday, October 2, 2010

9. The creation,
integration and
Make it harmonization of
make sense all user-facing
aspects within an
and work well organization or
for the site project, with the
users goal of impacting
perceptions and
behavior.
Saturday, October 2, 2010

10. Why bother?
Saturday, October 2, 2010

11. Any project should
have goals but most
people seem to lose
sight of who the
audience is.
Saturday, October 2, 2010

12. Even a little
bit of time spent
getting to know
your users will
improve the overall
experience
Saturday, October 2, 2010

13. Saturday, October 2, 2010

14. Saturday, October 2, 2010

15. Saturday, October 2, 2010

16. Saturday, October 2, 2010

17. Saturday, October 2, 2010

18. Saturday, October 2, 2010

19. Saturday, October 2, 2010

20. Saturday, October 2, 2010

21. Saturday, October 2, 2010

22. Ok. You’ve doing
user research and
testing. How long
do you really stick
with it?
Saturday, October 2, 2010

23. If you have
a group of 10
and the first
3 people tell you
the same thing is
broken it’s
broken.
Saturday, October 2, 2010

24. If you have
a group of 10
and the first
3 people tell you Fix it now.
the same thing is
broken it’s
broken.
Saturday, October 2, 2010

25. Don’t make me
talk to the hand!
Saturday, October 2, 2010

26. Don’t make me
talk to the hand!
Saturday, October 2, 2010

27. If your site isn’t
cute.com, don’t get cute
use conventions
Saturday, October 2, 2010

28. Make it obvious
Saturday, October 2, 2010

29. People get lost at
any turn. Too many
choices, bad
directions and noise
create a bad
situation.
Saturday, October 2, 2010

30. People get lost at
any turn. Too many
choices, bad
directions and noise
create a bad
situation.
Saturday, October 2, 2010

31. What might be
obvious to you isn’t
obvious to someone
who is new to the
website.
Saturday, October 2, 2010

32. Saturday, October 2, 2010

33. Web Conventions
Saturday, October 2, 2010

34. As a rule
conventions only
become conventions
if they work. Use
them. They are your
friends!
Saturday, October 2, 2010

35. All conventions start
life as somebody’s
bright idea.
(Steve Krug - Don’t Make Me Think)
Saturday, October 2, 2010

36. Saturday, October 2, 2010

37. Saturday, October 2, 2010

38. Saturday, October 2, 2010

39. Saturday, October 2, 2010

40. Saturday, October 2, 2010

41. Saturday, October 2, 2010

42. Saturday, October 2, 2010

43. Saturday, October 2, 2010

44. Oops
Saturday, October 2, 2010

45. Saturday, October 2, 2010

46. Saturday, October 2, 2010

47. Saturday, October 2, 2010

48. Saturday, October 2, 2010

49. Problem Solving
Saturday, October 2, 2010

50. Sample
Prooocess
Saturday, October 2, 2010

51. Sample
Prooocess
Saturday, October 2, 2010

52. Sample
Prooocess
Saturday, October 2, 2010

53. Define
Saturday, October 2, 2010

54. 1. Identify the type of site
1. Branding, marketing, content source,
task-based...
2. Determine the team make-up required
3. Discover and understand the client and
industry culture
4. Define the project objectives
5. Understand the current state (Heuristic
Analysis)
6. Gather ideas from stakeholders
7. CONTENT STRATEGY!!!
Saturday, October 2, 2010

55. Research
Saturday, October 2, 2010

56. 1. User Research (internal and external)
1. Define user groups
2. Choose research techniques (what will
the project's budget allow)
2. Personas
1. Really this could be just a short, visual
reminder or representation for the
people working on the project of the
user groups. I like to have something in
front of me that helps me keep my focus
user-centric.
Saturday, October 2, 2010

57. Visioning
Saturday, October 2, 2010

58. 1. Envision features
1. This will allow us to flesh things out
and see what it will take to build before
to prioritizing
2. Prioritize requirements
Saturday, October 2, 2010

59. Wireframe
and Design
Saturday, October 2, 2010

60. 1. Task flows
2. Wireframes and annotations (function)
1. Basic/draft wireframes
2. Filled out wireframes
3. Prototyping - functionality testing with
users.
4. UI Graphic Design
1. Design testing
5. UI Design revisions
1. Design testing
6. Style guide documentation
Saturday, October 2, 2010

61. Saturday, October 2, 2010

62. Saturday, October 2, 2010

63. Saturday, October 2, 2010

64. Saturday, October 2, 2010

65. Saturday, October 2, 2010

66. Saturday, October 2, 2010

67. 1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS
1.2
CONTACT US
1.1 LOGO
1.3
1. CPM
Homepage - alt
1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT
Components
1.0 Utility nav bar to separate nav
elements that take you offsite to
another CPM website.
1.1 Logo used as link to home and
below utility nav bar to give the FEATURE
CPM site a clear separation from
the other site nav. 2.0 INFO INFO INFO 4.0
ITEM
GRAPHIC GRAPHIC GRAPHIC
1.2 Global links to common actions.
1.3 Site search. Separated from utility
nav to indicate that it will only
search the current site.
5.1
1.4 Primary nav bar (see next LATEST PRESS OTHER LIST
wireframe for functionality). 5.0 5.3
Defogging the Defogging the
2.0 Info graphics linked to related Economic Crisis Economic Crisis
stories. This is done manually. 03.22.10 03.22.10
3.0
3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio
just for the homepage and
Presents... Global Presents... Global
overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national
needed.
Activism Expo 2010 Activism Expo 2010
initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10
4.0 Feature item area. This could be
Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the
action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis
Eight, both in 1998. 03.22.10 03.22.10
5.0 Latest press area shows the last 5.2
three press items in reverse
cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists...
done postgraduate work at the University of Toronto in Middle English literature at U of
5.1 RSS feed link for press items.
T’s Medieval Centre.
5.2 Link to view a listing of all press
items. Under his leadership, Chicago Public Radio has developed its most significant national
initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T
5.3 Additional list. This list would 6.0
Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
have identical functionality to
the Latest Press list. Public Radio in Washington, D.C. in 1998.
SERVICES
6.1
6.0 Graphic Representing non-
Torey has an M.A. and B.A. in English Literature from Arizona State University and has
content related services. This Teaser text on the non-content related services
graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of
that CPM offers. Studios spaces, mobile
page for the services. This will T’s Medieval Centre.
also be found in the overall IA.
application, training, and community room.
6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3
related services. The text itself
can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final
items.
call to action for the site. A final call to
f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ
action for the site.
7.0 Listing of social network pages.
Follow us on Twitter ▪ :VOCALO ▪ Site Map
7.1 Listing of related websites.
See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO
7.2 General 2, 2010
Saturday, October site info. ▪ SOUND OPINIONS

68. 1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS
1.2
CONTACT US
1.1 LOGO
1.3
1. CPM
Homepage - alt
1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT
Components
1.0 Utility nav bar to separate nav
elements that take you offsite to
another CPM website.
1.1 Logo used as link to home and
below utility nav bar to give the FEATURE
CPM site a clear separation from
the other site nav. 2.0 INFO INFO INFO 4.0
ITEM
GRAPHIC GRAPHIC GRAPHIC
1.2 Global links to common actions.
1.3 Site search. Separated from utility
nav to indicate that it will only
search the current site.
5.1
1.4 Primary nav bar (see next LATEST PRESS OTHER LIST
wireframe for functionality). 5.0 5.3
Defogging the Defogging the
2.0 Info graphics linked to related Economic Crisis Economic Crisis
stories. This is done manually. 03.22.10 03.22.10
3.0
3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio
just for the homepage and
Presents... Global Presents... Global
overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national
needed.
Activism Expo 2010 Activism Expo 2010
initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10
4.0 Feature item area. This could be
Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the
action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis
Eight, both in 1998. 03.22.10 03.22.10
5.0 Latest press area shows the last 5.2
three press items in reverse
cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists...
done postgraduate work at the University of Toronto in Middle English literature at U of
5.1 RSS feed link for press items.
T’s Medieval Centre.
5.2 Link to view a listing of all press
items. Under his leadership, Chicago Public Radio has developed its most significant national
initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T
5.3 Additional list. This list would 6.0
Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
have identical functionality to
the Latest Press list. Public Radio in Washington, D.C. in 1998.
SERVICES
6.1
6.0 Graphic Representing non-
Torey has an M.A. and B.A. in English Literature from Arizona State University and has
content related services. This Teaser text on the non-content related services
graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of
that CPM offers. Studios spaces, mobile
page for the services. This will T’s Medieval Centre.
also be found in the overall IA.
application, training, and community room.
6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3
related services. The text itself
can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final
items.
call to action for the site. A final call to
f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ
action for the site.
7.0 Listing of social network pages.
Follow us on Twitter ▪ :VOCALO ▪ Site Map
7.1 Listing of related websites.
See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO
7.2 General 2, 2010
Saturday, October site info. ▪ SOUND OPINIONS

69. 1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS
1.2
CONTACT US
1.1 LOGO
1.3
1. CPM
Homepage - alt
1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT
Components
1.0 Utility nav bar to separate nav
elements that take you offsite to
another CPM website.
1.1 Logo used as link to home and
below utility nav bar to give the FEATURE
CPM site a clear separation from
the other site nav. 2.0 INFO INFO INFO 4.0
ITEM
GRAPHIC GRAPHIC GRAPHIC
1.2 Global links to common actions.
1.3 Site search. Separated from utility
nav to indicate that it will only
search the current site.
5.1
1.4 Primary nav bar (see next LATEST PRESS OTHER LIST
wireframe for functionality). 5.0 5.3
Defogging the Defogging the
2.0 Info graphics linked to related Economic Crisis Economic Crisis
stories. This is done manually. 03.22.10 03.22.10
3.0
3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio
just for the homepage and
Presents... Global Presents... Global
overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national
needed.
Activism Expo 2010 Activism Expo 2010
initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10
4.0 Feature item area. This could be
Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the
action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis
Eight, both in 1998. 03.22.10 03.22.10
5.0 Latest press area shows the last 5.2
three press items in reverse
cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists...
done postgraduate work at the University of Toronto in Middle English literature at U of
5.1 RSS feed link for press items.
T’s Medieval Centre.
5.2 Link to view a listing of all press
items. Under his leadership, Chicago Public Radio has developed its most significant national
initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T
5.3 Additional list. This list would 6.0
Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
have identical functionality to
the Latest Press list. Public Radio in Washington, D.C. in 1998.
SERVICES
6.1
6.0 Graphic Representing non-
Torey has an M.A. and B.A. in English Literature from Arizona State University and has
content related services. This Teaser text on the non-content related services
graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of
that CPM offers. Studios spaces, mobile
page for the services. This will T’s Medieval Centre.
also be found in the overall IA.
application, training, and community room.
6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3
related services. The text itself
can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final
items.
call to action for the site. A final call to
f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ
action for the site.
7.0 Listing of social network pages.
Follow us on Twitter ▪ :VOCALO ▪ Site Map
7.1 Listing of related websites.
See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO
7.2 General 2, 2010
Saturday, October site info. ▪ SOUND OPINIONS

70. All the other stuff
Saturday, October 2, 2010

71. 1. Build...
2. User testing
3. QA (internal and with client)
4. It never ends!
Saturday, October 2, 2010

72. delicious.com/
hellosteve/
ux
Saturday, October 2, 2010

73. Find me at
hellofisher.com
Saturday, October 2, 2010