User Experience (UX) design is such a hot industry today with no shortage of Medium articles telling you how to break into UX. There’s detailed talk about portfolios, which courses to take, and whether designers should learn how to code, among others. What they seem to miss, though, is the ‘getting started’ part: How do you do a design project and ensure that it gets from discovery all the way to deployment? If design portfolios are about the projects that you’ve brought to life, then how do we do them and build them well? In this session, we will be looking at the design process and the Elements of User Experience. We will be reviewing the milestones inside web projects and the activities that make it successful. You will learn what makes great websites great, and what makes designers advocates for their own work. Design is finally having its golden age. Will you be a part of it?

1. Jesse Emmanuel Rosario
@jemrosario
WordPress,
UX Design,
and You

2. every
project kickoff
EVER

3. How do we
do this?!?

4. TODAY’S AGENDA:
What is
User Experience
Design?
How do we use it
to build digital
products that
people love?

5. Jesse James Garrett’s
The Elements of User Experience
is the founding document of
what we currently know as
User Experience Design
(next to Alan Cooper’s
About Face in 1995)

10. 1
Strategy
What do we want
to get out of the site?
What do our users want?
GOAL:
Establish business +
user needs and goals
CONTENT
STRATEGY
USER EXPERIENCE
RESEARCH
content analysis
core strategy
message architecture
content audit
content plan
governance model
stakeholder interviews
personas
competitive analysis
mental models
journey maps
usability testing

11. Applying the STRATEGY plane
Competitive analysis:
Survey previous WCTO sites to see how they were built.
Site purpose + initial content plan:
What is this site about? What could go in there?
Establish success metrics:
Revenue generation? Speaker applications? #1 on Google?

12. 2
Scope
What features will the site
need to include?
GOAL:
Answer “How are we going to
do this project (e.g. features,
requirements, etc.)?”
PROJECT
DISCOVERY
requirements & spec
project timelines
content requirements
interaction models
features
functionality

13. Applying the SCOPE plane
Firm up project’s business framework:
Objectives, KPIs, OKRs, timelines, project team, etc.
Tech specs:
e.g. Domain and hosting, WP security, third-party services, etc.
Content and functionality:
What pages, content, and features must this site have that truly
matter to users?

14. 3
Structure
How will the pieces of the site
fit together and behave?
GOAL:
Site organization
(and interaction)
INFORMATION
ARCHITECTURE
sitemaps
user flows
tags & categories
content models
content placement,
etc.

15. Applying the STRUCTURE plane
Sitemap:
Site sections,
subsections, etc.
Content Organization:
Tags vs. Categories
Pages vs. Posts
Home
About Blog Contact

16. 4
Skeleton
What components will enable
people to use the site?
GOAL:
Make design decisions
(e.g. copy, headings, images,
layout, interface elements,
etc.)
INTERFACE
DESIGN
wireframes
page layouts
information hierarchy
interface controls
interactive prototypes,
etc.

17. Applying the SKELETON plane
SOURCE: wirify.com
wireframes

18. Applying the SKELETON plane
SOURCE: “The Skeptic’s Guide to Low-Fidelity Prototyping” by Laura Busche (Smashing Magazine, 2014)
LOW FIDELITY
(paper sketches,
cutouts, etc.)
HIGH FIDELITY
(super colorful
design mockups)

19. Applying the SKELETON plane

20. 5
Surface
What will the
finished product
look like?
GOAL:
Packaging and presentation
VISUAL
DESIGN
color
layout
typography
imagery
high-fidelity comps
design systems, etc.
Hello world!

21. A very important distinction!
creative problem-solving “make it pretty”
Design
design

22. Take your pick…

23. What Good Visual Design Is…
Good visual design
gives you an
entry point into
the design and
guides your eye
along the elements.

24. Applying the SURFACE plane
What’s involved?
color
layout
typography
imagery (e.g. photos, icons)
design documentation
(e.g. high-fidelity comps,
style tiles, style guides,
pattern libraries, design systems,
etc.)
SOURCE: “Airbnb UI Toolkit-Web” by Derek Bradley (https://dribbble.com/shots/1669299-Airbnb-UI-Toolkit-Web)

25. Applying the SURFACE plane
Decide on the colors, fonts, images, page layouts, etc.:
Document these decisions somewhere (e.g. style tile)
Select the WP theme:
Which theme suits my needs? Free? Premium?
Consider theme customization:
How far can I ‘personalize’ this theme? Child themes?
functions.php? Page builders?

27. User-centered beats being
(solely) business-centered.1

28. y tho

29. “If I’d asked people
what they wanted,
they would have said
faster horses”
- said no one ever

30. FUN FACT:
I was supposed to attend a
“Nudge-a-Thon”, a
Behavioural Economics
Design Challenge, today
at Rotman.
The problem to tackle was
fare evasion.
I saw this comment at the
Event Page yesterday
(September 29, 2017;
2PM).

31. As designers, we strike a balance
between what users want and what
matters to the business.
2

32. Nobody knows the design
problem better than me,
which is why I alone
can fix it.
- some designers
(thanks, but no thanks, 45…)

33. A solid process gives you signposts
to look out for.3

34. THINK OF IT THIS WAY:
What if a marathon
didn’t have any
progress indicators?

35. Mont Ventoux’s
Finish Line
A solid process
suggests that you’re
on a trackable path.
PHOTO FROM http://www.macsadventure.com/eu/tour-2072/road-cycling-mont-ventoux

36. In Conclusion
WHY DO IT:
Drive user-centricity
on top of business
relevance.

37. If you only have to
remember one thing…

38. The best designers are !
process driven, !
not product-driven.
Trust the process.
Design. Decide. Deviate. !
And repeat.
@sarahdoody
www.theuxnotebook.com

39. Thank You!
SLIDES:
http://bit.ly/ux4wordpress
CONNECT:
@jemrosario