application design & usability report · the application prototype is to be developed...

applicationdesign &

usability report

2012

James Johnson 3902021

INTRODUCTIONINTRODUCTION

Nespresso is a global leader in the industry of coffee related products and home espresso machines. The company is looking to branch out into providing web services, with their new espresso machine range being able to provide internet connectivity and capabilities. The new Nespresso machine range is fully automated, it can hold all of the required ingredients, it can be set ahead of schedule and it can be controlled via remote internet access.

The NespressAPP is a mobile application which will communicate with the new Nespresso machine range. It will potentially facilitate all the necessary control and functionality of the machine, while expanding users reach over the internet, taking advantage of functions such as connecting users and sharing their custom recipes and creations.

Background

Requirements

In accordance with these new capabilities, the NespressAPP will need to offer the following functions and services:

- Creating a custom espresso/coffee - Saving specific recipes/brews - Setting the time of order - Submitting the order - Sharing recepies/brews - Accessing others recipes

The application prototype is to be developed specifically for Apples’s IPhone, and will be introduce to the market on this platform. The application will take advantage of touch usability, offering a more tactile and physical experience.

The application design and usability should reflect Nespresso’s existing young-adult demographic, and should be based around the lifestyle of the average Nespresso customer Audience and Persona.

Pace

SocialTech Savvy

MobilityAesthetic

EducationExperience

The average user is very tech savvy, they enjoy gadgets and the latest in software, wanting to incorporate

technological features into practical everyday aspects of their lives. Aesthetics are important to this group, as it

aids in the enjoyment and feel of the software in question. They understand that the look and style should always be

a reflection of the feel and functions of the application.

The user is somewhat social and outgoing, but also prefers the comfort of being at home with smaller crowds

of close friends and family. Mobility is of minimal importance, and pace is slower, more relaxed and at

ease.

Jane Smith is a young, hard working, fully independent go getter. She loves her work

and is often accused of taking it home with her.

Jane lives just on the outskirts of the city,

and is no stranger to the various independent cafes and small restaurants in the area. She is a big supporter of the local

community, which consist of her closest friends and general social circle.

Jane is a self-proclaimed home-body, and loves nothing more than getting home after

a long day of work, sitting down with a warm beverage and taking time to either work on something creative or entertain

friends and family at her home.

Name: Jane SmithAge: 28Life stage: SingleLeisure activities: Cooking, Reading, Art exhibits, Cafes, Lunch dates, Photography

Work: Works part-time at an advertising agency as an in-house photographer, and freelances in her days off. Works with deadlines, high stress, long hours, and often works from home.

Users & Markets

“Aesthetic, Tech Savvy, and Social”

“All I need in life is good coffee and great conversation.”

USABILITYUSABILITY

Flowchart NavigationTEST 1

Test Scenarios

Test 1 for usability required a test group to trace over the current flowchart and mark the steps involved for various scenarios - demonstrating an understanding of the process, and getting a feel for the information flow.

Test users were each given four copies of the current flowchart wireframe and a brightly coloured pen. They were then asked to draw lines between each screen and sequentially number the buttons to be used, all the way to the end point, as per each of the four scenario.

The purpose was to determine if users could quickly learn and gain an understanding of the steps involved in working their way through each scenario. The users are then in a better position to provide feedback and any suggestions they have regarding the application.

NespressAPP - Flowchart Navigation Test - James Johnson 3902021

scenario _____name ___________________

add

Select timeback

SUBMIT

now!

06050403020100

12

16 sep

111009080706

Start brew My brews Community Stock levels Status

Status


CAPPUCCINO09:00 am, Monday morning,

16th of September, 2012.

1

milk

sugar

foam

cocoa

Start brew next

1/3milk X XX

1t/s Sugar


(samplecolour)

Select timeback

SUBMIT

save

06050403020100

12

16 sep

111009080706


(samplecolour)

milk

sugar

foam

cocoa

co�ee

dragand

drophere

Start brew next


Stock level


cancel brew

edit brew

continue

