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