Why Prototype?

Ben Morton

What are we going to cover today?

• The UX framework• UCD Process• Rapid prototyping – what is it?• Rapid prototyping – the process• The benefits of prototyping• Different types of prototype

The UX framework and UCD process

What is UX?Business

needsCustomer

needsUX• User Experience!• It means taking your

customer’s needs into account at every stage of your product lifecycle

• It encompasses all aspects of the end-user's interaction with our company, services, and products

• It needs to take into account our business needs as well• It is the design behind the visual

The UX framework and UCD process

And what is UCD?

• User-Centered Design is a process

• Using research and analysis of our customers behaviours, we apply it to all kinds of projects

• UCD is a tried and tested approach

The UX framework and UCD process

RESEARCH

•Audience Surveys•Business

Requirements•Competitor

Benchmarking•Concept Testing

Outcomes•Desk-based Research•Diary Studies•Behavioural Clusters•In-depth Interviews

MODEL

•Content Audit•Information

Architecture•Lo-fi Prototype

Sketches•Mental Model/Content

Model•Personas•Scenarios and Use

Cases•Storyboarding /

customer journeys

ARCHITECT

•Clickable Prototypes•Content Strategy•Elements/ Modules/

Functional blocks•Final Wireframes•Information

Architecture Blueprints•Iterative Wireframes•Paper Prototyping•Templates

DESIGN

•Creative Elements•Creative Templates•Design Assets•Design Guides

OPTIMISE

•Benchmark Testing Reports

•Competitor Monitoring Reports

•Customer Intelligence•Insights Reports•Policy Documents•AB & MVT testing

https://www.youtube.com/watch?v=Ovj4hFxko7c

The UX framework and UCD process

What is rapid prototyping?

“A picture speaks a thousand words”

Using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. In an iterative approach to user interface design, rapid prototyping is the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers.

Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

The rapid prototyping process

1. PrototypeConvert the project owners’ description of the solution into mock-ups, factoring in user experience standards and best practices

2. ReviewShare the prototype with stakeholders and evaluate whether it meets their needs and expectations.

2. RefineBased on feedback, identify areas that need to be refined or further defined and clarified.

The rapid prototyping process

“I have not failed, I’ve just found 10,000 ways that won’t work”Thomas Edison

Benefits of prototyping

• Prototyping is generative

• Communicates using show and tell

• Reduces misinterpretation

• Saves time, effort and money

Benefits of prototyping

• Allow you to test different layouts and agree on the most effective version

• Prototypes can have working navigation so UX (User Experience) teams can test versions and agree on the most customer friendly navigation routes and interactive elements

• Creates a feedback loop, which ultimately reduces risk

Types of prototypeLow fidelityThe Low-Fi prototype has elements like the navigation and main templates set up. These pages are usually made up of grey blocks and subtle notes to indicate what is going on. They can be interactive versions of wireframes

The Low-Fi version will be created in full scale and will cater for the requirements of responsive design if specified.

Types of prototypeMedium fidelityThe Low-fi version is built upon and interactions are created using widgets.

Complex features like forms and animations can be added so stakeholders can get a feel for how the functional elements will work.

Types of prototypeHigh fidelityThe hi-fi version should be as close to the finished website / project as possible.

Hi-fi prototypes include design compositions, real images, buttons, graphics and real text. They can also include custom components made with HTML, CSS or JavaScript.

Questions?

Thank you