Why Prototype? · user interface design, rapid prototyping. is the process of quickly mocking up...
Transcript of Why Prototype? · user interface design, rapid prototyping. is the process of quickly mocking up...
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