WARNINGStock levels are too low for thecurrent order request, ensureto top up before continuing.

Stock level


EDIT

DELETE

OTHER05:30 pm, Monday evening,


EDIT

DELETE

con�rm cancel

Order for one: 1/3 milk, 1/3 foam,1/3 espresso, 2 t/s sugar, 1 t/scocoa powder.

At: 09:00 am, Monday morning,16th of September, 2012.

next(default)start brew

My brews

Status

Select

Select Select

Select

Community

Stock level

submit stock ok

con�rm

stock low/insu�cient

Save

add

con�rm

continue

�nish

edit brew

Select timeback

SUBMIT

save

06050403020100

12

16 sep

111009080706


(samplecolour)

My brews


Saved Recent

CAPPUCCINO1/2 milk, 1/2 foam,

2 co�ee, 3 sugar, 1 cocoa.

SELECT

DELETE

My brews


Saved Recent

SPECIAL CAP1/2 milk, 1/2 foam,


SELECT

DELETE

CUSTOM21/2 milk, 1/2 foam,


SELECT

DELETEcon�rm cancel

Enter name

CUSTOM2

NEW!CUSTOM2

Community


TopBrowse Share

USER11/2 milk, 1/2 foam,


SELECT

ADD

RATE



SELECT

ADD

RATE

Community


TopBrowse Share



SELECT

ADD

RATE



SELECT

ADD

RATE

Community


TopBrowse Share


2 co�ee, 3 sugar, 1 cocoa.SHARE

SHARE



1

NEW!

1. Create a new brew andsave it to my brews

2. Select the highest ratedcoffee

3. Share a brew withcommunity

4. create a new brew andsubmit for 9:00am

A paper prototype was created to demonstrate the primary functions of opening the application, creating a coffee, selecting a time and finally submitting it.

Test 2 for usability required a test group to view a video of the current paper prototype (without captions), and write down what they thought the test user was doing at each step and how they were doing it - determining whether the process was easily identifiable, that the functionality was intuitive andsimplistic and whether learning to use the software easy and straight forward.

Click image or link to see paper prototype: http://vimeo.com/52314491

Paper PrototypeTEST 2

http://vimeo.com/52314491

http://vimeo.com/52314491

Introduction

The developers at Nespresso conducted usability testing for the NespressAPP using a sample population which fit the description of the target audience. These tests were aimed at determining the audiences feelings and responses to the software, ensuring users felt comfortable with using the application, could easily understand it and ultimately enjoy using it. The tests included: a simple flowchart navigation exercise; and a paper prototype demonstartion and viewing.

Goals and Approach

The specifc purposes of the tests were to assess the usability of the software interface, the users understanding of the features and the general flow of information. The NespressAPP team conducted the usability test in private, where potential users who fit the target audience were invited to come along and take either of the two short tests, providing their opinions and thoughts about the application in the process.

Eight participants took part in total. Five of eight participants took part in TEST 1: the flowchart navigation exercise, while the remaining three of the eight participants took part in TEST 2: the paper prototype demonstration and viewing. Each test session lasted an approximate 8-10 minutes, with a total average of about 72 minutes to conduct the entire experiment.

Methodology

Participants were chosen based on their age and profession, as per the target audience, which included those of the general creative industries, such as graphic designers and photographers, to ensure they fit the target demographic. 80% were iphone owners of more than a year, while 100% owned one apple product for more than a year.

Before each of the test sessions, users were given a basic explanation of the background of the application and what would be used for..

Test 1: Provided copies of the concepts, users were asked to navigate through the flowchart wireframes, given specific tasks and actions. Users were then rated on their ability to navigate the application, recording the participants navigational choices, rate at which the operation was completed, issues that may have been faced and any overall questions or feedback the user had about the application.

The results focused on three main criteria:

• Did the user understand the sequential flow of information?• Did the user understand the buttons?• Did the user get stuck? If so where?

The test was primarily concerned with using the application as a whole, focusing on navigation and the process. Being conducted in this way, Test 1 offered a unique ability to view the users decisions throughout the process, at each step of the way. Test 1 provides a practical way to find weak points in the process, and pinpoint exactly where they are and where people are having the most difficulties.

