Talk given Oct 2018 for Albuquerque, NM's "Girl Develop It" group. What is UX?: Explanation of the different aspects of UX Risks: What happens if we skip any of these aspects of UX? Fail Boat: What doing it wrong looks like and how we can do it right

1. RS21
UX 101
STRATEGY,
STRUCTURE, &
EXPERIENCE
Tuesday, October 19, 2018
Girl Develop ItCLIENT
Code & ChillPROJECT

2. RS21
01
02
03
OBJECTIVES
Define what we mean when we say UX.
Give everyone an understanding of the
important parts and purpose of the UX
process so we can make the most
intuitive and useful systems and
services.
What is UX?
Explanation of the different aspects
of UX
Risks
What happens if we skip any of
these aspects of UX?
Fail Boat
“Boy Howdy!” – what doing it wrong
looks like and how we can do it right
AGENDA

3. RS21RS21
JESS DUVERNEAY
DIRECTOR, UX/UI
RS21
ALBUQUERQUE, NM

4. RS21RS21
17 – Michigan State University -BFA -Art Education
22 – Graduated, Teacher / Artist, Albuquerque
25 - Run Away from my Life
26 – University of Michigan – Master’s in Library Science
26 - Fine Art Library Manager
27 - Major change (Library à HCI)
28 – Graduated, Internship in Michigan
28 – NFL, Los Angeles
29 - Art Gallery, Albuquerque
29 – Freelance, Los Angeles
30 – The Understanding Group, Remote in Los Angeles
31 – Started World IA Day (WIAD)
33 - ½ year off
34 - IA Summit 2015
35 - One North Interactive, Chicago – Manager
37 – RS21, Albuquerque - Director

5. RS21RS21
Need ProductRequirements
Design/
Architecture
Engineering Development Test/
Validation
House
• 3 Bedroom
• 2 Bath
• Home Office
• 1 Story
Inspection

6. RS21

7. RS21RS21
“UX” =
Strategy +
Information Architecture +
User Experience Design

8. RS21
Think of “UX” this way:
Aspirational, Big Picture Concrete, Structure Complete, Interaction
“We want to build a house”
“We need bricks, and we need
to stack the bricks intelligently,
in the right order”
“We have a house, we plaster
the walls and make sure the
doors are in the right spot”
The “Why” The “What” The “How”
Strategy IA UX Design

9. RS21
We ask and answer questions:
What do we want this to do?
Why?
Who is this for?
What are our constraints?
What does success look like?
How might this differentiate
us from our peers?
How is this related to other
parts of our ecosystem?
Based on what we know
about our strategy, what
pieces do we need?
What specific language are
we using?
How are they organized?
How will this structure meets
the needs of the org? Of the
people using it?
Now that we have the pieces
and and a sense of how they
work together, how can we
make this fricken awesome?
How do we work with UI
design and dev to make sure
this is inspiring and do-able?
Strategy IA UX Design

10. RS21
STRATEGY
Definition May Look Like
An abstract but clear and concise path
forward for digital products or services.
Supports business strategy and user
needs.
Deciding what places to make.
The “Why”
Stakeholder Alignment
Market Research
Competitive Analysis
User Research
Roadmap
KPIs & Goals

11. RS21
STRATEGY LOOKS LIKE…

12. RS21
STRATEGY LOOKS LIKE…

13. RS21
INFORMATION ARCHITECTURE
Definition May Look Like
The “What”
The creation of intentional structures that
support the extension of strategy into
digital and physical places.
Making places made of information that
allow meaning making, wayfinding,
findability, and understanding.
Taxonomy
Sitemap
Navigation & Wayfinding
Wireframes
Content Model
Metadata & Labels

14. RS21
INFORMATION ARCHITECTURE LOOKS LIKE…

