Slide 1
Slide 1 text
Crafting an Online User
Experience that Works.
WORDCAMP CINCINNATI 2017
KATE MOCK 11/11 11AM :)
Slide 2
Slide 2 text
1. What is user experience (UX)?
2. Process
4. WordPress admin
5. Tips to improve your UX
OVERVIEW
3. Why UX is important
Slide 3
Slide 3 text
Think about the last
time you ordered
something online.
Slide 4
Slide 4 text
User Experience
CONTRIBUTES TO THE ONLINE
Happy Customers Frustrated Customers
Slide 5
Slide 5 text
dictionary.com
1. Digital Technology. the perception and response of
a person toward design elements of software or
digital media while interacting with it.
Abbreviation: UX
NOUN
user experience
Slide 6
Slide 6 text
User Experience Design User Interface Design
Core usability and
functionality.
UX UI
Aesthetics and visual
appeal.
vs.
Slide 7
Slide 7 text
The Logic or The “Brains”
(Useful)
The “pretty face”
(Beautiful)
UX UI
vs.
Slide 8
Slide 8 text
“…Features are what draw people to
your product. Details are what keep
them there.”
-Nick Babich
Editor-n-chief of UX Planet
Slide 9
Slide 9 text
How do you create a
good user experience?
Slide 10
Slide 10 text
1
Research
3
Build
2 4
Design Measure
4 Step Process
Slide 11
Slide 11 text
Research
1. Know your audience
2. Define Problems and Define Path
to solve Problem.
3. Determine hierarchy flow and
function
Build Measure
Design
1
Research
GOALS
Slide 12
Slide 12 text
Design
Research Build Measure
2
Design
1. Add aesthetic
2. Clarify your message
3. Keep key things consistent
4. Prototype & validate designs
GOALS
Slide 13
Slide 13 text
Build
Research Measure
Design
1. Front-end/back-end build
2. QC
3. Test
3
Build
GOALS
Slide 14
Slide 14 text
Measure
Research Build
Design
1. Set up tracking to measure results
2. Goal and/or event tracking
3. Add analytics
4
Measure
GOALS
Slide 15
Slide 15 text
Build, Measure, Learn…
Learn
GOALS
1. Report & analyze data
2. Where can we improve?
3. A/B Testing
Research Build
Design
4
Measure
Slide 16
Slide 16 text
Source: Hyperquake
Slide 17
Slide 17 text
Source: Hyperquake
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Video Bottom (Control) Video Top
A B
Slide 23
Slide 23 text
Video Bottom (Control) Video Top
A B
Slide 24
Slide 24 text
Why is UX important?
Slide 25
Slide 25 text
"We design to elicit responses from
people. We want them to buy
something, read more, or take action
of some kind. Designing without
understanding what makes people
act the way they do is like exploring
a new city without a map…”
-Susan Weinschenk
“100 Things Every Designer Needs to Know About People”
Slide 26
Slide 26 text
Knowing the end goal and how you
plan to get there is key to having
success with UX design.
DESIGNER PRO TIP
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
1. No visual hierarchy
2. Lacked structure/layout
4. …Mobile, not responsive
AIRPLACO ANALYSIS
3. No clear calls to action
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
These updates contributed to a
40% increase in
sales
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
1. No visual hierarchy
2. No clear message
4. …Mobile, not responsive
SAFE SCHOOLS ANALYSIS
3. Call to action not prominent
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
These updates contributed to a
357% increase in
conversion rate
Slide 41
Slide 41 text
So what about
WordPress?
Slide 42
Slide 42 text
Designing a site for WordPress takes
some knowledge of the WordPress
platform and how it works to deliver
a killer user experience not only for
the user of the site, but also the
people managing it.
DESIGNER PRO TIP
Slide 43
Slide 43 text
ACF Advanced Custom
Fields (Pro)
Gravity Forms
(Premium)
Yoast SEO
Woo Commerce
User-Friendly Plugins
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
5 Tips to improve your
users experience
online…
Slide 51
Slide 51 text
1. Know your audience
2. Clarify your message
4. Be consistent
5. Measure and tweak
5 TIPS TO IMPROVE YOUR UX
3. Create visual hierarchy
Slide 52
Slide 52 text
Questions?