This will then make the process of re-designing any problems in the application quicker, easier and more focused on the important issues.

Test 2: Participants were asked to view the current paper prototype recording, without the added captions for direction. They were asked in their own words to describe the process as they saw it, and attempt to explain and identify what they thought the user in the demonstration was doing at each step of the way, with each button pressed, and what the overall purpose or outcome might be.


• Did the user understand the purpose of the application?• Did the user understand the function of the buttons?• Is the interface design clear and representative of the function/purpose?

This secondary test was more concerned with the details of the application, the usability of controls and the interface design. This can help determine whether the usability appears natural and intuitive, or whether users feel they have to learn it first, or get used to it.

Outcomes of Workshop

In general, all participants found the NespressAPP to be straight forward and clear. Of the population, 100% were able to successful navigate the application, with only one participant (user 4) expressing confusion at more than one point (80%).

The test identified only minor problems including:• No additional confirmation for orders place.• No specification for new orders.

This document contains the participants success ratings for the tasks completed rates. All participants successfully completed the flowchart navigation scenarios. One of the eight (20%) missed more than one button in the process.

Of the three who completed the paper prototype viewing, all participants were qualitatively successful at identifying the actions and general functions.

100% of the participants test, suggesting that users have a strong understanding of the software and that the application is engaging and intuitive. The feedback from the users suggest the most enjoyment in the creative process of dragging and dropping icons into a virtual coffee cup, expressing that this feature would enhance the desire play with the application to experiment and try new concoctions.

Discussion

It may be possible that the extensive information offered to the participants in TEST 1, through the complete flowchart wireframe, created more confusion and made the task appear more complex, as in the case of USER 4. It could be that participant users are more perceptive, as per TEST 2, when they view the application in a familiar way, in the case of the paper prototype.

The target audience have become accustomed to the orientation and flow of apple OS applications. It seems that these users are very used to the design and composition inherent in this platform, so it is very important that this is maintained, not only to increased usability ease, but also to ensure not to cause any further confusion for the user. Users appeared to have a natural inclination to double-tap, drag, drop and scroll various icons, which is a positive response to how this application is intended to be used. This area of usability does not apparently need to be explicitly stated or directed, which means users will feel comfortable and familiar with this application.

Conclusion

Research suggests that users of this demographic and audience are more than used to this kinds of application and software. Overall, the tests were successful at determining the audiences ability to understand and use the NespressAPP, noting a sense of satisfaction by using the drag drop feature, which creates a more natural, fun and expressive way of selecting ingredients and creating recipes.

Only very little changes will need to be made in order to enhace user satisfaction, namely;Introducing added notification icons for newly added information.

Introduction


Goals and Approach



Methodology


















Discussion



Conclusion



USER 1

USER 2

USER 3

USER 4

USER 5

SCENARIO 1

PAGE BUTTONS

SCENARIO 4

PAGE BUTTONS

SCENARIO 3

PAGE BUTTONS

SCENARIO 2

PAGE BUTTONS

Introduction


Goals and Approach



Methodology


















Discussion



Conclusion



USER 6

USER 7

USER 8

PAGE BUTTONS

INTERFACE:

PAGE BUTTONS

IDENTIFIED:

STEPS PROCESS

Wireframe

add

Select timeback

SUBMIT

now!

06050403020100

12

16 sep

111009080706


Status




1

milk

sugar

foam

cocoa

Start brew next

1/3milk X XX

1t/s Sugar


(samplecolour)

Select timeback

SUBMIT

save

06050403020100

12

16 sep

111009080706


(samplecolour)

milk

sugar

foam

cocoa

co�ee

dragand

drophere

Start brew next


Stock level


cancel brew

edit brew

continue


Stock level


EDIT

DELETE

OTHER05:30 pm, Monday evening,


EDIT

DELETE

con�rm cancel



next(default)start brew

My brews

Status

Select

Select Select

Select