15. RS21
INFORMATION ARCHITECTURE LOOKS LIKE…
Sample Sitemap
Updated: April 4, 2017
0.1 (B)
Site Search
Results
0.3 (C)
Contact Us
[Form]
0.2 (?)
Subscribe
[Form]
0.4 Client Login
RFP Form
0.0 (A)
Home
2.1.1 (K)
Content Node
2.0 (E)
Our Thinking
2.1 (J)
Topic
Articles
Blogs
Whitepapers
Contributed Articles
Webinars
Podcasts
Events
4.0 (G)
Join Our Team
4.1 (P)
Campus
Recruits
4.2 (P)
Experienced
Professionals
4.1.1. (P)
Campus
Recruit Detail
4.2.1. (P)
Experienced
Professional
Detail
3.0 (F)
Get to Know
ORG NAME
3.1.1 (M)
People Details
3.1 (L)
People Landing
Announcements
Press Releases
3.2 (P)
About Us
Landing
3.4 (P)
News
Landing
3.3 (N)
Locations
Landing
3.3.1 (O)
Location
Details
3.2.1 (P)
About Details
3.4.1 (I)
Content Node
1.0 (D)
What We Do
BRANDED
OFFERING 1
BRANDED
OFFERING 2
BRANDED
OFFERING 3
BRANDED
OFFERING 4
BRANDED
OFFERING 5
BRANDED OFFERING (1.3)
1.3.3. (P)
Details
XXXXX
Sub-Category 1
CATEGORY 1 CATEGORY 2 CATEGORY 3 CATEGORY 4 CATEGORY 5 CATEGORY 6
Sub-Category 1
Sub-Category 2
Sub-Category 3
Sub-Category 4
Sub-Category 5
Sub-Category 6
Sub-Category 2
Sub-Category 3
Sub-Category 4
Sub-Category 5
Sub-Category 6
Sub-Category 7
Sub-Category 8
Sub-Category 1
(BRANDED
OFFERING 2)
Sub-Category 3
Sub-Category 4
Sub-Category 5
Sub-Category 6
Sub-Category 7
Sub-Category 8
Sub-Category 9
Sub-Category 1
Sub-Category 2
Sub-Category 3
(XXXXX)
(BRANDED
OFFERING 4)
Sub-Category 1
Sub-Category 2
Sub-Category 3
Sub-Category 4
Sub-Category 5
Sub-Category 6
CATEGORY 7
Sub-Category 1
Sub-Category 2
Sub-Category 3
Sub-Category 4
(BRANDED
OFFERING 1)
Sub-Category 1
Sub-Category 2
Sub-Category 3
Sub-Category 4
Sub-Category 5
(BRANDED
OFFERING 4)
SERVICES (1.1)
1.3.4. (K)
Content Node
1.3.1. (H)
Service &
Industry
1.3.2 (J)
Topic
Page Templates
Homepage (A)
Global Nav
Landing (D-G)
Flexible Page
Template (P)
Login Page External Link
Content
Nodes (K)
Affiliate Page (I)
Services &
Industry Detail
(H)
Topic Page (J) People Landing
(L)
People Detail (M)
Location Detail
(O)
Contact (C)Search (B) Location Landing
(N)
News Landing
(Q)
Industry 1 Industry 2 Industry 3 Industry 4
INDUSTRIES (1.2)
Industry 5 Industry 6 Industry 7 Industry 7 Industry 8 Industry 9
Sub-Industry 1
Sub-Industry 2
Sub-Industry 1
Sub-Industry 2
Sub-Industry 3
Sub-Industry 4
Sub-Industry 1
Sub-Industry 2
Sub-Industry 1
Sub-Industry 2
Sub-Industry 1
Sub-Industry 2
Sub-Industry 3
Sub-Industry 4
Sub-Industry 5
Sub-Industry 1
Sub-Industry 2
Sub-Industry 3
Sub-Industry 1
Sub-Industry 2
Sub-Industry 3
Sub-Industry 4
Sub-Industry 5
Sub-Industry 1
Sub-Industry 2
Sub-Industry 3
Sub-Industry 4
Sub-Industry 5
Sub-Industry 6
INDUSTRIES
SUB INDUSTRIES

16. RS21
USER EXPEREINCE DESIGN
Definition May Look Like
Delightful interactions and meaningful
experiences centered around user needs
and expectations – making the places of
information be the best that they can be
in order to gain product or service
traction.
The “How”
User Flows
Personas
Interactive Prototypes
User Testing
Cross Channel Touchpoint Map
Interaction Design

17. RS21
USER EXPERIENCE DESIGN LOOKS LIKE…
Image caption.

18. RS21
USER EXPERIENCE DESIGN LOOKS LIKE…
Image caption.

19. RS21
WHAT TO EXPECT
WHEN YOU
EXPECT
TO SKIP UX

20. RS21

21. RS21
If We Skip “X” Expect “Y””
Products that don’t address a
business need
Specific tactics deployed
without the intended results
Something that will not be
valuable or have utility in the
near future
Wasted budget
Products that don’t make sense
& are hard to navigate
Disorienting user experience,
even though design and UI
might seem fine (or even great)
Issues with findability &
scalability
Difficulty creating great UX
Complications & increased
budget in build
Products that don’t address
user needs
Low user adoption & opinion of
the system
Increased calls to support
Poor Conversion
Odd or lack of integration with
the rest of the information
environment
Strategy IA UX Design

22. RS21

23. RS21
FAIL BOAT:
BAD EXAMPLES

24. RS21
STRATEGY FAIL LOOKS LIKE…
While accidentally hilarious, the Segway solves virtually no actual human issue.

25. RS21
INFORMATION ARCHITECTURE FAIL LOOKS LIKE…

26. RS21
INFORMATION ARCHITECTURE FAIL FEELS LIKE…

27. RS21
USER EXPERIENCE DESIGN FAIL LOOKS LIKE…
….that’s gonna cost extra.

28. RS21
USER EXPERIENCE DESIGN FAIL LOOKS LIKE…

29. RS21
USER EXPERIENCE DESIGN FAIL FEELS LIKE…

30. RS21RS21
“So, is UX the same as UI?”

31. RS21RS21
“So, is UX the same as UI?”
NO.

32. RS21RS21
“So, is UX the same as UI?”
NO.

33. RS21Credit: https://makedigitalgroup.com/2016/07/19/ux-ui-principles-to-live-by/

34. RS21
WHAT CAN YOU DO?
• Know the difference between UX & UI, and how they are
interconnected
• Understand what happens if we skip important parts of UX
• Work with the UX / UI to decide what activities need to be done early,
and often
• Realize that UX is a team sport – we are all responsible for making
sure our products are intuitive. Ask questions, poke holes.
• Evangelize for and educate clients about UX

35. RS21
BOOKS
35
Information Architecture -
For the Web and Beyond,
4th Edition
- Rosenfeld, Morville, Arango
How to Make Sense of Any
Mess
- Covert
Understanding Context
- Hinton

36. RS21
THANK YOU!
QUESTIONS?
COMMENTS?