Design process in the responsive age

A UX perspective
Pon Kattera Senior Interaction Designer R/GA @pkattera

14 June 2012: NYC Responsive Web Design Meetup

TONIGHT
A little about me Responsive process (alpha) Responsive process (beta) Resources and tips getting started Questions

TL;DR
Our job now is to create future friendly design systems (not fixed pixel width interfaces). This requires a change in process.

A LITTLE ABOUT ME
Im a senior Interaction Designer at R/GA Im an Australian Im loving New York!

BACK IN 2009
Fixed width pixel designs were all the rage Desktop screens were getting larger Mobile users were visiting our sites

And yes, Ill admit it. Back then, I was recommending 960px fixed width.

MY 2010

2011: GOODBYE TIMBUKTU, HELLO NEW YORK

Whats this responsive web design thing you speak of?

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

RESPONSIVE WEB DESIGN VS ADAPTIVE WEB DESIGN

Adaptive web design is about creating interfaces that adapt to the users capabilities (in terms of both form and function). To me, Adaptive web design is just another term for progressive enhancement

ADAPTIVE
THIS IS RESPONSIVE

Aaron Gustafson, Adaptive Web Design

via Brad Frost

9

DOES THIS PROCESS SOUND FAMILIAR?

PLANNING AND STRATEGY

USER RESEARCH

WIREFRAMES

VISUAL DESIGN

DEV

TEST
10

DOES THIS PROCESS SOUND FAMILIAR?

PLANNING AND STRATEGY CONTENT STRATEGY

USER RESEARCH

WIREFRAMES

VISUAL DESIGN

DEV

TEST
11

DOES THIS PROCESS SOUND FAMILIAR?

PLANNING AND STRATEGY CONTENT STRATEGY

USER RESEARCH Lorem ipsum WIREFRAMES Lorem ipsum VISUAL DESIGN

COPY

DEV

TEST
12

DOES THIS PROCESS SOUND FAMILIAR?

PLANNING AND STRATEGY

USER RESEARCH

WIREFRAMES

VISUAL DESIGN Devs are lumped with too many important design decisions

DEV

TEST
13

WHY CHANGE OUR PROCESS?

To increase efficiency Save time and make money. To design better websites Design systems, not fixed pixel width interfaces.

14

WHY CHANGE
RWD comes under criticism for not being commercially viable. Its because its trying to be shoe-horned into an existing, fixed-canvas, inflexible process.

Mark Boulton, on responsive workflow

15

IF YOU DONT CHANGE

16

RESPONSIVE PROCESS
(ALPHA)
17

CASE STUDY

FINANCIAL ADVISORS RESPONSIVE SITE

Project 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. Current state: Think of the site like a Linkedin for Financial Advisors

18

CASE STUDY

FINANCIAL ADVISORS RESPONSIVE SITE

Business Objectives
Increase the number of prospects contacting Advisors Increase the number of customer referring Advisors

User Goals
Prospects: Browse for Advisors, make a selection, contact Advisor Existing clients: Get market updates, login to their financial accounts

19

TIPS

SHOULD I GO RESPONSIVE FOR MY PROJECT

It depends
Project context Budget and timelines Skill set of your team Client expectations

20

TIPS

Responsive web design may not be the best option right now for your project

21

CASE STUDY

WHY WE WENT RESPONSIVE

Clients Business Objectives

Supporting observed user behavior

Facilitate customer referrals

To be future friendly

Competitive advantage

Building expertise

22

CASE STUDY

OUR APPROACH
Mobile first (content first) responsive web design
Focus on users and content first before sketching mobile screens

23

CASE STUDY

RESPONSIVE PROCESS
User
Planner, UX

Content
Planner, UX, Visual, Tech

Iterative design & development

UX, Visual, Tech

Prototype handover to client

UX, Visual, Tech

TEST PROTOTYPE

USER RESEARCH

CONTENT STRATEGY

SKETCH VISUAL DESIGN WIREFRAME

RWD PROTOTYPE

Starting mobile first

24

CASE STUDY

USER RESEARCH

PERSONAS

SCENARIOS

25

CASE STUDY

CONTENT

INFORMATION ARCHITECTURE

CONTENT REFERENCE DIAGRAMS

26

CASE STUDY

CONTENT INVENTORY AND PRIORITIZATION

Current website content Content inventory Mobile content reference diagram

* Profile information had a separate content inventory

Linear design: think of content devoid of an interface 27

TIPS

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

Kristina Halvorson, Content Strategy for the Web

28

TIPS

SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?

29

CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT

SKETCH

TEST PROTOTYPE

VISUAL DESIGN WIREFRAME

30

CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN

Client check ins: 1

Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME

