Many of us work in wireframes and lightweight interactive prototypes to capture, illustrate, discuss, and refine the layout and behavior of the interface we are working on — to design the user experience. And we recognize that visual design is critical for getting to polished, usable, and delightful user experiences. Sometimes, user experience designers are responsible for executing the detailed visual design, but often that is handled by someone else, a visual design specialist. What are the best ways to facilitate the understanding of the design intent and the communication between the experience design and visual design roles, throughout the lifecycle of a project? Rachel Sengers and Jennifer Chaffee provide practical ideas and recommendations for ensuring a smooth and effective collaboration between people in UX design and visual design roles.

1. Jennifer
Chaffee
jenniferc@designforcontext.com
Rachel
Sengers
rachel@designforcontext.com
Delicious
Design
UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER
@design4context #UXPABOS15

2. Jennifer
Chaffee
jenniferc@designforcontext.com
Rachel
Sengers
rachel@designforcontext.com
Two great tastes that taste even greater together!
+
How do we get to the perfect blend?
INTERACTION DESIGN
VISUAL DESIGN

3. @design4context
Delicious Design UXPA Boston 2015
3
WHO
WE
ARE
Rachel
Sengers
Jennifer
Chaffee

4. @design4context
Delicious Design UXPA Boston 2015
4
T-­‐SHAPED
SKILLS

5. @design4context
Delicious Design UXPA Boston 2015
5
T-­‐SHAPED
SKILLS
Collaborate
across
disciplines

6. @design4context
Delicious Design UXPA Boston 2015
6
T-­‐SHAPED
SKILLS

7. @design4context
Delicious Design UXPA Boston 2015
7
PREPARING
TO
COOK
THE
MEAL

8. @design4context
Delicious Design UXPA Boston 2015
8
CREATING
A
PRODUCTIVE
WORKING
ARRANGEMENT
Determine
roles
&
responsibili>es
for
the
project

9. @design4context
Delicious Design UXPA Boston 2015
9
PLANNING
AND
GATHERING
Gather visual design criteria
User & business analysis
Know the project parameters
Formats and deliverables

10. @design4context
Delicious Design UXPA Boston 2015
10
GETTING
THE
WIREFRAMES
INTO
SHAPE
PaYernize!

11. @design4context
Delicious Design UXPA Boston 2015
11
GETTING
THE
WIREFRAMES
INTO
SHAPE
PaYernize!

12. @design4context
Delicious Design UXPA Boston 2015
12
GETTING
THE
WIREFRAMES
INTO
SHAPE
<MAP>
<MAP>
WIREFRAME
DESIGN
Consistency
helps
designer
know
how
it
works…
…designer
has
freedom
to
handle
it
differently

13. @design4context
Delicious Design UXPA Boston 2015
13
GETTING
THE
WIREFRAMES
INTO
SHAPE
WIREFRAME
DESIGN
Make
the
controls’
affordances
clear

14. @design4context
Delicious Design UXPA Boston 2015
14
GETTING
THE
WIREFRAMES
INTO
SHAPE
DESIGN
WIREFRAME

15. @design4context
Delicious Design UXPA Boston 2015
15
GETTING
THE
WIREFRAMES
INTO
SHAPE
Examples of realisQc content
How does the content need to scale?
Hierarchy

16. @design4context
Delicious Design UXPA Boston 2015
16
A
SHARED
UNDERSTANDING
OF
THE
UX
FLOW
&
WIREFRAMES
A
shared
understanding

17. @design4context
Delicious Design UXPA Boston 2015
17
A
SHARED
UNDERSTANDING
OF
THE
UX
FLOW
&
WIREFRAMES
Annota>ons
help
the
visual
designer

18. @design4context
Delicious Design UXPA Boston 2015
18
A
SHARED
UNDERSTANDING
OF
THE
UX
FLOW
&
WIREFRAMES
Don’t
throw
it
over
the
wall!

19. @design4context
Delicious Design UXPA Boston 2015
19
A
SHARED
UNDERSTANDING
OF
THE
UX
FLOW
&
WIREFRAMES
Complex
apps
vs.
simpler
sites
PRODUCT NAME

