axa hackathon: user centric guide to application prototyping
TRANSCRIPT
![Page 1: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/1.jpg)
Hackathon Guide to Application Prototyping
28 Oct 2015
Jay Suthar [email protected]
UI Designer, Open Reply
Fergus O’Callaghan [email protected]
UX Designer, Open Reply
![Page 2: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/2.jpg)
2
What We’ll Be Covering
Focusing on the following areas
1. Who you are designing for?2. Rapid prototyping3. Usability testing to validate concepts
![Page 3: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/3.jpg)
User-Centred Design (UCD)
3
User Centric Design
usability.gov/how-to-and-tools/resources/ucd-map.html
danielikim.com/what-is-user-centered-design/
Persona User Needs Task Analysis Competitor Analysis Ethnographic research Interviews
Wireframing Prototyping IA Analysis Co-design workshops
Usability Testing Expert Evaluation Eye-Tracking Accessibility Audit
Customer Surveys Analytics
A/B Testing Multi-variate Testing
![Page 4: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/4.jpg)
4
Personas
A persona is a fictional representation of a particular audience segment for a website / product / service you are designing, based on real world needs of customers and shareholders.
It captures a person’s motivations, frustrations and the “essence” of who they are.
http://theuxreview.co.uk/personas-the-beginners-guide/
![Page 5: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/5.jpg)
5
How Do Personas Help Us?
1. Build Empathy - see the world through the user’s eyes.
2. Develop Focus - who you are building the software for
3. Shared Understand - across teams & business of who your user is
4. Help make Decisions - putting yourself in the user’s shoes
5. Frame the User’s Needs - help to solve a problem
http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/
![Page 6: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/6.jpg)
6
Persona Template
Name Age
Profession
Behavioural Demographic
Pain Points (Needs)
Serve By (Solution)
![Page 7: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/7.jpg)
7
Task Analysis Questions
Who is your user? What is the context they are using it? Identity the key tasks? What tasks are optional? What materials do you need?
Task analysis is the process of learning about users by observing them in action to understand in detail how they perform their tasks and achieve their intended goals.
![Page 8: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/8.jpg)
8
User Page Flow Example
![Page 9: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/9.jpg)
User-Centred Design (UCD)
9
User Centric Design
usability.gov/how-to-and-tools/resources/ucd-map.html
danielikim.com/what-is-user-centered-design/
Persona User Needs Task Analysis Competitor Analysis Ethnographic research Interviews
Wireframing Prototyping IA Analysis Co-design workshops
Usability Testing Expert Evaluation Eye-Tracking Accessibility Audit
Customer Surveys Analytics
A/B Testing Multi-variate Testing
![Page 10: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/10.jpg)
10
Rapid Prototyping
What’s a Prototype?
Value of Prototyping
Range of Prototypes
![Page 11: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/11.jpg)
11
What’s a Prototyping?
“An approximation of a product (or system) or its components, in some form, for a definite purpose in its implementation” Chua, Leong & Lim, Rapid Prototyping: Principles and Applications
“A prototype is a representative model or simulation of the final system.
Unlike requirements documents and wireframes, prototypes go further than show and tell and actually let you experience the design.” Todd Zaki Warfel, Prototyping: A Practitioner's Guide
![Page 12: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/12.jpg)
12
Value of Prototyping: 1. Communication & collaboration
![Page 13: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/13.jpg)
13
Value of Prototyping: 2. Prototyping is generative
![Page 14: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/14.jpg)
14
Paper Sketching + Marvel (Mobile & Web Prototype)
![Page 15: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/15.jpg)
15
Marvel Prototype
Add Images Link Pages Select Pages Choose Transition
marvelapp.com
![Page 16: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/16.jpg)
16
Value of Prototyping 3. Check Feasibility & Reduce Waste
![Page 17: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/17.jpg)
17
Value of Prototyping 4. Identify usability issues early
![Page 18: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/18.jpg)
!18
Range of Prototypes
LO-FIDELITY
Slower, Detailed, Tangible
HI-FIDELITY
Quick, Simple, Rough estimate
![Page 19: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/19.jpg)
User-Centred Design (UCD)
19
User Centric Design
usability.gov/how-to-and-tools/resources/ucd-map.html
danielikim.com/what-is-user-centered-design/
Persona User Needs Task Analysis Competitor Analysis Ethnographic research Interviews
Wireframing Prototyping IA Analysis Co-design workshops
Usability Testing Expert Evaluation Eye-Tracking Accessibility Audit
Customer Surveys Analytics
A/B Testing Multi-variate Testing
![Page 20: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/20.jpg)
20
Usability Testing
A technique used to evaluate how intuitive a product or service is, whereby facilitators observe participants as they complete tasks in one to one sessions.
Guerrilla Testing used early in the design phase to quickly validate concepts.
Remote Testing usability testing conducted in a different (or ‘remote’) location through screen-sharing software.
Lab Usability Testing more formal where adjacent viewing facilities are provided.
![Page 21: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/21.jpg)
21
Usability Test Protocol
- Rating
Non-leading Question 1) Was this easy or difficult to use
Leading Questions 1) Was this easy to use?
- Set tasks (scenarios) to complete
- Outline Test Scope
- Open questions, non leading
- Start / end points
![Page 22: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/22.jpg)
22
Google Developers on Usability Testing
![Page 23: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/23.jpg)
23
Usability Testing Tips
1. No right or wrong answer! Not a test of your participant.
2. Ask participant talk aloud and share their thoughts
3. “We didn’t design this, so be as open as you can, positive or negative, we just want to measure where our colleagues are at”.
4. “I’ll be quiet to mimic a real world situation, just do as you would normally do when using a website”.
5. Video recording for internal research purposes (with consent)
6. If participant is stuck to let you know and you can help
![Page 24: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/24.jpg)
24
What is Gamification and how does it work?
![Page 25: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/25.jpg)
25
Gamification Techniques: Types of Rewards
http://blogs.clicksoftware.com/index/top-25-best-examples-of-gamification-in-business/
http://www.supercellmedia.com/gamification-in-ecommerce/
http://www.forbes.com/sites/gartnergroup/2013/01/21/the-gamification-of-business/
Points Achievement Badges Filling Progress Bar Virtual Currency Leaderboards
![Page 26: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/26.jpg)
26
And Finally….Some Inspiration!
![Page 27: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/27.jpg)
Thank you & Best of Luck today
28 Oct 2015
![Page 28: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/28.jpg)
Thank you & Best of Luck today
28 Oct 2015
![Page 29: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/29.jpg)
Thank you & Best of Luck today
28 Oct 2015
![Page 30: Axa Hackathon: User Centric Guide to Application Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587b42d11a28ab9c0e8b6073/html5/thumbnails/30.jpg)
Thank you & Best of Luck today
28 Oct 2015