* Sketching and testing throughout

31

CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN

Client check ins: 1 2

VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME

PROTOTYPE * Sketching and testing throughout

32

CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN

Client check ins: 1 2 3

VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME

VISUAL DESIGN

WIREFRAME

PROTOTYPE * Sketching and testing throughout

PROTOTYPE

33

CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN

Client check ins: 1 2 3 4

VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME

VISUAL DESIGN

VISUAL DESIGN

WIREFRAME

PROTOTYPE * Sketching and testing throughout

PROTOTYPE

PROTOTYPE

34

CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN

Client check ins: 1 2 3 4 5

VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME

VISUAL DESIGN

VISUAL DESIGN

WIREFRAME

RWD PROTOTYPE

PROTOTYPE * Sketching and testing throughout

PROTOTYPE

PROTOTYPE

35

CASE STUDY

INTERACTION DESIGN

SKETCH

WIREFRAME

PROTOTYPE

36

CASE STUDY

VISUAL DESIGN

VISUAL LANGUAGE

GRIDS AND PROPORTIONS

37

38

SPEED IS A DESIGN DECISION

39

TIPS

RWD ISSUES
What screen sizes should I design?
Start at 320px? Then what?

40

TIPS

RWD ISSUES
How do I select breakpoints?
Breakpoints should be device agnostic Let page content determine your breakpoints

41

CASE STUDY

KEEPING PAGES BALANCED: THE PROBLEM

Advisors can choose between 1 and 20 content modules

Where an Advisor removes modules 5 and 9

42

CASE STUDY

KEEPING PAGES BALANCED: SOLUTIONS

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

43

TIPS

RWD ISSUES
Presenting responsive designs to clients
On screen, with all layouts side by side
PROFILE PAGE

Nothing beats placing the prototype in the clients hands

44

CASE STUDY

PROTOTYPE: LOW FIDELITY

Cheap

Fast

Focus

[DEMO]

45

CASE STUDY

PROTOTYPE: HIGH FIDELITY

Treatment of media assets

Testing visual styles on more devices

Something the client can show their boss

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

STYLE TILES BY SAMANTHA WARREN

http://styletil.es/
49

HTML STYLE GUIDES

Get started early Use throughout the project Add responsive patterns
Pattern Primer by Jeremy Keith Pea.rs by Simple Bits Starbucks style guide

http://patternprimer.adactio.com/

http://pea.rs/

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

50

DESIGNING IN THE BROWSER

Creating elements and styles in HTML/CSS
The most important part here is to use a tool which doesnt 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

1. Sketch 2. Prototype 3. Design 4. Iterate 5. Talk

Mark Boultons, notes, thoughts and conclusions Responsive workflow - Responsive Summit, London 24 February 2012
http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow

54

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
Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012
http://www.slideshare.net/stephenhay/mobilism2012

55

VILJAMI SALMINEN

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

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

(depending on project context) USER RESEARCH

58

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

(depending on project context) USER RESEARCH

CONTENT STRATEGY

IA and content reference diagram

59

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

(depending on project context) USER RESEARCH

CONTENT STRATEGY

DESIGN IN TEXT

60

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

(depending on project context) USER RESEARCH

VISUAL STYLETIL.ES

CONTENT STRATEGY

DESIGN IN TEXT

SKETCH

CONVERT TO HTML

61

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

(depending on project context) USER RESEARCH

VISUAL STYLETIL.ES

TEST PROTOTYPE

CONTENT STRATEGY

DESIGN IN TEXT

SKETCH VISUAL DESIGN CONVERT TO HTML WIREFRAME

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

62

HTML STYLE GUIDE RWD PROTOTYPE

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT

(depending on project context) USER RESEARCH

VISUAL STYLETIL.ES

TEST PROTOTYPE

CONTENT STRATEGY

DESIGN IN TEXT

SKETCH VISUAL DESIGN CONVERT TO HTML WIREFRAME

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

63

RESPONSIVE RESOURCES
64

GETTING STARTED

Start here
http://www.alistapart.com/articles/responsive-web-design http://futurefriend.ly/

Read these books

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 Hays Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012 Viljami Salminens responsive workflow http://viljamis.com/blog/2012/responsive-workflow/ Mark Boultons Responsive workflow notes from the Responsive Summit: http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow Drew Clemens Design Process in the Responsive Age http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Ben Callahans Hands-on Responsive Web Design https://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12 Yellow Pencils Responsive web design process http://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/

Stay up to date
@rwd @beep @brad_frost @lukew @grigs @scottjehl @stephanhay @adactio @stephanierieger @bryanrieger @globalmoxie @wilto

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

67

@PKATTERA UXRAVE.COM
68

THANKS