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. 5 . I’ll admit it. Back then. I was recommending 960px fixed width.

MY 2010 .

2011: GOODBYE TIMBUKTU. HELLO NEW YORK What’s this “responsive web design” thing you speak of? 7 .

Media Queries Ethan Marcotte. grid based layout 2. and 3. Flexible images and media. A flexible. Responsive Web Design 8 . WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN? 1.SO.

Adaptive Web Design via Brad Frost 9 . To me.RESPONSIVE WEB DESIGN VS ADAPTIVE WEB DESIGN “Adaptive web design is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). Adaptive web design is just another term for progressive enhancement…” ADAPTIVE THIS IS RESPONSIVE Aaron Gustafson.

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 .

not fixed pixel width interfaces.WHY CHANGE OUR PROCESS? To increase efficiency Save time and make money. 14 . To design better websites Design systems.

fixed-canvas. inflexible process.” Mark Boulton.WHY CHANGE “RWD comes under criticism for not being commercially viable. on responsive workflow 15 . It’s because it’s trying to be shoe-horned into an existing.

IF YOU DON’T CHANGE 16 .

RESPONSIVE PROCESS (ALPHA) 17 .

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 . market info and company news.CASE STUDY FINANCIAL ADVISORS RESPONSIVE SITE Project Details: An existing Financial Advisors website that includes basic profile information. Advisors update their page via a CMS.

make a selection.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. 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 Client’s 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. Visual. Tech TEST PROTOTYPE USER RESEARCH CONTENT STRATEGY SKETCH VISUAL DESIGN WIREFRAME RWD PROTOTYPE Starting mobile first 24 . Visual. UX. UX Content Planner. Tech Prototype handover to client UX. Visual. Tech Iterative design & development UX.

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 .

Content Strategy for the Web 28 . your web content is useless unless it does one or both of the following: .Supports a user (or customer) in completing a task” Kristina Halvorson.TIPS CONTENT STRATEGY: A USEFUL RULE OF THUMB “Generally speaking.Supports a key business objective .

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 .

fixed position side nav 43 .CASE STUDY KEEPING PAGES BALANCED: SOLUTIONS Content priority Two column layout. dynamic grid layout One column.

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: 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 .

The text should communicate the essence of the page. write down the content for each page in text form.DESIGNING IN TEXT Simply. Tools like Markdown and Pandoc help convert text files to HTML. 48 .

STYLE TILES BY SAMANTHA WARREN http://styletil.es/ 49 .

com/static/reference/styleguide/ 50 .rs by Simple Bits Starbucks style guide http://patternprimer.HTML STYLE GUIDES Get started early Use throughout the project Add responsive patterns Pattern Primer by Jeremy Keith Pea.com/ http://pea.rs/ http://www.adactio.starbucks.

It can be the browser. InDesign or anything else that feels right. Photoshop.” Viljami Salminen. Fireworks. on responsive workflow 51 .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.

STOP. AND LISTEN. 52 . COLLABORATE.

WHAT ARE OTHERS DOING? 53 .

MARK BOULTON

1. Sketch 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 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 .

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.

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

RESPONSIVE RESOURCES 64 .

com/en/mobile/responsivedesign/ http://www.html5rocks.com/tutorials/build-responsive-site-week-designing-responsively-part-1 65 .ly/ Read these books Get knee deep in code http://www.netmagazine.com/articles/responsive-web-design http://futurefriend.alistapart.GETTING STARTED Start here http://www.

markboulton.co.com/blog/2012/responsive-workflow/ Mark Boulton’s Responsive workflow notes from the Responsive Summit: http://www.com/ 66 .com/u/bencallahan/p/hands-on-responsive-web-design?slide=12 Yellow Pencil’s Responsive web design process http://responsiveprocess.net/stephenhay/mobilism2012 Viljami Salminen’s responsive workflow http://viljamis.com/2012/05/30/design-process-responsive-age/ Ben Callahan’s Hands-on Responsive Web Design https://speakerdeck.smashingmagazine.slideshare.uk/journal/comments/responsive-summit-workflow Drew Clemen’s Design Process in the Responsive Age http://uxdesign.RESPONSIVE PROCESS Stephan Hay’s Responsive Design Workflow http://www.

lukew. so will our process RESS: http://www.RESPONSIVE RESOURCES As RWD evolves.netmagazine.asp?1392 Responsive images: http://www.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 .alistapart.com/ff/entry.com/news/css4-media-queries-tackle-touch-121980 Optimizing for Retina Screens: http://bradfrostweb.com/articles/responsive-images-and-web-standards-at-the-turning-point/ CSS4 media queries to tackle touch: http://www.

COM 68 THANKS .@PKATTERA UXRAVE.