Design process in the responsive ageA UX perspective

Pon Kattera Senior Interaction Designer R/GA@pkattera

14 June 2012: NYC Responsive Web Design Meetup

TONIGHTA little about me

Responsive process (alpha)

Responsive process (beta)

Resources and tips getting started

Questions

2

TL;DR

Our job now is to create future friendly design

systems (not fixed pixel width interfaces).

This requires a change in process.

3

A LITTLE ABOUT ME

I’m a senior Interaction Designer at R/GA

I’m an Australian

I’m loving New York!

4

BACK IN 2009

And yes, I’ll admit it. Back then,

I was recommending 960px fixed width.

Fixed width pixel designs were all the rage

Desktop screens were getting larger

Mobile users were visiting our sites

5

MY 2010

2011:GOODBYE TIMBUKTU,HELLO NEW YORK

What’s this “responsive web design” thing you speak of?

7

SO, WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN?

1. A flexible, grid based layout

2. Flexible images and media, and

3. Media Queries

Ethan Marcotte, Responsive Web Design

8

ADAPTIVE

via Brad Frost

RESPONSIVE WEB DESIGN VSADAPTIVE WEB DESIGN

“Adaptive web design is about

creating interfaces that adapt to

the user’s capabilities (in terms of

both form and function). To me,

Adaptive web design is just

another term for progressive

enhancement…”

THIS IS RESPONSIVE

Aaron Gustafson, Adaptive Web Design

9

DOES THIS PROCESS SOUND FAMILIAR? PLANNING

AND STRATEGY

WIREFRAMES

VISUALDESIGN

USER RESEARCH

DEV

10

TEST

DOES THIS PROCESS SOUND FAMILIAR? PLANNING

AND STRATEGY

WIREFRAMES

VISUALDESIGN

USER RESEARCH

DEV

CONTENTSTRATEGY

11

TEST

DOES THIS PROCESS SOUND FAMILIAR? PLANNING

AND STRATEGY

WIREFRAMES

VISUALDESIGN

USER RESEARCH

DEV

CONTENTSTRATEGY

COPY

Lorem ipsum

Lorem ipsum

12

TEST

DOES THIS PROCESS SOUND FAMILIAR? PLANNING

AND STRATEGY

WIREFRAMES

VISUALDESIGN

USER RESEARCH

DEV

Devs are lumped with too many important design decisions

13

TEST

WHY CHANGE OUR PROCESS?

To increase efficiency

Save time and make money.

To design better websites

Design systems, not fixed pixel width interfaces.

14

“RWD comes under criticism for not

being commercially viable. It’s because

it’s trying to be shoe-horned into an

existing, fixed-canvas, inflexible process.”

Mark Boulton, on responsive workflow

WHY CHANGE

15

IF YOU DON’T CHANGE

16

RESPONSIVE PROCESS (ALPHA)

17

FINANCIAL ADVISORS RESPONSIVE SITEProject Details:

An existing Financial Advisors website that

includes basic profile information, market

info and company news. Advisors update

their page via a CMS.

The brief:

Redesign the website to make Advisors

more accessible and engaging to both

potential and existing clients.

18

CASE STUDY

Current state: Think of the site like a Linkedin for Financial Advisors

FINANCIAL ADVISORS RESPONSIVE SITE

Business Objectives

Increase the number of prospects contacting Advisors

Increase the number of

customer referring Advisors

19

CASE STUDY

User Goals

Prospects: Browse for Advisors, make a selection, contact Advisor

Existing clients: Get

market updates, login to their financial accounts

SHOULD I GO RESPONSIVE FOR MY PROJECT

It depends…

Project context

Budget and timelines

Skill set of your team

Client expectations

20

TIPS

21

TIPS

Responsive web design may not be the

best option right now for your project

WHY WE WENTRESPONSIVE

Client’sBusiness Objectives

22

CASE STUDY

Supporting observed user behavior

Facilitate customer referrals

To be future friendly

Competitive advantage

Building expertise

OUR APPROACH

Mobile first (content first)responsive web design

Focus on users and content firstbefore sketching mobile screens

23

CASE STUDY

USER RESEARCH

CONTENTSTRATEGY

RWDPROTOTYPE

WIREFRAME

