delicious design

© Design for Context

Jennifer Chaffee [email protected]

Rachel Sengers [email protected]

Delicious Design UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER

@design4context #UXPABOS15


Jennifer Chaffee [email protected]

Rachel Sengers [email protected]


@design4context #userfocus2014 PresentaQon is on Slideshare — www.designforcontext.com/publica>ons

Two great tastes that taste even greater together!

+

How do we get to the perfect blend?

INTERACTION DESIGN VISUAL DESIGN

@design4context Delicious Design UXPA Boston 2015 3


WHO WE ARE

Rachel Sengers Jennifer Chaffee

Incorporate icons?



T-‐SHAPED SKILLS



T-‐SHAPED SKILLS

Collaborate across

disciplines



T-‐SHAPED SKILLS



PREPARING TO COOK THE MEAL



CREATING A PRODUCTIVE WORKING ARRANGEMENT

Determine roles &

responsibili>es for the project



PLANNING AND GATHERING

Gather visual design criteria

User & business analysis

Know the project parameters

Formats and deliverables

Replace with an image of a shopping cart with groceries in it (low priority)

We can remove “formats & deliverables” bullet point or bundle it with “project parameters” bullet point if we need to shorten.



GETTING THE WIREFRAMES INTO SHAPE

istock 18159142

PaYernize!




PaYernize!




<MAP>

<MAP>

WIREFRAME DESIGN

@Rachel: This is not the best example of the concept I am trying to explain. I could try to look for another example.

Consistency helps

designer know how it

works…

…designer has freedom to handle it differently




WIREFRAME DESIGN

Make the controls’

affordances clear




DESIGN WIREFRAME




Examples of realisQc content

How does the content need to scale?

Hierarchy



A SHARED UNDERSTANDING OF THE UX FLOW & WIREFRAMES

A shared understanding




Annota>ons help the visual

designer




Don’t throw it over the wall!




Complex apps vs.

simpler sites

PRODUCT NAME



ROOM FOR CREATIVITY

For sldieshare purposes:

I added an extra copy of this slide, since the animatuion on the next slide isn’t visible in Slideshare.

Designer does not need to follow the

recipe exactly



ROOM FOR CREATIVITY

Designer does not need to follow the

recipe exactly



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



ROOM FOR CREATIVITY

WIREFRAME DESIGN

Point out areas that need extra design explora>on, and the must-‐bes



ROOM FOR CREATIVITY

Invite crea>ve ideas

How can we let people know the steps that are involved in taking an class?

WIREFRAME



ROOM FOR CREATIVITY

CLASS CARDS CLOSED CLASS CARD

OPENED CLASS CARD

DESIGN



ROOM FOR CREATIVITY

How much >me/budget for exploring visual design


@design4context Delicious Design UXPA Boston 2015


CREATIVE COLLABORATION



CREATIVE COLLABORATION ENVIRONMENT

Explore

Share ideas and resolve problems

Look at work in progress

Develop and review ideas



REVIEW AND REFINE

Design opQons

Provide raQonale

Brainstorm ideas



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



WIREFRAMES TO VISUAL DESIGN: EXAMPLE

ExploraQon of various visual designs…

evolved into a soluQon…

that we would not have arrived at independently.

WIREFRAMES

DESIGN



COLLABORATION TIPS

ConstrucQve feedback

Provide raQonale

Open to each other’s ideas

Do a taste test

For Taste Test – we can pull out as a topic (one slide). Maybe also see what Laura said on 5/7/2015 about what to do when the Uxer and Viz don’t agree



When combined, the result is much more delicious than the individual parts!



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

Don’t just throw it over

the wall

FirstName LastName [email protected]

FirstName LastName [email protected]


UXPA Boston • 15 May, 2015

@design4context #UXPABOS15

PresentaQon is posted on Slideshare— www.designforcontext.com/publicaQons

Thank you!

Jennifer Chaffee [email protected] @JenChaffee58

Rachel Sengers [email protected] @rachseng