Community

Stock level

submit stock ok

con�rm

stock low/insu�cient

Save

add

con�rm

continue

�nish

edit brew

Select timeback

SUBMIT

save

06050403020100

12

16 sep

111009080706


(samplecolour)

My brews


Saved Recent



SELECT

DELETE

My brews


Saved Recent



SELECT

DELETE



SELECT

DELETEcon�rm cancel

Enter name

CUSTOM2

NEW!CUSTOM2

Community


TopBrowse Share



SELECT

ADD

RATE



SELECT

ADD

RATE

Community


TopBrowse Share



SELECT

ADD

RATE



SELECT

ADD

RATE

Community


TopBrowse Share



SHARE



1

NEW!

DESIGNDESIGN

Wireframes

Nespressapp

Icon & Welcome Screen

sugar

cocoa

co�ee

foam

milk

dragand

drophere


next

sugar

cocoa

co�ee

foam

milk

1/3milk XX


next


back

SUBMIT

16 SEP

06050403020100

12111009080706


back

SUBMIT

16 SEP

06050403020100

12111009080706

con�rm cancel



- ‘Start brew’ screen

- Ingredients on left side, drag & drop into cup, can scroll down for more options

- Double tap ingredients to set measurements

- Once dropped, menu will appear of current brew, option to delete

- Once dropped, cup will simulate colour and consistancy as per brew

- Continue at top right once complete

- Screen will scroll left to reveal ‘Select time’ screen

- Select time and date via scroll wheel

- Tap ‘save’ button to save to ‘my brews’

- Tap ‘SUBMIT’ once time has been selected

- Pop-up will display brew and time, requesting con�rmation

next

Start Brew Page

- ‘My brews’ screen

- ‘Recent’ menu selected

- Displaying all co�ees recently brewed

- ‘Select’ to send to machine

- ‘Delete’ to delete from menu

- ‘Saved’ menu selected

- Displaying all saved brews


Saved Recent



SELECT

DELETE



SELECT

DELETE

NEW!


Saved Recent



SELECT

DELETE

My Brews Page

- ‘Community’ screen

- ‘Browse’ menu selected

- Displaying all/most recent brews shared by users

- ‘Select’ to send to machine

- ‘Add’ to add to ‘my brews’

- ‘Rate’ to rate it up in ‘Top’

- ‘Top’ menu selected

- Displaying higest rated brews shared by users

- ‘Share’ menu selected

- Displaying My brews

- ‘Share’ button will send brew to community



SELECT

ADD


TopBrowse Share



SELECT

ADD

RATE



SELECT

ADD

RATE



SELECT

ADD


TopBrowse Share



SELECT

ADD

RATE



SELECT

ADD

RATE


TopBrowse Share



SHARE



Community Page

- ‘Stock level’ screen

- Quantity level bars

- Ingredients

- ‘Back’ to go back to time selection screen

- ‘Warning’ menu

Stock Levels Page


milk sugar co�ee cocoa


back

milk sugar co�ee cocoa

cancel brew

edit brew

continue


Status Page


next

1



EDIT

DELETE

NEW!




EDIT

DELETE

- ‘Status’ screen

- ‘Edit’ to make changes

- ‘Delete’ to cancel order

- Displays newly added orders

- Noti�es user of newly added order

Design & Style

milk

foam

sugar

coffee

cocoa

1 Co�ee X XX

1t/s Sugar

nextStart brewStart brew

My brews Stock levelsCommunityStart brew Status

Loading..

Nespressapp

SaveSave

SUBMITSUBMIT1 Co�ee X X

X1t/s Sugar

back Select timeSelect time


SaveSave

SUBMITSUBMIT1 Co�ee X X

X1t/s Sugar



confirm cancel



milk

foam

sugar

coffee

cocoa1/2 milk X X X1/2 foam

1t/s Espresso X

nextStart brewStart brew


SaveSave

SUBMITSUBMIT1/2 milk X X X1/2 foam

1t/s Espresso X



application design & usability report · the application prototype is to be developed...

Documents