Slide 1
Slide 1 text
UX Starter Crash Course
Stéphanie Walter - @walterstephanie
Slide 2
Slide 2 text
UX & Product Designer
Mobile expert. Pixel & CSS Lover
stephaniewalter.design @WalterStephanie
Slide 3
Slide 3 text
29/11
๏ Paper prototyping the pages
๏ Testing the prototype
๏ Conclusion - Why should I
invest in a user centred
design process?
๏ Introduction and definition
๏ Defining a product concept
๏ Getting to know the users
๏ Building a user flow
22/11
Slide 4
Slide 4 text
Graphic, UI, UX, design:
some definitions
Slide 5
Slide 5 text
Visual design, logo design,
illustrations, etc.
Slide 6
Slide 6 text
Visual design
Slide 7
Slide 7 text
Logo design
Slide 8
Slide 8 text
Illustrations
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
A pretty object meant
as a “conversation
starter”
Slide 11
Slide 11 text
User Interface (UI)
Slide 12
Slide 12 text
UI components
from the Foyer
Design System
Slide 13
Slide 13 text
A mobile User
Interface
Slide 14
Slide 14 text
Same product,
desktop User
Interface
Slide 15
Slide 15 text
The interface
reflects user
expectations:
Good Deals
Slide 16
Slide 16 text
A pretty but not
really usable object
Slide 17
Slide 17 text
User Experience (UX)
Slide 18
Slide 18 text
“I wanted to cover all aspects
of the person’s experience
with the system including
industrial design graphics, the
interface, the physical
interaction and the manual.”
1993, Don Norman as Apple’s first User Experience Architect
Slide 19
Slide 19 text
use
During
Before After
use
use
Slide 20
Slide 20 text
UX Design is not
limited to digital
interfaces and
products
Slide 21
Slide 21 text
It doesn’t
always have to
be a pleasant
experience
Slide 22
Slide 22 text
Okay, how do I get started?
Slide 23
Slide 23 text
Define a clear concept for
your product/service
01
Slide 24
Slide 24 text
A well-defined
project should
answer the
following questions:
๏ WHAT: what type of project is it? (e-commerce,
shop window, blog, application, service, shop,
etc.)
๏ WHO: for whom is this product made (aka what is
the main target audience, who are you users?)
๏ WHY: What user problem are you trying to solve?
Why is it useful for them? Why will they want to us
it?
๏ WHERE: where are your users, what is there
location, are they in a specific area, all around the
world, where will be your market?
๏ WHEN: when will your product be used? A specific
time of the day? The year? All the time?
Slide 25
Slide 25 text
MY PROJECT IS
What? Type?
MY USERS ARE
Who? Target audience?
THEY ARE LOCATED
Where?
THEY NEED // MY PROJECT ALLOWS THEM TO Why, what problem do I solve?
IT WILL BE USED
When?
Slide 26
Slide 26 text
And yes this is marketing 101…
Slide 27
Slide 27 text
Your turn :)
Slide 28
Slide 28 text
Get to know your users
02
Slide 29
Slide 29 text
But… but we don’t have “UX people”
But… we don’t have the time
But… we don’t have budget
But…
Slide 30
Slide 30 text
But… but we don’t have “UX people”
But… we don’t have the time
But… we don’t have budget
But… Everyone in your team
is responsible for the
user experience of your
products.
Slide 31
Slide 31 text
But…
Here are some guerrilla
user research techniques
Slide 32
Slide 32 text
On a new product/project
Slide 33
Slide 33 text
Online
surveys for
quantitative
data
Slide 34
Slide 34 text
Guerilla
interviews
Slide 35
Slide 35 text
Remote
interviews
Slide 36
Slide 36 text
Interviewing without
influencing or bringing biases
in the conversation is hard!
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
On an existing project
Slide 39
Slide 39 text
Ask the
support
Slide 40
Slide 40 text
Online user
feedback
Slide 41
Slide 41 text
Analytics &
backend data
Slide 42
Slide 42 text
User Experience / Customer Journey Map
With all this, you can start building a “map” of the experience of a user before, while they are using your service and after
Source NNgroup
Slide 43
Slide 43 text
User Journey
map of going
to a UX in Lux
Workshop
Slide 44
Slide 44 text
Your turn :)
Slide 45
Slide 45 text
Build a user flow
03
Slide 46
Slide 46 text
It shows of all the different steps user will need to
take to complete their task or goal.
Slide 47
Slide 47 text
The “nice
version”
Slide 48
Slide 48 text
The “guerilla
paper version”
Slide 49
Slide 49 text
User flows
๏ What are the most likely scenarios and
sequences users will go through on your
site?
๏ Are there potentiel dead-ends?
๏ Are there different “paths” to accomplish
the same goal?
Slide 50
Slide 50 text
1. Find a starting point
๏ Identify major “parts” (pages) users will
need to accomplish the task to find your
starting point.
๏ What are the “key destinations”?
(example: the product page and the
purchase page in ecommerce)
Slide 51
Slide 51 text
2. What comes before/next
๏ How does user arrive to this particular
point?
๏ What comes before?
๏ What are the next steps?
Slide 52
Slide 52 text
3. Alternative routes
๏ For each steps:
๏ is there another way to arrive here?
๏ is there another place they can go from
this step?
Slide 53
Slide 53 text
Your turn :)
Slide 54
Slide 54 text
Prototype page content
04
Slide 55
Slide 55 text
๏ Based on your user flow you now
have a “list” of pages and views to
help your user accomplish the goal
of “finding a cooking recipe”.
๏ You might also have subpages,
modals and other small
“interactions”
List your main pages
Slide 56
Slide 56 text
What do I need
on each page?
Slide 57
Slide 57 text
Content inventory
A way to identify and list the different
types of content and features necessary
on each page to help users accomplish
their goal.
Slide 58
Slide 58 text
Navigation
You know the navigation path in your user
flow.
Now you need to ask: what does the user
need on the screen to go from one page to
the other? Don’t forget about secondary
navigations (internal links)
Slide 59
Slide 59 text
Paper prototype to explore more options
A quick tool to let you explore and throw away if needed different options without too much cost risks
Slide 60
Slide 60 text
Resources
http://inspirationhut.net/printable-paper/
Slide 61
Slide 61 text
Your turn :)
Slide 62
Slide 62 text
Let’s test this prototype!
05
Slide 63
Slide 63 text
Guérilla Prototyping: 10 minutes
to create the "functional" paper
prototype and test the hypothesis
"how users will place media on a
timeline".
Guerilla usability
testing
Slide 64
Slide 64 text
๏ Testing a paper prototype is
cheaper than testing a final product
๏ It’s better to test x 5 people than
with none
๏ It’s better to test with people in your
target audience
Guerilla usability
testing
Slide 65
Slide 65 text
๏ Prepare a test protocol and
follow it
๏ Pre-test your test.
Usability testing!
Slide 66
Slide 66 text
๏ Explain to the person what’s
going to happen (see
cheatsheet)
๏ Have the person sign an
authorisation if you record
them
Usability testing!
Slide 67
Slide 67 text
๏ Be careful about biases
๏ Don’t help the users, let them
finish and then you can answer
all their questions
๏ Take notes (or have a note
taker)
Usability testing!
Slide 68
Slide 68 text
Your turn :)
Slide 69
Slide 69 text
Okay, then what?
Slide 70
Slide 70 text
This is just
the beginning
UX Design
UI Design
Developpement
Slide 71
Slide 71 text
Why should I invest in a user
centred design process?
Slide 72
Slide 72 text
Well-designed & usable
products cost less support
and help gain time.
1.
Slide 73
Slide 73 text
How much money
is this intranet
costing in “time
wasted”?
VS
Slide 74
Slide 74 text
Users today expect
well-designed & usable
products
2.
Slide 75
Slide 75 text
Would you
trust this site
with your
credentials?
Slide 76
Slide 76 text
Why am I punished
using this for work?
Slide 77
Slide 77 text
While I’m used to
have this at home…
Slide 78
Slide 78 text
Great experience drives
user satisfaction
3.
Slide 79
Slide 79 text
Would you use
that app?
Slide 80
Slide 80 text
User research drives
quality and innovation
4.
Slide 81
Slide 81 text
use
During
Before After
use
use
Taking pictures
is easy
It takes forever to
send when wifi is slow
Opportunities
1
1
We have to wait until
front-desk tells us the
client answered
2
2
Asynchronous Loading in the background
Push notifications and navigation rework
Fleetback now
Additional work accepted
Open
The client Serges Heinrich accepted 2/3 additional work.
Project Fi 59%
5:07 5:07
Sun Jul.
29
Sun Jul.
29
Slide 82
Slide 82 text
User Data helps take
business decisions
5.
Slide 83
Slide 83 text
Avoid feature
creep and endless
scope changes
Slide 84
Slide 84 text
Is there a
market for this
TV app?
Slide 85
Slide 85 text
Design driven products
make development
cheaper
6.
Slide 86
Slide 86 text
Tables
Table headings
Table rows
Collapsing table rows
Table filters / search
Table pagination
Edit
540€
3 planned works found in 1 intervention
Christophe Grosjean
15/10/2018 To Send
Edit
540€
3 planned works found in 1 intervention
Christophe Grosjean
10/11/2018 To Send
We contacted him by mail
COMMENTS
300€
Other reparation lo… - Recommended
40€
Tyre FR - Recommended
200€
Broken disc - Urgent
WORKS DETAILS
INT3RVENTION-N33MB3R
Linked intervention:
+352 00 000 000
[email protected]
CUSTOMER DETAILS
BMW 320d - PA9976
First Name Last Name Email Adresss Phone Number Last Update
Table headings have a font size of 16 px. User can sort the column by using the double arrows next to the table heading title
Table rows have an odd/even background.
They can have action buttons on the right side of the table. The action button is always an outline button style
Table rows can have collapsing elements. When they do, we use
- the down arrow for collapsed rows
- the up arrow for expanded rows
Some tables might have filters / search functionnalities to help users navigate inside the data. Those fonctionalities are displayed on top of the table headings
Tables display 10 items by default. At the bottom or the table, the pagination lets user navigate towards other items
Grosjean
Christophe +352 909 8990 10/04/2018 08:14:41
Grosjean
Christophe +352 909 8990 10/04/2018 08:14:41
Filtres
Filter Interventions 12/11/2018
A partir de:
Cette semaine
Aujourd’hui
Tous
First Name Last Name Email Adresss Phone Number Last Update
12/11/2018
As of:
This Week
Today
All Filters
First Name Last Name Email Adresss Phone Number Last Update
13 14
12
10
…
2 3 4
1
Buttons and links
Primary buttons
Primary buttons are used for the MAIN action on the page / view
Default Desactivated Hover and active
Button Button Button
fill: #FFFFFF 100%
border: 1px center
* #0072CE 100%
fill: #E3F0FF 100%
border: 1px center
* #8BB8E8 100%
fill: #0072CE 100%
border: 1px center
* #0072CE 100%
color: #0072CE 100%
font-face: Roboto-Medium
font-size: 14px
color: #0072CE 100%
font-face: Roboto-Medium
font-size: 14px
color: #FFFFFF 100%
font-face: Roboto-Medium
font-size: 14px
Default Desactivated Hover and active
Button Button Button
Button
Default Desactivated Hover and active
fill: #0072CE 100%
border: 1px center
* #0072CE 100%
fill: #8BB8E8 100%
border: 1px center
* #8BB8E8 100%
fill: #005090 100%
border: 1px center
* #005090 100%
color: #FFFFFF 100%
font-face: Roboto-Medium
font-size: 14px
color: #FFFFFF 100%
font-face: Roboto-Medium
font-size: 14px
color: #FFFFFF 100%
font-face: Roboto-Medium
font-size: 14px
Button Button
fill: #FFFFFF 100%
border: 1px center
* #A1A3A6 100%
fill: #EDEDED 100%
border: 1px center
* #BABCBF 100%
fill: #FFFFFF 100%
border: 1px center
* #0072CE 100%
color: #5B6770 100%
font-face: Roboto-Medium
font-size: 14px
color: #A1A3A6 100%
font-face: Roboto-Medium
font-size: 14px
color: #0072CE 100%
font-face: Roboto-Medium
font-size: 14px
Outline secondary buttons
Outline secondary buttons are used for the secondary actions on the page / view, actions that are performed the less often. They are also used for
filters, tabs and interface controls
All dealers Filter Interventions All Filters
Outline primary buttons
Outline primary buttons are used for the secondary actions on the page / view, actions that are performed less often than the first one. They are also used for
repeated actions like in table rows
Examples
Examples
Examples
Interventions New Intervention
Create
Latest customers
Import Preview More
Save
Send
Import Preview More
Save
Send
Primary buttons like send and save are in blue
Outline secondary buttons preview and import
Colors - main palette
Colors - secondary palette
Text colors and background Background colors
Accessibility
rgba(0,114,206,1);
#0072CE
blue-50
rgba(0,80,144,1);
#005090
blue-70
rgba(0,55,99,1);
#003763
blue-80
rgba(139,184,232,1);
#8BB8E8
blue-20
rgba(195,215,238,1);
#C3D7EE
blue-10
rgba(227,240,255,1);
#E3F0FF
blue-05
rgba(197,41,155,1);
#C5299B
fushia-50
Design
specifications
bring consistency
Slide 87
Slide 87 text
It’s much harder
and expensive to
fix issues after
development
Slide 88
Slide 88 text
It’s never too late to ask for
designer’s help on a project!