WordCamp San José, 2019
slide transcription:
1)
Are you designing for your user? ALL of them?
2)
hi, i'm tapps
#bio {
name: tracy apps;
aka: @tapps;
location: brown deer, wisconsin;
company: tracy apps design;
title: chief creative problem solver;
role: UX design & front-end dev;
experience: 22years;
number-of-bowties-owned: over 150;
more: url('http://tapps.design');
}
3)
UX / UI
4)
UX / UI (with puzzled look guy meme photo)
5)
User Experience
-
User Interface
6 - 7)
user EXPERIENCE
-
user INTERFACE
8)
"Design is just colors and stuff,
right?"
- many people who don't design things
9)
NO
10)
Actually more like engineering
If science and art had a baby...
11)
*Screenshot of Engineering Wikipedia page*
link: https://en.wikipedia.org/wiki/Engineer
12)
invent, design, analyze, build, and test
13)
"Colors and stuff" is just INCLUDED
among other things...
14)
We
Design for other people
15)
OK, Who are these users?
well, that depends...
16)
I'm a
BUSINESS
and I focus on
Customers & Potential Customers
Age/stage of life
Location
Gender
Socioeconomic
Income
Career
Family
Culture
Language
Interests
Ability
etc.
17)
OK, cool.
So how do we narrow that down?
18)
We
Create user personas
19)
User Personas:
Research driven data --> MAGIC (analyze the data) --> A detailed profile of an imaginary person
20 - 21)
*example user personas*
22)
REMEMBER:
Accessibility & Diversity
23)
INCLUSIVE DESIGN...
remembers to include diversity in:
* age/generation
* gender (remember there are more than two)
* culture, color & background
* social & economic status
* religion (including "none")
* language
* location & connectivity
* technical level
* education & experience
* LGBTQ+
24)
INCLUSIVE DESIGN...
includes accessibility for:
* blind, color blind or limited sight
* deaf or hard of hearing
* limited mobility, missing or shaking limbs
* dyslexia & other learning disabilities
* sensory disorders, epilepsy
* trauma & PTSD
* temporary impairment
25)
#ProTip:
Intentionally add inclusion within your user personas
26)
Now what?
Oh, we're just getting started...
27)
Creating user
Journeys, Stories & Maps
28 - 30)
*example Empathy Maps*
31)
(DON'T forget Accessibility)
32 - 34)
*example User Journey Maps*
35 -36)
User Stories:
"As a [role], I want to [action], (so that [benefit])"
37)
"But wait, what if my business is to help other businesses?"
-anyone who does client work
38)
I'm a
FREELANCER
and I focus on
Business / Client and their customers & potential customers
39 - 40)
I'm a
FREELANCER
and I focus on
INTERNAL user
and EXTERNAL audience
41)
OK, so
HOW do we do that?
Glad you asked...
42)
First we ask more questions
43)
Who will manage the site?
Is it one or multiple people?
Are they full time or volunteer(s)?
What is their technical comfort level?
How many hours or resources allotted?
How much content changes on the site?
How often does it change?
Any current processes or tools used?
How do you expect your business to grow?
Any frustrations on your current site?
44)
*screenshot of default WordPress admin dashboard--confusing for first time users*
45)
*screenshot of WordPress admin notification messages--also confusing for first time users*
46)
But we can change that!
And we have a few options too...
47)
The easy way:
With plugins
48)
So I asked on twitter
here's a few responses
49 - 52)
*list of links of examples*
http://advancedcustomfields.com
https://metabox.io/
https://adminmenueditor.com/
https://www.admincolumns.com/
https://ultimatedashboard.io/
http://wpshapere.com
https://www.videousermanuals.com/white-label-cms/
53)
The less easy way:
With Code
54 - 57)
*screenshots of code snipit examples*
58)
Do I need to do ALL this stuff?
Not at all. For example...
59)
Your client is:
NEW TO WORDPRESS
and running a website in general...
* Things like WordPress news might not be of interest and/or confusing. Hide them.
* Does the menu item labeled "posts" not make sense to them? Create a custom post type with a more relevant name, OR just simply change the label.
* Are they updating the site rarely and forget how to do something? Try a plugin that adds video tutorials right on the dashboard.
60)
Your client has:
WORKED WITH WP BEFORE
but limited experience with running an online store...
* Existing dashboard widgets might be fine as they are. But we can add additional shortcuts to manage the online store.
* They might not need a full video library, but a simple custom text widget with basic instructions or checklist might help.
61)
Your client is a:
WORDPRESS ROCKSTAR
and you want them to be a repeat customer...
* Leave all functionality, just simply add more cosmetic changes to the design. Brand the admin area with their brand colors, logo, etc.
* Add a custom "contact the developer" widget for them to email you directly.
62)
There are MULTIPLE correct answers
Learn, try, fail/succeed & adapt
63)
That seems easy enough, right?
64)
Go forth and design for ALL your users!
65)
Any Questions?
*tracy's contact info*
twitter: @tapps
instagram: @tapps
snapchat: @therealtapps
linkedin: /in/tapps
homepage: http://tapps.design
These slides can be found at speakerdeck.com/tapps (right here :) )
tapps
dmitry_tolonen
fujiiitakarin
stockmark
rasagy
supergabs
kakukoki
hirokazu_oda
uxaustralia
ozontech
juliantruitt
ncdc
bluesmoon
caitiem20
sonatard
hursman
jrom
jonrohan
palkan
chriscoyier
morganepeng
ufuk
andyhume
kneath