Are you designing for your user? ALL of them?

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 :) )

Transcript

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
5. USER EXPERIENCE USER INTERFACE /
6. USER EXPERIENCE USER INTERFACE /
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. ACTUALLY, MORE LIKE ENGINEERING If science and art had a baby...
12. ACTUALLY, MORE LIKE ENGINEERING If science and art had a baby... invent, design, analyze, build, and test
13. "COLORS AND STUFF" IS JUST INCLUDED among other things...
14. DESIGN FOR OTHER PEOPLE We
15. OK, WHO ARE THESE USERS? well, that depends...
16. Age/stage of life Location Gender Socioeconomic Income Career Family Culture Language Interests Ability etc. BUSINESS CUSTOMERS POTENTIAL CUSTOMERS Age/stage of life Location Gender Socioeconomic Income Career Family Culture Language Interests Ability etc. & I'm a and I focus on
17. OK, COOL So how do we narrow that down?
18. CREATE USER PERSONAS We
19. USER PERSONAS Research driven data A detailed profile of an imaginary person MAGIC (analyze the data)
20. R CO Mark Age: 46 Location: Racine, WI Occupation: Construction Worker Motivation Activity Level (post PT) Months in Physical Therapy Mark is a Construction Worker and spends most of his time on scaffolding, working on the exterior of the buildings being constructed. He has been doing this since he was 20 years old. Unfortunately, while on the job, he fell a couple stories and broke both his tibia and fibula. Now, he has been out of work and in a boot for 8 months and has become depressed because he has nothing to do all day and he feels he isn’t progressing as quickly as he’d like, since the projected recovery time is 6 months. He goes to the gym to build strength everyday, but the bone still hasn’t fully healed and he feels he has no guidance. Goals » To be able to play on his men’s basketball league again » Get back to work » Be pain free Frustrations » Recovery is longer than expected » Does not have a very big support system Mark feels that the hardest part of recovery is the mental aspect and thinks it would be nice to be able to connect and talk with people who are going through the same thing as him.
21. I’m not a big phone app person. I’ve dabbled in a few but I don’t have any favorites. Gretchen Gretchen recently retired from her lifelong teaching career. She is in the process of selling her home after the recent death of her husband and plans to move closer to her grandkids. She is looking to downsize to a small condo with just enough room for her and her two cats. 65 years old Age University of Minnesota Bachelors Degree - Education Retired teacher $35K Low Tech Proficiency Education Income Tech Level Fav App Plant Properties Fav Retailer Facebook Convenience Low High Fair High Moderate Variety/Aesthetics Benefits (ex. air purifying) Pet Friendly Affordability Kohl’s Core Needs Motivation Pain Points Easy to use navigation. Clear and simple icons. Technology Plant care and maintenance Quality of customer service Has downsized. Needs to get rid of many of her belongings including some houseplants. Always looking for new plants to add to her collection. Loves her grandkids and animals. St. Paul, MN Location Alyssa Holly
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. JOURNEYS, STORIES & MAPS Creating user
28. EMPATHY MAP
31. (DON'T FORGET ACCESSIBILITY)
32. USER JOURNEY MAP
35. USER STORIES
36. USER STORIES
37. “ But wait, what if my business is to help other businesses? -anyone who does client work
38. FREELANCER CUSTOMERS POTENTIAL CUSTOMERS & I'm a and I focus on BUSINESS / CLIENT and their
39. FREELANCER CUSTOMERS POTENTIAL CUSTOMERS & I'm a and I focus on BUSINESS / CLIENT and their EXTERNAL AUDIENCE INTERNAL USER
40. FREELANCER CUSTOMERS POTENTIAL CUSTOMERS & I'm a and I focus on BUSINESS / CLIENT and their EXTERNAL AUDIENCE INTERNAL USER
41. HOW DO WE DO THAT? Glad you asked... OK, so
42. ASK MORE QUESTIONS First we
43. ASK MORE QUESTIONS First we 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?
46. BUT WE CAN CHANGE THAT! And we have a few options too...
47. WITH PLUGINS The easy way:
48. SO I ASKED ON TWITTER here's a few responses
49. METABOX.IO ADVANCEDCUSTOMFIELDS.COM
50. METABOX.IO ADVANCEDCUSTOMFIELDS.COM
51. ADMINCOLUMNS.COM ADMINMENUEDITOR.COM ULTIMATEDASHBOARD.IO
52. VIDEOUSERMANUALS.COM WPSHAPERE.COM
53. WITH CODE The less easy way:
58. DO I NEED TO DO ALL OF THIS STUFF? Not at all. For example...
59. ➤ 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. NEW TO WORDPRESS Your client is: and running a website in general...
60. ➤ 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. WORKED WITH WP BEFORE Your client has: but limited experience with running an online store...
61. ➤ 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. WORDPRESS ROCKSTAR Your client is a: and you want them to be a repeat customer...
62. THERE ARE MULTIPLE CORRECT ANSWERS Learn, try, fail/succeed & adapt
63. THAT SEEMS EASY ENOUGH Right?
64. GO FORTH AND DESIGN FOR YOUR USERS! ALL
65. ANY QUESTIONS? THESE SLIDES CAN BE FOUND AT SPEAKERDECK.COM/TAPPS @tapps @tapps @therealtapps tapps.design /in/tapps