The document discusses collaboration between UX designers and visual designers. It emphasizes establishing a shared understanding of user needs and project requirements before beginning design work. Key aspects of collaboration include determining roles, exploring design options jointly, and providing constructive feedback to refine ideas. The goal is for the combined work to have greater value than individual contributions alone.

1. Delicious
Design
UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER
@design4context #userfocus2014
PresentaPon is on Slideshare —
Jennifer
Chaffee
jenniferc@designforcontext.com
Rachel
Sengers
rachel@designforcontext.com
www.designforcontext.com/publica>ons

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

3. @design4context
Delicious Design User Focus 2014
3
WHO
WE
ARE
Rachel
Sengers
Jennifer
Chaffee

4. @design4context
Delicious Design User Focus 2014
4
T-­‐SHAPED
SKILLS

5. @design4context
Delicious Design User Focus 2014
5
T-­‐SHAPED
SKILLS

6. @design4context
Delicious Design User Focus 2014
6
T-­‐SHAPED
SKILLS

7. @design4context
Delicious Design User Focus 2014
7
PREPARING
TO
COOK
THE
MEAL

8. @design4context
Delicious Design User Focus 2014
8
PLANNING
AND
GATHERING
Gather visual design criteria
User & business analysis
Know the project parameters
Pa[ernize!
What needs to be designed – prioriPzed list

9. @design4context
Make
it
very
obvious
what
the
status
is
of
each
piece
of
content.
It
needs
to
be
really
clear
if
something
is
not
live
on
the
site
yet.
I’ll
show
you
examples
of
all
the
status
types.
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
beTer
solu>on?
Delicious Design User Focus 2014
9
A
SHARED
UNDERSTANDING
OF
THE
UX
FLOW
&
WIREFRAMES
Provide wireframes/sketches — with notes
ConversaPons; talk it through together
Convey hierarchy of what elements are most
important
Make the controls clear in the wireframes –
their affordance and behavior
Examples of realisPc content
Explain where things need to be scalable

10. @design4context
Delicious Design User Focus 2014
10
ROOM
FOR
CREATIVITY
Point out known problem areas/challenges you’d
like the visual designer to focus on
Point out areas where you think extra design
exploraPon needs to happen, and the must-­‐bes
How much Pme/budget for exploring visual design

11. CREATING
A
PRODUCTIVE
WORKING
ARRANGEMENT
@design4context
Delicious Design User Focus 2014
11
Determine roles for the project
Get to know each other’s temperaments

12. @design4context
Delicious Design User Focus 2014
12
CREATIVE
COLLABORATION
ENVIRONMENT
Explore
Share ideas and
resolve problems
Look at work in progress
Develop and review ideas

13. @design4context
Delicious Design User Focus 2014
13
REVIEW
AND
REFINE
Design opPons
Design raPonale
Brainstorm ideas

14. @design4context
Delicious Design User Focus 2014
14
WIREFRAMES
TO
VISUAL
DESIGN
Make
it
very
obvious
what
the
status
is
of
each
piece
of
content.
It
needs
to
be
really
clear
if
something
is
not
live
on
the
site
yet.
I’ll
show
you
examples
of
all
the
status
types.
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
beTer
solu>on?

15. @design4context
Delicious Design User Focus 2014
15
WIREFRAMES
TO
VISUAL
DESIGN

16. @design4context
Delicious Design User Focus 2014
16
Arrows
eat
up
a
lot
of
real
estate
and
might
be
too
disassociated
from
the
content
blocks.
WIREFRAMES
TO
VISUAL
DESIGN
Try
puUng
icons
next
to
each
page
in
the
sentence,
instead
of
at
the
beginning
of
the
sentence.
Make
status
even
more
obvious
in
each
content
block.
Consider
coloring
each
content
block
(color
denotes
status)?
Consider
moving
status
to
the
TOP
of
the
content
block?

17. @design4context
Delicious Design User Focus 2014
17
WIREFRAMES
TO
VISUAL
DESIGN

18. @design4context
Delicious Design User Focus 2014
18
COLLABORATION
TIPS
ConstrucPve feedback
Provide raPonale
Open to each other’s ideas
Do a taste test

19. @design4context
Delicious Design User Focus 2014
19
When combined, the
result is much more
delicious than the
individual parts!

20. @design4context
Delicious Design User Focus 2014
20
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
PaTernize!
Shared
understanding
of
the
UX

21. FirstName
LastName
name@designforcontext.com
FirstName
LastName
name@designforcontext.com
Delicious
Design
UXERS
&
VISUAL
DESIGNERS
COLLABORATING
TOGETHER
User
Focus
•
17
October,
2014
@design4context
#userfocus2014
PresentaPon is on Slideshare — www.designforcontext.com/publicaPons
Jennifer
Chaffee
jenniferc@designforcontext.com
Rachel
Sengers
rachel@designforcontext.com
Thank
you!