Hackathon Guide to Application Prototyping

28 Oct 2015

Jay Suthar j.suthar@replyltd.co.uk

UI Designer, Open Reply

Fergus O’Callaghan f.ocallaghan@replyltd.co.uk

UX Designer, Open Reply

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

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

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/

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/

6

Persona Template

Name Age

Profession

Behavioural Demographic

Pain Points (Needs)

Serve By (Solution)

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.

8

User Page Flow Example

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

10

Rapid Prototyping

What’s a Prototype?

Value of Prototyping

Range of Prototypes

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

12

Value of Prototyping: 1. Communication & collaboration

13

Value of Prototyping: 2. Prototyping is generative

14

Paper Sketching + Marvel (Mobile & Web Prototype)

15

Marvel Prototype

Add Images Link Pages Select Pages Choose Transition

marvelapp.com

16

Value of Prototyping 3. Check Feasibility & Reduce Waste

17

Value of Prototyping 4. Identify usability issues early

!18

Range of Prototypes

LO-FIDELITY

Slower, Detailed, Tangible

HI-FIDELITY

Quick, Simple, Rough estimate

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

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.

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

22

Google Developers on Usability Testing

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

24

What is Gamification and how does it work?

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

26

And Finally….Some Inspiration!

Thank you & Best of Luck today

28 Oct 2015

Thank you & Best of Luck today

28 Oct 2015

Thank you & Best of Luck today

28 Oct 2015

Thank you & Best of Luck today

28 Oct 2015