LOGO

Household Management Mobile Application

Antonius HermawanDavid VidalNga Nguyen

ww

w.t

hem

egal

lery

.com

DNA

Contents

on Project Overview & Demo1

Prototype Development 2

Usability Test Results3

Lessons4

ww

w.t

hem

egal

lery

.com

DNA

Overall Project Process

1st Interview1st Analysis & Improvement2nd Pilot Interview2nd Analysis & Improvement

Observation & InterviewElaborate task scenario

Identify ProblemsSolution Proposed

High Fidelity Prototype

Low Fidelity Prototype

User & Task Analysis

Problems & Scenario

3rd Interview3rd Analysis & Improvement4th Interview4th Analysis

ww

w.t

hem

egal

lery

.com

Problems & Scenario

What to buy? Checking fridge

Checking expense Shopping

ww

w.t

hem

egal

lery

.com

Company Logo

User & Task Analysis

Finance

Shopping

Health

HMMTasks

Menu

FridgeUser Roles Family Single Sharing GroupsCore F Extended F Woman Man

General CharacteristicsOne wife, one husband & 2

childrenCore F with

grandParents Individuals living together and sharing

Usability Objectives

(ranking from 1 - not important to

5 - very important)

Efficiency 5 5 4 4 4Accuracy 5 5 5 5 5Reliability 3 3 3 3 3

Satisfaction 3 3 3 3 3Memorability 3 3 3 3 3Learnability 4 4 4 4 4

Clarify 4 4 4 4 4Comprehensibility 4 5 4 4 4

Attractiveness 2 2 2 2 2

ww

w.t

hem

egal

lery

.com

Company Logo

Prototype Development

ww

w.t

hem

egal

lery

.com

Navigation MapFinance Health

ww

w.t

hem

egal

lery

.com

Company Logo

Demo

ww

w.t

hem

egal

lery

.com

Company Logo

Analysis Problems Reported

ww

w.t

hem

egal

lery

.com

Company Logo

Low Fidelity- 1st Interview

7 subjects.System usability scale6 problems reported.

Problem Id Problem name Priority

P1 Items in the suggestion list LowP2 “+” – Not easy to understand LowP3 Confusions of 2 buttons: “Update fridge” and “Save” MediumP4 Confusion about the next step after doing a list MediumP5 The use of confirmation messages LowP6 A high number of steps to complete a task High

ww

w.t

hem

egal

lery

.com

Company Logo

Low Fidelity- 1st Interview

High numbers of steps

ww

w.t

hem

egal

lery

.com

Company Logo

Low Fidelity– 2nd pilot test

2 subjects1st subject: new user &

outside class- Using System usability scale

2nd subject: expert in usability- Observation

5 problems reported.

Problem Id Problem name Priority Solved

P1 Items in the suggestion list Low OKP2 “+” – Not easy to understand Low OKP3 Confusions of 2 buttons: “Update fridge” and “Save” Medium OKP4 Confusion about the next step after doing a list Medium OKP5 The use of confirmation messages Low OKP6 A high number of steps to complete a task High OK

ww

w.t

hem

egal

lery

.com

Company Logo

Low Fidelity– 2nd pilot test

Inflexible in comparing

Inconsistency

Inconsistency

ww

w.t

hem

egal

lery

.com

Company Logo

Low Fidelity– 2nd pilot test

Inflexible in comparing

ww

w.t

hem

egal

lery

.com

Company Logo

High Fidelity – 1nd Interview

6 subjects5 new users1 old user

System usability scale5 problems reported.

Problem Id Problem name PriorityP1 To put a default value when creating a new item MediumP2 It’s difficult to read the lateral tabs LowP3 Confusion between system configuration and shopping

list creationLow

P4 The price in the category couldn’t be changed and it can vary per brand

Medium

P5 Confusion between add button and OK button Low

ww

w.t

hem

egal

lery

.com

Company Logo

High Fidelity – 1nd Interview

Problem Id Problem name Priority SolvedP1 To put a default value when creating a new item Medium OkP2 It’s difficult to read the lateral tabs Low --P3 Confusion between system configuration and shopping

list creationLow --

P4 The price in the category couldn’t be changed and it can vary per brand

Medium Ok

P5 Confusion between add button and OK button Low Ok

ww

w.t

hem

egal

lery

.com

Company Logo

