Design and build projects are often difficult to kick-off, especially when you're strugglilng to convey your ideas and understand the solutions being suggested. This can lead to delays, confusion and potential rework. Sound familar? Rapid prototyping provides a quick and visual solution to identifying, documenting and validating project requirements in an interactive way. In this session Jamie will take you through examples of rapid prototypes and show you how this approach can bring your projects to life and reduce development time, costs and help to maintain your relationship with your clients. GET IN TOUCH WITH SIGMA This presentation is from Camp Digital, a free, one-day event in Manchester exploring some of the most important and emerging themes in the digital industry. To see more presentations and videos from the day visit: http://campdigital.wearesigma.com/2013/. Camp Digital was brought to you by Sigma. We are a leading specialist in User Experience consulting and design, information management, and web technologies. We provide research, analysis, design, development and support services, with specific expertise in usability, accessibility, content and document management, websites, intranets and online applications. If you think we can help you call us on 01625 427718 or email hello@wearesigma.com.

1. BRINGING PROJECTS TO LIFE
Through Rapid Prototyping
Jamie Clouting
Technical Consultant
Sigma UK

2. Agenda
What is a prototype?
Why do we need prototypes
What options are available for your project?
Examples of a real project
The benefits
A example timeline example

3. What is prototyping
A prototype is an early sample or model built to test a
concept or process or to act as a thing to be
replicated or learned from ~ Wikipedia
Interaction Design (IxD) defines the structure and
behaviour of interactive systems ~ IxDA
“
“

4. WHY DO
WE NEED
PROTOTYPES?

5. WHY DO
WE NEED
PROTOTYPES?
This may be familiar…

6. What the client wants…

7. What the developers think the client
needs…

8. Building happens behind closed doors

9. Building happens behind closed doors
Excitement builds…

10. What gets delivered..!

11. HOW CAN
PROTOTYPING
HELP?

12. How can prototypes help
Identify
Document
Validate

13. WHERE DO WE START?

14. Where do we start?
Horizontal (pages & navigation)
Vertical
(functionality)

15. Low-fidelity
Horizontal (pages & navigation)
Vertical
(functionality)
Low

17. Sketches

19. Rough concepts

20. Gives you a layout
guide

21. Low-fidelity
+ Layout
+ Expectation setting
Horizontal (pages & navigation)
Vertical
(functionality)
Low

22. Medium-fidelity
+ Layout
+ Expectation setting
Horizontal (pages & navigation)
Vertical
(functionality)
Low
Medium

23. Launch Prototype

24. Medium-fidelity
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Horizontal (pages & navigation)
Vertical
(functionality)
Low
Medium

25. High-fidelity
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Horizontal (pages & navigation)
Vertical
(functionality)
Low
Medium
High

26. Launch Prototype

27. High-fidelity
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Horizontal (pages & navigation)
Vertical
(functionality)
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

28. Audience
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Internal
project
team
Horizontal (pages & navigation)
Vertical
(functionality)
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

29. Audience
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Internal
project
team
Other
members of
the business
Horizontal (pages & navigation)
Vertical
(functionality)
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

30. Horizontal (pages & navigation)
Vertical
(functionality)
Audience
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Internal
project
team
Other
members of
the business
External
stakeholders
and users
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

31. Horizontal (pages & navigation)
Vertical
(functionality)
Story telling
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Internal
project
team
Other
members of
the business
External
stakeholders
and users
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

32. Quality expectation
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Internal
project
team
Other
members of
the business
External
stakeholders
and users
Forgiving
Horizontal (pages & navigation)
Vertical
(functionality)
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

33. Quality expectation
+ Layout
+ Expectation setting
+ Flow design
+ Simple interactions
+ Internal buy-in
Internal
project
team
Other
members of
the business
External
stakeholders
and users
Forgiving
Expect
polish
Horizontal (pages & navigation)
Vertical
(functionality)
+ Complex
interaction
+ Animation
+ Look & feel
+ Functionality
Low
Medium
High

34. Project timeline
Day 0 Day 90
Wk 1
- Client brief
- Sketches
- Wireframes

35. Project timeline
Day 0 Day 90
Wk 1
- Client brief
- Sketches
- Wireframes
Wk 2 - 3
- Design workshop
- Creative
- Look and feel

36. Project timeline
Day 0 Day 90
Wk 1
- Client brief
- Sketches
- Wireframes
Wk 2 - 3
- Design workshop
- Creative
- Look and feel
Wk 4
- 2 day
workshop with
Stakeholders,
Devs & Users

37. Project timeline
Day 0 Day 90
Wk 1
- Client brief
- Sketches
- Wireframes
Wk 2 - 3
- Design workshop
- Creative
- Look and feel
Wk 4
- 2 day
workshop with
Stakeholders,
Devs & Users
Wk 5 - 13
- Working up flows
and user tasks
- Polishing design

38. Project timeline
Day 0 Day 90
Wk 1
- Client brief
- Sketches
- Wireframes
Wk 2 - 3
- Design workshop
- Creative
- Look and feel
Wk 4
- 2 day
workshop with
Stakeholders,
Devs & Users
Wk 5 - 10
- Working up flows
and user tasks
- Polishing design
Wk 11 - 12
User testing
with 10 users
and analysis

39. Conclusion
Prototyping can have real benefits to your project, no matter what
the budget
Prototyping can lead to increased buy-in from internal
stakeholders and users
Prototyping can save you money by reducing the amount of time
it takes you to get consensus on your project
Prototyping can highlights issues that are easier to fix before any
code is written

40. THANKS, QUESTIONS?
jamie.clouting@sigma.se
wearesigma.com
@wearesigma / #CampDigital

41. UX Training at Sigma
Sigma is launching a range of new User Experience training
services over the next few months, including courses in:
Rapid prototyping and solution design with Axure
Writing for the web
Intro to UX – tools and techniques
Tree testing with Treejack
If you’re interested in finding out more about these courses please
visit the Sigma stand over by the registration desk.