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.

1. April 2013
Content first, designing
in the browser

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?
http://www.flickr.com/photos/matterphotography/2739799786/