High Fidelity – 2nd Interview

Problem Id Problem name PriorityP6 Confusion between save button and add to fridge

buttonLow

P7 It was confusing the use of add item button Low

3 subjects2 new users1 old user

System usability scale2 problems reported.

ww

w.t

hem

egal

lery

.com

Company Logo

AnalysisMeasurements & Satisfactions

ww

w.t

hem

egal

lery

.com

DNA

Measurements

UsersScenario 1 Scenario 2

Duration Difference from best case

Duration Difference from best case

User 1 6:27 1: 29 8:40 6:40User 2 8:40 3: 42 3:05 1:5User 3 12:35 7:37 12:40 10:40User 4 10:41 5: 43 5:98 4:38

Users # Errors in scenario 1 # Errors in scenario 2

User 1 3 3User 2 2 1User 3 5 5User 4 5 10

ww

w.t

hem

egal

lery

.com

Company Logo

Specification

Not yet availableDAVID’s task

Usabilityattribute

Measuringinstrument

Value to bemeasured

Worst acceptablelevel

Planned target level

Best possible level

Initial performance

Fill a shopping list (Task 1, step 2)

Length of time for technical users

     

Initial performance

Add an item to the fridge. (Task 2, step 4)

Error rate      

Initial performance

Fill a shopping list.(Task 1, step 2)

Length of time for non-technical users.

     

Learnability Update the fridge (Task 2, step 5)

Error rate      

Advanced Featureusage

See the content of the fridge(Task 2 step 3)

Task completion

     

Retainability Fill a shopping list.(Task 1, step 2)

Number of errors after using the function by the second time.

     

ww

w.t

hem

egal

lery

.com

MeasurementsHeuristic

# Problems -low-fidelity prototype

# Problems - high-fidelity prototype

Visibility of system status 0 0Match between system and real life 2 1User control and freedom 2 0Consistency and standards 0 1Error prevention 1 1Recognition rather than recall 3 2Flexibility and efficiency of use 0 0Aesthetic and minimalist design 2 2Help user recognize from errors 1 0Help and documentation 0 0

Visibi

lity of

syste

m statu

s

Match b

etwee

n syst

em an

d rea

l life

User co

ntrol

and f

reedo

m

Consi

stency

and s

tanda

rds

Error

preven

tion

Recog

nition

rathe

r than

recal

l

Flexib

ility a

nd effi

ciency

of us

e

Aesth

etic a

nd m

inimali

st de

sign

Help us

er rec

ogniz

e, dia

gnose

, and

recov

er fro

m error

s.

Help an

d docu

mentat

ion

0123

# Problems reported in low-fidelity # Problems reported in high-fidelity

ww

w.t

hem

egal

lery

.com

Company Logo

Problem severity for the different prototypes

0

1

2

3

4

5

6

Low Medium High

Severity

# of

pro

blem

s

Low-fidelity prototype

High-fidelity prototype

Satisfaction Questionnaire Results

ww

w.t

hem

egal

lery

.com

Company Logo

Satisfaction Questionnaire Results

Average of satisfaction results

00.5

11.5

22.5

33.5

44.5

Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10

Questions

Ave

rage

High-fidelity prototype

Low-fidelity prototype

ww

w.t

hem

egal

lery

.com

Company Logo

Analysis Tabbing can help user to

Understand their position in the system Decrease learning curve of the user

Tabbing can help usability design on Help reduce steps of page to achieve our goals Make our system more integrated

We infer this by comparing low and high fidelity measurement result

ww

w.t

hem

egal

lery

.com

Company Logo

Future Work Implement the finance and meal modules

To test the system with a more diverse population. For example, to include more housewives

ww

w.t

hem

egal

lery

.com

Company Logo

Lessons Learned

The paper prototype was a useful tool to discover a good interface design taking little effort in its creation

The use of the usability heuristics and the scenarios help a lot to discover usability problems of an application

A navigation map helps to develop system with high-complex workflows

ww

w.t

hem

egal

lery

.com

Company Logo

Course Lesson Learn Develop product concept Understand context use of product User behavior analysis that use the product How to design interaction based on heuristic,

product concept, context of use, and user behavior

Create prototype Create specification as our target for usability Evaluate our design to user based on time, many

errors, heuristic

ww

w.t

hem

egal

lery

.com

Company Logo

Q & A

LOGO