VISUALDESIGN

PROTOTYPE

TEST

SKETCH

Iterative design & developmentUser Content

Starting mobile first

Prototype handover to client

Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech

24

RESPONSIVE PROCESSCASE STUDY

25

CASE STUDY

USERRESEARCH

PERSONAS SCENARIOS

26

CASE STUDY

CONTENT INFORMATIONARCHITECTURE

CONTENTREFERENCE DIAGRAMS

Current website content Content inventoryMobile content reference diagram

* Profile information had a separate content inventory Linear design: think of content devoid of an interface

CONTENT INVENTORY AND PRIORITIZATIONCASE STUDY

27

CONTENT STRATEGY: A USEFUL RULE OF THUMB

“Generally speaking, your web content is useless unless it does one or both of the following:

- Supports a key business objective

- Supports a user (or customer) in completing a task”

28

Kristina Halvorson, Content Strategy for the Web

TIPS

SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?

29

TIPS

WIREFRAME

VISUALDESIGN

PROTOTYPE

TEST

SKETCH

ITERATIVE DESIGN AND DEVELOPMENT

CASE STUDY

30

Client check ins: 1

WIREFRAME

* Sketching and testing throughout

Start with:

31

STRATEGYUSER RESEARCH

CONTENT STRATEGY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY

Client check ins: 1

WIREFRAME

2

VISUAL DESIGN

PROTOTYPE

WIREFRAME

* Sketching and testing throughout

Start with:

32

STRATEGYUSER RESEARCH

CONTENT STRATEGY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY

Client check ins: 1

WIREFRAME

2

VISUAL DESIGN

PROTOTYPE

WIREFRAME

* Sketching and testing throughout

Start with:

33

3

VISUAL DESIGN

PROTOTYPE

WIREFRAME

STRATEGYUSER RESEARCH

CONTENT STRATEGY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY

Client check ins: 1

WIREFRAME

2

VISUAL DESIGN

PROTOTYPE

WIREFRAME

* Sketching and testing throughout

Start with:

34

4

PROTOTYPE

VISUAL DESIGN

3

VISUAL DESIGN

PROTOTYPE

WIREFRAME

STRATEGYUSER RESEARCH

CONTENT STRATEGY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY

Client check ins: 1

WIREFRAME

2

VISUAL DESIGN

PROTOTYPE

WIREFRAME

* Sketching and testing throughout

Start with:

35

4

PROTOTYPE

VISUAL DESIGN

5

RWD PROTOTYPE

3

VISUAL DESIGN

PROTOTYPE

WIREFRAME

STRATEGYUSER RESEARCH

CONTENT STRATEGY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY

CASE STUDY

INTERACTIONDESIGN

SKETCH WIREFRAME PROTOTYPE

36

CASE STUDY

VISUALDESIGN

VISUALLANGUAGE

GRIDS AND PROPORTIONS

37

38

SPEED IS A DESIGN DECISION

39

RWD ISSUES

What screen sizes should I design?

Start at 320px?

Then what?

TIPS

40

RWD ISSUES

How do I select breakpoints?

Breakpoints should be device agnostic

Let page content determine your breakpoints

41

TIPS

Where an Advisor removes modules 5 and 9

Advisors can choose between 1 and 20 content modules

KEEPING PAGES BALANCED: THE PROBLEMCASE STUDY

42

Content priority Two column layout, dynamic grid layout One column, fixed position side nav

KEEPING PAGES BALANCED: SOLUTIONSCASE STUDY

43

RWD ISSUESPresenting responsive designs to clients

On screen, with all layouts side by side

Nothing beats placing the prototype in the client’s hands

PROFILE PAGE

TIPS

44

PROTOTYPE:LOW FIDELITY

CASE STUDY

45

Fast FocusCheap

[DEMO]

Testing visual styles on more devices

Something the client can show their boss

Treatment of media assets

PROTOTYPE:HIGH FIDELITY

CASE STUDY

46

RESPONSIVE PROCESS (BETA)

47

DESIGNING IN TEXT

Simply, write down the content for each page in text form.

The text should communicate the essence of the page.

Tools like Markdown and Pandoc help convert text files to HTML.

48

http://styletil.es/

