Are you designing for your user? All of them? (v2)

A2769f5bf01a40a449c370fced88e9a2?s=47 tapps
February 29, 2020

Are you designing for your user? All of them? (v2)

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)
Communication = 7% Words, 38% Tonality, 55% Physiology

20)
User Personas:
Research driven data --> MAGIC (analyze the data) --> A detailed profile of an imaginary person

21 - 22)
*example user personas*

23)
REMEMBER:
Accessibility & Diversity

24)
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+

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

26)
#ProTip:
Intentionally add inclusion within your user personas

27)
Now what?
Oh, we're just getting started...

28)
Creating user
Journeys, Stories & Maps

29 - 31)
*example Empathy Maps*

32)
(DON'T forget Accessibility)

33 - 35)
*example User Journey Maps*

36 -37)
User Stories:
"As a [role], I want to [action], (so that [benefit])"

38)
"But wait, what if my business is to help other businesses?"
-anyone who does client work

39)
I'm a
FREELANCER
and I focus on
Business / Client and their customers & potential customers

40 - 41)
I'm a
FREELANCER
and I focus on
INTERNAL user
and EXTERNAL audience

42)
OK, so
HOW do we do that?
Glad you asked...

43)
First we ask more questions

44)
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?

45)
*screenshot of default WordPress admin dashboard--confusing for first time users*

46)
*screenshot of WordPress admin notification messages--also confusing for first time users*

47)
But we can change that!
And we have a few options too...

48)
The easy way:
With plugins

49)
So I asked on twitter
here's a few responses

50 - 53)
*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/

54)
The less easy way:
With Code

55 - 58)
*screenshots of code snipit examples*

59)
Do I need to do ALL this stuff?
Not at all. For example...

60)
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.

61)
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.

62)
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.

63)
There are MULTIPLE correct answers
Learn, try, fail/succeed & adapt

64)
That seems easy enough, right?

65)
Go forth and design for ALL your users!

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

A2769f5bf01a40a449c370fced88e9a2?s=128

tapps

February 29, 2020
Tweet

Transcript

  1. 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'); }
  2. 3.
  3. 4.
  4. 9.

    NO

  5. 12.

    ACTUALLY, MORE LIKE ENGINEERING If science and art had a

    baby... invent, design, analyze, build, and test
  6. 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
  7. 19.

    COMMUNICATIO N USER PERSONAS Research driven data 55% 38% 7%

    WORDS TONALITY PHYSIOLOGY EXPRESSIONS GESTURES POSTURE PITCH TONE TEMPO VOLUME CONTENT
  8. 20.

    USER PERSONAS Research driven data A detailed profile of an

    imaginary person MAGIC (analyze the data)
  9. 21.

    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.
  10. 22.

    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
  11. 24.

    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+
  12. 25.

    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
  13. 30.
  14. 31.
  15. 34.
  16. 35.
  17. 38.

    “ But wait, what if my business is to help

    other businesses? -anyone who does client work
  18. 40.

    FREELANCER CUSTOMERS POTENTIAL CUSTOMERS & I'm a and I focus

    on BUSINESS / CLIENT and their EXTERNAL AUDIENCE INTERNAL USER
  19. 41.

    FREELANCER CUSTOMERS POTENTIAL CUSTOMERS & I'm a and I focus

    on BUSINESS / CLIENT and their EXTERNAL AUDIENCE INTERNAL USER
  20. 44.

    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?
  21. 45.
  22. 46.
  23. 55.
  24. 56.
  25. 57.
  26. 58.
  27. 59.
  28. 60.

    ➤ 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...
  29. 61.

    ➤ 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...
  30. 62.

    ➤ 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...
  31. 66.