Content First, Designing in the Browser

A practical, UX-driven approach to designing in the browser. Based on a real life case we share our experiences with incorporating a tightly integrated, iterative and co-creative process between UX designer, frontend developer and client.

Transcript

1. Content first, designing in the browser April 2013
2. LIV MADSEN FRONTEND DEVELOPER @livmadsen METTE SCHOU UX DESIGNER @mettecharita @creuna_dk
3. WARNING
4. Our talk may include buzzwords and concepts, such as •  Content First (whoa buzz!) •  UX-driven •  Responsive design (whoa, last year buzz) •  Progressive enhancement •  Designing (/deciding) in the browser •  Immersive developing
5. WE’LL SHARE REAL LIFE EXPERIENCES
6. The emergence of responsive web design have made it very difficult to employ the traditional prototyping methods in a meaningful way… 6
7. OUR APPROACH
8. … to client cooperation •  Align expectation •  State the objectives •  Embrace close cooperation •  Be transparent •  Map resources (honestly) and establish clear responsibilities
9. … to user centered design •  Know end user’s motivations, questions and challenges •  Stick to the defined objectives •  Clear the path! •  use simple, clear copy, e.g. keep product in focus (show don’t tell) •  Use explicit directional cues (Be visual) •  Remember white space, color contrast and sequencing (support scanning and scrolling)
10. •  Think content first (text, images, video etc.) •  Create the right containers and UI elements in order to create an emotionally engaging experience •  Establish content levels •  Encourage people to interact with content using strong visual cues •  Save organizational resources /ease implementation •  Choreograph visual content and page flow •  Making key statements decodable at a glance •  Be tap-worthy 10
11. … to content first implementation •  Progressive enhancement – start with the content, end with behavior •  Responsive – a mix of flexible grids and layouts, media queries, flexible images •  Performance and data structures is also design •  Designing/deciding in the browser
12. IT’S A TEAM EFFORT
13. THE CASE – BOCONCEPT CAMPAIGN SITE HTTP://CAMPAIGN.BOCONCEPT.COM
14. •  Client was tackling growing mobile audience and came to us for help •  Design was ready •  All they needed was a little help to turn it into a reusable template in the CMS •  Tight deadline (and budget)
15. INITIAL CHALLENGES
16. •  At kickoff content was unknown •  Release in 60 countries •  40 languages to be added by independent editors •  No content strategy
18. RESPONSIVE DESIGN = CONTENT FIRST, DESIGNING IN THE BROWSER
22. DESIGNING IN THE BROWSER? DID YOU DO AWAY WITH PHOTOSHOP?
23. NOT ENTIRELY!
24. SO… DID YOU DO AWAY WITH AXURE?
25. NOT ENTIRELY WE’LL GET BACK TO THAT
26. ARTEFACTS – LOWER THE BRIDGE
27. •  Content strategy •  + telling the story, accommodating scanners and jumpers •  Chunking, structuring and sequencing the content •  Screen dumps and videos •  Illustrate navigation principles, interactions and transitions •  Creating a responsive grid – thinking cross device •  Examples of colors and textures •  Hand-drawn sketches •  Illustrates IA and red routes/page flow •  Style Tiles / Mood board •  Collaborative tool •  Supports designing in the browser •  Basic HTML PoC •  Illustrate grid, transitions and page flow 27
30. Defining the Minimal Viable Product (MVP) 30
37. BACK TO THE DRAWING BOARD!
39. SO YOU MENTIONED AXURE EARLIER….
43. TAKE-AWAYS
44. Content First •  A great foundation •  An inspiring way to work – continuous drive •  Not a silver bullet – it still takes time •  Requires new deliverables and adapted client communication •  A team effort •  if resources are not available, this is not for you •  Transparency pays, be inclusive
45. WILL WE DO IT AGAIN? YESSIR, H5IR
46. DIY •  Grab any and all team members you can access •  Include the customer •  Focus on tasks at hand as they appear •  Allow diving (dedication)
47. QUESTIONS?