STYLE TILES BY SAMANTHA WARREN

49

http://www.starbucks.com/static/reference/styleguide/

Starbucks style guide

http://patternprimer.adactio.com/

Pattern Primer by Jeremy Keith Pea.rs by Simple Bits

http://pea.rs/

Get started early

Use throughout the project

Add responsive patterns

HTML STYLE GUIDES

50

DESIGNING IN THE BROWSER

Creating elements and styles in HTML/CSS

“The most important part here is to use a tool

which doesn’t restrain your creativity. It can be

the browser, Photoshop, Fireworks, InDesign or

anything else that feels right.”

Viljami Salminen, on responsive workflow

51

STOP. COLLABORATE. AND LISTEN.

52

WHAT ARE OTHERS DOING?

53

Mark Boulton’s, notes, thoughts and conclusionsResponsive workflow - Responsive Summit, London 24 February 2012

http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow

1. Sketch

2. Prototype

3. Design

4. Iterate

5. Talk

MARKBOULTON

54

http://www.slideshare.net/stephenhay/mobilism2012

Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012

STEPHEN HAY

1. Content inventory

2. Content reference wireframes

3. Design in text (structured content)

4. Linear design

5. Break point graph

6. Design for various breakpoints

7. HTML design prototype

8. Present prototype screenshots

9. Present prototype after revision

10. Document for production

55

VILJAMISALMINEN

Viljami Salminen, on responsive workflow, 28 May 2012

http://viljamis.com/blog/2012/responsive-workflow/

56

HOW WOULD I APPROACH A NEW RESPONSIVE PROJECT STARTING TODAY?

57

USER RESEARCH

(depending on project context)

58

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

USER RESEARCH

IA and content reference diagram

CONTENTSTRATEGY

(depending on project context)

59

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

USER RESEARCH

CONTENTSTRATEGY

DESIGN IN TEXT

(depending on project context)

60

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

USER RESEARCH

CONTENTSTRATEGY

DESIGN IN TEXT SKETCH

VISUALSTYLETIL.ES

CONVERT TO HTML

(depending on project context)

61

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals

USER RESEARCH

CONTENTSTRATEGY

DESIGN IN TEXT

VISUALSTYLETIL.ES

CONVERT TO HTML

(depending on project context)

WIREFRAME

VISUALDESIGN

PROTOTYPE

TEST

SKETCH

62

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals

HTML STYLE GUIDE

RWDPROTOTYPE

USER RESEARCH

CONTENTSTRATEGY

DESIGN IN TEXT

VISUALSTYLETIL.ES

CONVERT TO HTML

(depending on project context)

WIREFRAME

VISUALDESIGN

PROTOTYPE

TEST

SKETCH

63

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

RESPONSIVE RESOURCES

64

GETTING STARTED

Read these books

Start here

http://www.alistapart.com/articles/responsive-web-design

http://futurefriend.ly/

Get knee deep in code

http://www.html5rocks.com/en/mobile/responsivedesign/

http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1

65

RESPONSIVE PROCESS

Stephan Hay’s Responsive Design Workflowhttp://www.slideshare.net/stephenhay/mobilism2012

Viljami Salminen’s responsive workflowhttp://viljamis.com/blog/2012/responsive-workflow/

Mark Boulton’s Responsive workflow notes from the Responsive Summit: http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow

Drew Clemen’s Design Process in the Responsive Agehttp://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

Ben Callahan’s Hands-on Responsive Web Designhttps://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12

Yellow Pencil’s Responsive web design processhttp://responsiveprocess.com/

66

RESPONSIVE RESOURCES

As RWD evolves, so will our process

RESS: http://www.lukew.com/ff/entry.asp?1392

Responsive images: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

CSS4 media queries to tackle touch: http://www.netmagazine.com/news/css4-media-queries-tackle-touch-121980

Optimizing for Retina Screens: http://bradfrostweb.com/blog/mobile/hi-res-optimization/

@grigs@scottjehl@stephanhay@adactio

@stephanierieger@bryanrieger@globalmoxie@wilto

@rwd@beep@brad_frost@lukew

and more: http://twitter.com/pkattera/rwd

Stay up to date

67

THANKS@PKATTERA UXRAVE.COM

68