Workshop for web design, web development, and marketing staff at UC Santa Barbara on user experience (UX) basics. Introduction to UX. Emphasis on the planning through design concepts of UX. Presented 12/17/14 by Melissa Van De Werfhorst, hosted by the UCSB Web Standards Group.

2. MelissaVan DeWerfhorst
893-4301 melissa@engineering.ucsb.edu
@melissavandew
Fair warning: I tweet a lot aboutTV and books

3. THIS PRESENTATION:
What is UX?
Humans use the internet
Concept to design

4. THIS PRESENTATION:
What is UX?
Humans use the internet
Concept to design

5. WHAT IS USER EXPERIENCE?

6. WHAT IS USER EXPERIENCE?
sometimes called
UX Design
Usability
User Interaction
User Interface Design
These are parts of UX.

7. USER EXPERIENCE

9. USER EXPERIENCE
HAPPY
VISITORS
DESIRED
ACTIONS
(this is my ux philosophy)

10. THE HONEYCOMB OF UX

11. Thanks, usability.gov

12. USER EXPERIENCE

13. THESE ARE ALL PRETTY IMPORTANT.
udemy.com

14. BUTTHIS IS MY
FAVORITE
UX PYRAMID

15. WHAT IS USER EXPERIENCE?
http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted

17. WHO IS INVOLVEDWITH UX?
Web designers
Front-end developers
UX/UI developers
Content people
Marketing people
creative+tech+comm

18. WHO IS INVOLVEDWITH UX?
You are.

19. WHY UX?
Big companies = $$$
Conversion is their top priority
Higher education = $
Enrollment and donations

20. WHY UX?
UCSB =
Service to students
Engagement
Student to alumni to donor
Community building
Brand and message
You = ?

21. - Darren Northcott
http://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/
UX = BEHAVIORAL PSYCHOLOGY

22. Karlyn Borysenko – High EdWeb 2014 presentation
http://www.zenworkplace.com/playingpolitics/

23. Karlyn Borysenko – High EdWeb 2014 presentation
http://www.zenworkplace.com/playingpolitics/

27. THIS PRESENTATION:
What is UX?
Humans use the internet
Concept to design

28. HUMANS USETHE INTERNET
http://xkcd.com/773/

29. TheOatmeal.com

30. TheOatmeal.com

31. HUMANS USETHE INTERNET
Think
about people
before you sitemap
or design
or code
or launch
or redesign

32. HUMANS USETHE INTERNET
Research!
Identify your key audiences
Create realistic user personas
Outline behavior flowcharts
Ask people to do card sorting
Choose the research that makes sense
for you and that you have time for

33. HUMANS USETHE INTERNET
Project Stakeholders

34. HUMANS USETHE INTERNET
Project Stakeholders
Their input works best when you collaborate on
BUSINESS GOALS
Defining brand and message
Top priority behaviors
Calls to action
VIP audiences
Results aka lead conversion

35. HUMANS USETHE INTERNET
Project Stakeholders
Their input works best when you collaborate on
BUSINESS GOALS
And then include them at milestones
such as
Proposed website structure
A completed mockup review
Staged site review

36. Screencapped from Robin Smail’s excellent presentation: http://vimeo.com/112074750

37. Screencapped from Robin Smail’s excellent presentation: http://vimeo.com/112074750

38. KNOWYOUR AUDIENCES
Customer Journeys

39. KNOWYOUR AUDIENCES
Customer Journeys
Figure out who your customers
are by identifying key audiences.
Maybe do some personas.
Whatever works for you.

40. THE STUDENT JOURNEY
http://www.oho.com/blog/prospective-undergraduate-student-journey

41. http://www.oho.com/blog/
higher-education-
infographic-student-
lifecycle

43. USER PERSONAS

44. User Persona
(draft) for the
College of
Engineering

45. KNOWYOUR AUDIENCES
Not every UCSB website is concerned
with the student lifecycle.
Knowing your business goals and key
audiences will help you research and
customize your user journeys.

46. http://www.slideshare.net/whitneyhess/diy-ux-higher-ed

47. MULTI-SCREEN UX

48. ACCESSIBILITY STANDARDS
UCSBWeb Standards - Accessibility
http://www.ucsb.edu/webguide/web-accessibility
Lynda.com
Fundamentals of UX: Accessibility
http://www.lynda.com/Web-Accessibility-tutorials/Foundations-UX-
Accessibility/156957-2.html

49. THIS PRESENTATION:
What is UX?
Humans use the internet
Concept to design

50. CONCEPTTO DESIGN
Information Architecture (IA)
Use your audience research to build a
sitemap of pages and functionality
Hint: this also helps with scope of work
for your dev team!

51. IA BASICS: SITEMAP
Draw.io

52. IA BASICS: SITEMAP
Draw.io
Your site will have LOTS of
landing pages
Break pages down intoTiers
andTemplates
Structure is most helpful for
your purposes

53. FUNCTIONALITY MAP
Draw.io
• Navigation within the hierarchy
• Search
• News fields displayed
• Carousels!
• CTA buttons
• Content type
• List of data type or editable
content
• Content manager needs

54. MOST PAGES = ENTRY PAGES

55. http://www.coe.neu.edu/faculty-research/initiatives

56. http://www.coe.neu.edu/academics/undergraduate-studies

57. WIREFRAMING

58. WIREFRAMING
It doesn’t have to be fancy and it will save you some headache.
http://www.slideshare.net/mightybytes/wireframing-basics-ux-and-the-design-process-by-amber-vasquez

59. WIREFRAMING
Forces you to think about the UX
Makes it easier to dive into design
Get the client to sign-off on a wireframe
Developers could get started early
TOOLS
InDesign, Photoshop
Balsamiq, UXPin, etc.
Pen & paper

60. MOCKUPS
Everything changes when someone sees
colors and blocks instead of words and
concepts.
This steps helps the client aka stakeholder
tell you what they want.
But it also helps you visualize your user’s
behaviors.

63. UX DESIGN
http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted

64. UX DESIGN
http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted
Figure out priorities
Desired action + user needs
Remove the friction

65. Recruitment of
graduate students
is obviously the
priority here.
Clear and unconfusing calls to
action for each academic
program
https://education.ucsb.edu/aca
demic-programs

66. Anything I want to
know is here.This
site is about me,
the visitor.
The CTAs are big
red buttons that
are easy to find.
Thanks:
http://clients.mstoner.com/
hew/get_with_the_program
.pdf

67. UX DESIGN
http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted
Make time to improve and
redesign your websites
Always go back to the user
Bring together brain power

68. CONTENT MANAGEMENT
Content Managers are users so UX of
your site’s CMS is particularly relevant
http://tpdsaa.tumblr.com/

69. CONTENT MANAGEMENT
Site sustainability depends on content
Web governance
Workflow
Removing skill barriers
Training

70. CONTENT DEVELOPMENT
Show vs.Tell Rules
Copywriting for quick relaying of
information
Use graphics or images instead of words
when possible
Video use should be strategic and add
value, tailored to the audience

73. http://hugeinc.com/ideas/perspective/everybody-scrolls

74. VALUABLE STUFF NOT
COVEREDTODAY
Branding
Development
UsabilityTesting
A/BTesting
Surveys

75. MOCKUPS

76. MelissaVan DeWerfhorst
(805) 893-4301
melissa@engineering.ucsb.edu
THANKS & HAPPY HOLIDAYS