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 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 Fixed width
pixel designs were all the rage Desktop screens were getting larger Mobile users were visiting our sites And yes, I’ll admit it. Back then, I was recommending 960px fixed width. 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

RESPONSIVE WEB DESIGN VS ADAPTIVE
WEB DESIGN “Adaptive web design is about ADAPTIVE creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, Adaptive web design is just THIS IS another term for progressive RESPONSIVE enhancement…” 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 COPY VISUAL DESIGN DEV TEST 12

DOES THIS PROCESS SOUND FAMILIAR?
PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN Devs are lumped with too many DEV important design decisions 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. It’s because it’s trying to be shoe-horned into an existing, fixed-canvas, inflexible process.” Mark Boulton, on responsive workflow 15

IF YOU DON’T 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 Business
Objectives User Goals RESPONSIVE SITE Increase the number of Prospects: Browse for prospects contacting Advisors, make a selection, Advisors contact Advisor Increase the number of Existing clients: Get customer referring market updates, login to Advisors 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
Client’s Business Supporting observed user Facilitate customer RESPONSIVE Objectives behavior referrals To be future Competitive Building friendly advantage 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
Content Iterative design & development Prototype handover to client Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech TEST PROTOTYPE USER CONTENT RWD RESEARCH STRATEGY SKETCH PROTOTYPE VISUAL DESIGN WIREFRAME Starting mobile first 24

CASE STUDY USER PERSONAS SCENARIOS
RESEARCH 25

CASE STUDY CONTENT INFORMATION CONTENT
ARCHITECTURE REFERENCE DIAGRAMS 26

CASE STUDY CONTENT INVENTORY AND
PRIORITIZATION Mobile content Current website content Content inventory 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 TEST PROTOTYPE SKETCH 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 VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE * Sketching and testing throughout 33

CASE STUDY ITERATIVE DESIGN AND
DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE PROTOTYPE * Sketching and testing throughout 34

CASE STUDY ITERATIVE DESIGN AND
DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 5 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME RWD PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE * Sketching and testing throughout 35

CASE STUDY INTERACTION SKETCH WIREFRAME
PROTOTYPE DESIGN 36

CASE STUDY VISUAL VISUAL GRIDS
AND DESIGN LANGUAGE 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 client’s hands 44

CASE STUDY PROTOTYPE: Cheap Fast
Focus LOW FIDELITY [DEMO] 45

CASE STUDY PROTOTYPE: Treatment of
media Testing visual styles on Something the client can show HIGH FIDELITY assets more devices 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 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 1. Sketch BOULTON 2.
Prototype 3. Design 4. Iterate 5. Talk Mark Boulton’s, notes, thoughts and conclusions Responsive workflow - Responsive Summit, London 24 February 2012 http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow 54

STEPHEN 1. Content inventory 2.
Content reference wireframes HAY 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 CONTENT RESEARCH STRATEGY IA and content reference diagram 59

MY RESPONSIVE PROCESS FOR THE
NEXT PROJECT (depending on project context) USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT 60

MY RESPONSIVE PROCESS FOR THE
NEXT PROJECT VISUAL (depending on project context) STYLETIL.ES USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT SKETCH CONVERT TO HTML 61

MY RESPONSIVE PROCESS FOR THE
NEXT PROJECT VISUAL TEST (depending on project context) STYLETIL.ES PROTOTYPE USER CONTENT DESIGN RESEARCH IN TEXT SKETCH STRATEGY VISUAL DESIGN CONVERT WIREFRAME TO HTML 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 VISUAL TEST (depending on project context) STYLETIL.ES PROTOTYPE USER CONTENT DESIGN RESEARCH IN TEXT SKETCH STRATEGY VISUAL DESIGN CONVERT WIREFRAME TO HTML Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals 63

RESPONSIVE RESOURCES
64

Start here GETTING http://www.alistapart.com/articles/responsive-web-design STARTED
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 Stephan Hay’s Responsive Design
Workflow http://www.slideshare.net/stephenhay/mobilism2012 PROCESS Viljami Salminen’s responsive workflow http://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 Age http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Ben Callahan’s Hands-on Responsive Web Design https://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12 Yellow Pencil’s Responsive web design process http://responsiveprocess.com/ 66

RESPONSIVE As RWD evolves, so
will our process RESOURCES 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 @grigs @stephanierieger @beep @scottjehl @bryanrieger @brad_frost @stephanhay @globalmoxie @lukew @adactio @wilto and more: http://twitter.com/pkattera/rwd 67

THANKS
@PKATTERA
UXRAVE.COM
68