20. @design4context
Delicious Design UXPA Boston 2015
20
ROOM
FOR
CREATIVITY
Designer
does
not
need
to
follow
the
recipe
exactly

21. @design4context
Delicious Design UXPA Boston 2015
21
ROOM
FOR
CREATIVITY
Designer
does
not
need
to
follow
the
recipe
exactly

22. @design4context
Delicious Design UXPA Boston 2015
22
Make
it
very
obvious
what
the
status
is
of
each
piece
of
content.
It
needs
to
be
really
clear
if
something
is
not
live
yet.
I’ll
show
you
a
list
of
all
the
status
types
–
let’s
discuss
it
together.
In
usability
tests,
users
did
not
understand
that
this
icon
meant
this
announcement
also
appears
on
their
site’s
home
page.
There’s
a
tool>p
on
hover,
but
it
didn’t
help.
Can
you
think
of
a
beZer
solu[on?
ROOM
FOR
CREATIVITY
Point
out
challenge
areas

23. @design4context
Delicious Design UXPA Boston 2015
23
ROOM
FOR
CREATIVITY
WIREFRAME
DESIGN
Point
out
areas
that
need
extra
design
explora>on,
and
the
must-­‐bes

24. @design4context
Delicious Design UXPA Boston 2015
24
ROOM
FOR
CREATIVITY
Invite
crea>ve
ideas
How
can
we
let
people
know
the
steps
that
are
involved
in
taking
an
class?
WIREFRAME

25. @design4context
Delicious Design UXPA Boston 2015
25
ROOM
FOR
CREATIVITY
CLASS
CARDS
CLOSED
CLASS
CARD
OPENED
CLASS
CARD
DESIGN

26. @design4context
Delicious Design UXPA Boston 2015
26
ROOM
FOR
CREATIVITY
How
much
>me/budget
for
exploring
visual
design
@design4context
Delicious Design UXPA Boston 2015
26

27. @design4context
Delicious Design UXPA Boston 2015
CREATIVE
COLLABORATION

28. @design4context
Delicious Design UXPA Boston 2015
28
CREATIVE
COLLABORATION
ENVIRONMENT
Explore
Share ideas and
resolve problems
Look at work in progress
Develop and review ideas

29. @design4context
Delicious Design UXPA Boston 2015
29
REVIEW
AND
REFINE
Design opQons
Provide raQonale
Brainstorm ideas

30. @design4context
Delicious Design UXPA Boston 2015
30
WIREFRAMES
TO
VISUAL
DESIGN
Pin up wall helps designer look
for pa]erns
Get bigger picture of structure
Establishing a design pa]ern
Pa]erns of repeaQng elements
develop a design language

31. @design4context
Delicious Design UXPA Boston 2015
31
WIREFRAMES
TO
VISUAL
DESIGN:
EXAMPLE
ExploraQon of various
visual designs…
evolved into a soluQon…
that we would not have
arrived at independently.
WIREFRAMES
DESIGN

32. @design4context
Delicious Design UXPA Boston 2015
32
COLLABORATION
TIPS
ConstrucQve feedback
Provide raQonale
Open to each other’s ideas
Do a taste test

33. @design4context
Delicious Design UXPA Boston 2015
33
When combined, the
result is much more
delicious than the
individual parts!

34. @design4context
Delicious Design UXPA Boston 2015
34
TASTY
BITES
TO
TAKE
AWAY…
The
synergy
of
combined
ingredients
Collabora>on
space
Building
upon
each
other’s
ideas
Convey
freedom
to
be
crea>ve
PaYernize!
Shared
understanding
of
the
UX

35. FirstName
LastName
name@designforcontext.com
FirstName
LastName
name@designforcontext.com
Delicious
Design
UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER
UXPA Boston • 15 May, 2015
@design4context #UXPABOS15
PresentaQon is posted on Slideshare— www.designforcontext.com/publicaQons
Thank
you!
Jennifer
Chaffee
jenniferc@designforcontext.com
@JenChaffee58
Rachel
Sengers
rachel@designforcontext.com
@rachseng