Slides from my talk at J Boye Web & Intranet Conference Philadelphia 13. The old adage, “a picture speaks a thousand words” captures what user interface prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. (If you're looking for the 1000 words equivalent: http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/)

1. Visualize The Future With Rapid Prototyping
Lyndon Cerejo
Philadelphia „13
Web & Intranet Conference
May 09, 2013

2. 2
It‟s a
snake
It‟s a
spear
It‟s a
wall
It‟s a
rope
It‟s a
tree
Parallel today: Everybody thinks they know what‟s being built, but each has a different, conflicting
vision of what it looks like
(story depicted above: http://en.wikipedia.org/wiki/Blind_men_and_an_elephant)

3. 3
Requirement: Users should be able to tell the time of day
<Visualized differently>

4. 4
Agenda
 Prototypes
 Rapid Prototyping
 Prototyping Process
 Prototype Fidelity
 Example
 A Few Recommendations

5. 5
Prototype: early model built to test a concept
The Audi ASQ (2009): car, boat and submarine (useful in 2040 with global warming?)

6. 6
Prototype: visual representation of the future state
A high fidelity visualization of a “non-SharePointy” site

7. 7
Prototypes can be used to validate feasibility, interest, …

8. 8
… and, to ensure that everyone has a common understanding

9. 9
Rapid Prototyping creates a common understanding
 Visuals Vs. Words
 Collaborative
 Facilitates experimentation
 Feedback - early and often
 Reduces risk

10. 10
Typical Requirements Document

11. 11
Wireframe representation (non-UXed up)

12. 12
1 picture > 1000 words (2178 in this case)

13. 13
Rapid Prototyping: Better Design Faster
Scenario Screens Prototype - Review - Refine Finalize

14. 14
Identify Scenarios

15. 15
Select Screens: Complex, New, Changes

16. 16
Plan Iterations

17. 17
Decide Fidelity (based on audience and purpose)

18. 18
Low Fidelity (sketchy)
Use for
- early stage prototyping
- refined sketches
Watch out
- difficult to replicate
- not interactive
Tools
- Pencil and paper
- UI Stencils (watch out)
- The Back of the Napkin (Dan
Roam)
The key
- throwaway
Example: Paper Sketches

19. 19
Medium Fidelity (blocky)
Use for
- more formal appearance
- reduce focus on design
- templates, stencils widgets
Watch out
- Learning curve (tool)
- Client attachment
- Detail alert
Tools
- Visio
- PowerPoint (Keynotopia)
- Balsamiq
- Omnigraffle
- Axure RP
Example: Wireframes

20. 20
High Fidelity (shiny)
Use for
- communicate form & function
- interactivity
- agreement & signoff
Watch out
- Learning curve (tool)
- Client attachment
- Detail alert
- Design discussions
Tools
- iRise
- JustInMind
- Keynotopia templates
- Photoshop
Example: HTML prototypes

21. 21
Sketchy? Blocky? Shiny? How do you decide?
 Who is the intended audience?
 What is the purpose of the prototype?
Purpose Fidelity
• Validate requirements with stakeholders
• Compare UX concepts
• Confirm that users can achieve their goals
Low
• Focus on UX design instead of visual design
• Focus on structure, layout and content
• Screen specifications
Medium
• Signoff on visual design and UX design
• Visual specifications for offshore development team
• Usability testing
• Change management
High

22. 22
SharePoint Custom Branding Example
Wireframes Visual Design
High fidelity visualization
SharePoint considerations
Time to simulate reduced by
weeks compared to
developing in SharePoint

23. 23
High Fidelity Prototype & SharePoint Implementation
(no, we‟re not playing spot the differences)

24. 24
Recommendations
Dos
Collaborate
Set expectations
Reuse, reuse, reuse.
Realism
Don’ts
Overpromise
Keep changing
Perfection
Don‟t prototype everything

25. 25
Prototyping in Chocolate
http://www.sagres.pt/sagrespretachocolate/ making of: http://vimeo.com/24820327

26. 26
Questions?
http://bit.ly/protolinks
Related Resources
(articles, tools, template downloads)

27. 27
Still wondering how to read the time on the binary clock (slide 3)?
http://en.wikipedia.org/wiki/File:Binary_clock.svg

28. The information contained in this presentation is proprietary.
© 2013 Capgemini. All rights reserved.
www.capgemini.com
Lyndon Cerejo
lyndon.cerejo@capgemini.com
http://www.linkedin.com/in/lycerejo
http://bit.ly/protolinks