Cloud: Cloud: Finding Calm in the In-Between

EP

NG REPOR

TI

Y

TE

TE S

STI

U SABILITY

003

T-

T-

U

IT Y T E S T I N G R

OR N

G

RE

PORT - USAB

IL

IT

c o n t e m po r ar y l i f es tyl e and the slowness needed to exec ute it.

S

DIDA 603A - Multi - P latf orm E x pe r i e nce De si gn

So phi e Pe t e rs on

AUGUST 2021 A mo b i l e bas ed app s tr ik i ng a n equilibrium between a fast pac ed

IL AB

P AG E 1

P AG E 2

CONTENTS

1 2 3 4

usability

Prototy pe testing of C l ou d Us ab i l i t y S u m m ary

5

Us ab i l i t y Tas ks

6

Tes t + R ec ru i t m en t P l an

7

Tes t i n g R es u l t s

8

site map App Elem ents

annotated wireframes Developer Hand- off

high fidelity screens A realistic look a t th e ap p

13

17

37

P AG E 3

USER RESEARCH

1

P AG E 4

US A B ILIT Y S UMMA RY Cloud focuses on creating calm during in-between moments. Instead of catching up on social media, calls or emails, time spent on a trip with Cloud offers a customised meditation which guides you back to reality as you approach your destination.

Drivers are polite, but keep interaction to a minimum to facilitate this.

The Cloud fleet uses electric vehicles powered by renewable resources for peace of mind and a quiet journey. Arrive grounded and refreshed, ready for the next adventure.

SUMMARY The concept for Cloud was developed into a testable prototype and tested on a small group of 4 participants which had to complete 3 tasks.

These tasks are seen are the most important core functions and must work efficiently for the app to be a success.

KEY ISSUES • Flow of actions + ability to navigate around the app easily • Building in usability with current technology (AirPods, for example, to change music) • Increase intuitive functions to reduce user load.

RECOMMENDATIONS • Ensure users can reach all parts of the app from every screen via hamburger menu or forward/back buttons • Increase ‘enter’ or ‘next’ intuition so the user doesn’t have to click on every text field and also delete existing hint words.

• Build in more customisation through settings buttons.

US ABIL IT Y SUM MA R Y

P AG E 5

TASK SCRIPT

TASK 1

CREATING AN ACCOUNT

DESIGNED SOL

(A) Open app → Welcome screen → Select ‘

page i

“You’d like to try Cloud out. How would you

(B) Open app → Welcome screen > Select ‘Si

In form → Follow prompts

register a profile and access the app?”

TASK 2

SEARCH & PAY FOR A TRIP “You need to get from a stressful meeting at the

If sig

(A) Task 1 /Flow A → Open app → Navigate t Adds destination → Confirms Cloud → Pays

Payment

Barbican to a meeting with friends at Gusto Restaurant in South Bank. How would you book a trip with Cloud?”

If not

(B) Task 1 /Flow B → Navigate to ‘Let’s Explore

→ Confirms Cloud → Pays using Touch ID or →

USERS

TASK 3

CUSTOMISE A MEDITATION

If s

(A) Task 2/Flow A → Completes meditation qu

“The meditation starts but

music → cont

you are not enjoying the

If not

background music. How

(B) Task 2/Flow B → Completes meditation que

would you change this?”

music → cont

RECRUITMENT PLAN

MAY

Initial user testing revolved

1

around the recruitment of four individuals who matched the

Age: 25

persona segments identified

Occupation: Student

during the research.

Location: London UK

+

Oc

Loc

P AG E 6

TARGET SEGMENTS

LUTIONS PATHS

‘Register’ button → Follow prompts until Home

is reached

All

ign In’ → Select ‘Create Account’ link below Sign

Focus: 1st Time Users

s until Home page is reached

gned in:

to ‘Let’s Explore’ → Accepts Location Tracking → using Touch ID or → Adds credit card details →

All

t confirmed.

Focus: Heavy Users

signed in:

e’ → Accepts Location Tracking → Adds destination

→ Adds credit card details → Payment confirmed.

signed in:

uestionnaire → picks music → swipes back to change

tinues meditation.

All

t signed in:

estionnaire → picks music → swipes back to change

tinues meditation.

HEATH

SHARON

SARAH

1

1

1

Age: 28

Age: 62

ccupation: Analyst Consultant

cation: London UK

+

Occupation: Pharmacist Location: Sydney AUS

+

Age: 24 Occupation: Architect Location: London UK

P AG E 7

Usability

Testi Task Script

INF O RM A T IO N A R CHITE CTU R E

P AG E 8

TASK ONE

CREATING AN ACCOUNT “You’d like to try Cloud out. How would you register a profile and access the app?”

User was instantly annoyed by having to tap the loading page. First person to scroll through the information cards Auto delete doesn’t work until you start typing

Task time: 1.5mins Outcome: Positive.

Log In Method: Google.

Features Ignored: Infographics cards, log in via email + Touch ID.

Task time: 2 mins Outcome: Positive.

Log In Method: Register.

Features Ignored: All features used.

1

DIFFICULTY

QUALITATIVE

This part worked very smoothly. Some of the swipe to go back/forward functions where a little sensitive but overall creating a profile took under 2 minutes.

QUANTITATIVE

USER 2

COMPLETION

USER 1

Easy

USER 3

USER 4

User 3 identified as having the least technological dexterity.

However, she found it very easy to navigate the first task and registered for an account quite easily.

User found this step relatively straightforward.

Commented that the integration of current accounts makes things so much easier. Used Touch ID to log in.

Task time: 2.25mins Outcome: Positive.

Log In Method: Register.

Features Ignored: Infographics cards.

Comments: Hint words for text fields didn’t auto-delete.

Task time: 1 min Outcome: Positive.

Log In Method: Touch ID. Features Ignored: Register with email (too long).

Comments: Enjoyed quick login - no fuss.

1

1

1

Easy

Easy

Easy

PERSONA SEGMENT All, with a focus on 1st time users.

SUCCESS CRITERIA The user successfully makes it to the home page having created a profile or having logged in.

FINDINGS

ng ts

4 out 4 of user said they found the task easy.

4 users successfully completed the task

RECOMMENDATIONS 1. Add forward/back buttons instead of swipe forward/back to reduce sensitivity of finger movement.

2. Ensure launch screen loads by itself.

IN F O RM A T IO N A R CHITE CTU R E

P AG E 9

TASK TWO

SEARCH & PAY FOR A TRIP “You need to get from a stressful meeting at the Barbican to a meeting with friends at Gusto Restaurant in South Bank. How would you book a trip with Cloud?”

User went to the menu before clicking the ‘Explore’ button.

Prototype didn’t adapt to screen size so ‘Confirm Booking’ button wasn’t available. ‘Tick’ button wasn’t used as expected.

‘Enter’ would be more user friendly.

USER 2 Slightly disorientated at the home screen but pressed explore.

Finger hovered over the hamburger menu. User chose to pay Touch ID. They found the process “super easy”.

Task time: 3 mins.

Outcome: Positive.

Payment Method: Touch ID Features Ignored: Main explore button, pay using card, tick to proceed.

Task time: 2 mins.

Outcome: Positive.

Payment Method: Touch ID Features Ignored: Pay using card.

1

1

DIFFICULTY

DONE?

QUANTITATIVE

QUALITATIVE

USER 1

USER 3 Streamlined ‘explore’ button really worked for this user (only thing on page really). There was a frustrating delay (speed) of the animation to show the user her trip to confirm. User paid easily but found that the autodelete hint in text boxes was annoying.

Task time: 4.5 mins.

Outcome: Positive.

Payment Method: Card Features Ignored: Pay using Touch ID.

Easy

USER 4 Found explore button easily. Annoyed that trip details pop-up hadn’t already popped up when she started searching. Made it hard to continue with the process of booking.

Commented that things should feel more intuitive and automated. Really enjoyed the ease of Touch ID. Task time: 3 mins.

Outcome: Positive.

Payment Method: Touch ID Features Ignored: Tick to proceed (should be intuitive).

1

Some hiccups

1

Easy

PERSONA SEGMENT All, with a focus on regular users.

SUCCESS CRITERIA The user successfully enters their location, where they want to go and pays for the trip.

FINDINGS 3 out 4 of user said they found the task easy.

4 users successfully completed the task

RECOMMENDATIONS 1. Making a booking - make the centered button more obvious or place ‘Make a Booking’ buttons both on the home screen AND the menu.

2. Ensure design adaptability to different phone sizes.

3. Create confirmed booking pop up to ensure the user knows a car is on the way.

4. Ensure auto-delete function for text fields with hints.

P AG E 1 0

TASK THREE

CUSTOMISE A MEDITATION “The meditation starts but you are not enjoying the background music.

How would you change this?”

Certainly the more difficult of the tasks considering a prototyping fault. User 1 tried to change the music by tapping her ear as a joke (i.e. using wireless earphones to change the music.

Task time: 4 mins.

Outcome: Positive.

Problem Solving Method: Used + settings button + Swiped back.

SUCCESS?

QUANTITATIVE

QUALITATIVE

USER 1

DIFFICULTY

1

A few hiccups

USER 2

USER 3

USER 4 User picked up on the swipe back/forward functions. Commented it was odd that there wasn’t any back/skip options - made her feel trapped in a page. Wishes the menu was always accessible. Annoyed that the settings button didn’t contain the music options instead of having to go back.

This task proved difficult due to my own prototyping error. The user also didn’t know if the music would be changed in app or invehicle (played by the driver). Didn’t find it to be the most smooth experience.

The third task felt impossible with User 3.

Perhaps it was that she was using an Android, but there was no ‘continue’ button showing up.

Task time: 3.5 mins.

Outcome: Positive.

Problem Solving Method: Swiped back.

Task time: NA Outcome: Inconclusive.

Problem Solving Method: Tried to swipe forward and press play on her own device.

Task time: 3.5mins Outcome: Positive.

Problem Solving Method: Tried to use the settings button (not developed).

0

1

1

A few hiccups

Had trouble

A few hiccups

PERSONA SEGMENT All.

SUCCESS CRITERIA The user successfully changes the music of their meditation during their trip.

FINDINGS 3 out 4 of user said they found the task confusing.

3 users successfully completed the task

RECOMMENDATIONS 1. Incorporate behavioral functions - most users now use Airpods or similar wireless earphones to ‘double tap’ and change the music.

2. Questionnaire should flow better (prototyping error with linkages).

3. Ensure menu hamburger appears on every page.

4. Add forward + back buttons on every page to ensure user control.

P AG E 1 1

2 SITE MAP

P AG E 1 2

Site Map P AG E 1 3

1.0 Launch Screen

3.1.2 Password Reset 2.0 Introduction Page 3.1.1 Forgot Password

3.0 Log In + Register

3.1 Log In

3.2.1 Create Profile

or

3.2 Register

3.3 Privacy Policy

4.0 Home Page

5.0 Explore

6.0 Dashboard

6.1 My Details

6.2 Customer Service

KEY

Top Level Navigation

6.3 Cloud Diary

Second Level Content

Page Not in Prototype

P AG E 1 4

Site Map

5.1 Booking

5.2 Payment

5.3 Emotional Check In

5.4 Customise Meditation

5.5 Enroute Meditation

P AG E 1 5

3

ANNOTATED WIREFRAMES

P AG E 1 6

Annotated Wireframes P AG E 1 7

A

B

1.0 Launch Screen

P AG E 1 8

1.0 Launch Screen

A LOGO On load screen, delayed animated fade in.

B BACKGROUND On tap proceed to 2.0 Introduction Screen or load after 5 seconds.

P AG E 1 9

A

B

Welcome to Cloud Cloud elevates the experience of the in-between moments by creating a sublime experience of transportation.

C

Continue

Cloud App 2021 | Privacy Policy

D

2.0 Introduction Screen

P AG E 20

2.0 Introduction Screen

A LOGO On load logo slides upwards to make room for B buttons.

B INFOGRAPHIC CARDS + TEXT On drag/swipe, linear slide asset and text to the left. Wrap last onboarding card to first.

C CONTINUE BUTTON On tap proceed to 3.0 Log In & Register.

D PRIVACY POLICY POP-UP On tap load in-app Safari pop-up to web privacy policy.

P AG E 21

A

B

Log in Register C

Cloud App 2021 | Privacy Policy

3.0 Log In + Register

P AG E 22

3.0 Log In + Register

A LOGO On load logo enlarges and slides down again.

B LOG IN BUTTON On tap proceed to 3.1 Log In.

C REGISTER BUTTON On tap proceed to 3.2 Log In.

P AG E 23

Log in with Apple ID

A

Log in with Google

B

or

Log in with Username

C

Cloud App 2021 | Privacy Policy

3.1 Log In

Password Reset Sent to Email!

Username or Email Address Password

D E

GO

F

Cloud App 2021 | Privacy Policy

3.1.1 Log in with Username

Please enter the email address your signed up with

Username or Email Address

GO

G

H

Cloud App 2021 | Privacy Policy

3.1.2 Forgotten Password

Please enter the email address your signed up with Please follow the instructions in the email sent to your nominated address

Log In with Username

I

Send Again

J

Cloud App 2021 | Privacy Policy

3.1.3 Password Reset P AG E 24

Logging In

3.1 Log In

A

B

C

APPLE ID LOG IN BUTTON

GOOGLE LOG IN BUTTON

USERNAME LOG IN BUTTON

On tap load in-app Apple ID pop-

On tap load in-app Safari pop-up for

On tap proceed to 3.1 Log In

up for Touch ID log in.

Google account log in.

with Username.

Proceed to 4.0 Home Page.

Proceed to 4.0 Home Page.

3.1.1 Log In with Username

D

E

F

USERNAME TEXT FIELD

PASSWORD TEXT FIELD

GO BUTTON

On tap, remove hint text and create text

On tap, remove hint text and create

On tap proceed to

field.

censored text field.

4.0 Home Screen.

3.1.2 Forgotten Password

G

H

USERNAME/EMAIL TEXT FIELD

GO BUTTON

On tap, remove hint text and create text

On tap proceed to

field.

3.1.3 Password Reset.

3.1.3 Password Reset

I

J

LOG IN WITH USERNAME BUTTON

SEND EMAIL BUTTON

On tap proceed to

On tap, re-send email and reload page.

3.1. Log In

P AG E 25

Register with Apple ID

A

Register with Google

B

or

Register with Email

C

Cloud App 2021 | Privacy Policy

3.2 Register

P AG E 26

3.2 Register

A APPLE ID REGISTER BUTTON On tap load in-app Apple ID pop-up for Touch ID register.

Proceed to 4.0 Home Page.

B GOOGLE REGISTER BUTTON On tap load in-app Apple ID pop-up for Touch ID register.

Proceed to 4.0 Home Page.

C EMAIL REGISTER BUTTON On tap proceed to 3.2.1 Create Profile.

P AG E 27

Welcome!

We heard you’re new around here.

We’d love to get to know you better.

A

Email Address Username C

B

dd/mm/yyyy

Gender

Password

D

E

Confirm Password

Continue

F

Cloud App 2021 | Privacy Policy

3.2.1 Create Profile

P AG E 28

3.2.1 Create Profile

A EMAIL ADDRESS TEXT FIELD On tap, remove hint text and create text field. Check database to ensure email is not assigned to another page. If yes, redirect to 3.1 Log In.

B USERNAME TEXT FIELD On tap, remove hint text and create text field. Check database to confirm username available.

C DATE OF BIRTH FIELD On tap, remove hint text. Calender pop-up with sliders to adjust date of birth. ‘Ok’ to confirm.

D GENDER DROP DOWN On tap, drop down menu with options; male, female, other, prefer not to say.

E PASSWORD + CONFIRM TEXT FIELD On tap, remove hint text and create censored text field. Ensure both values match.

F CONTINUE BUTTON On tap proceed to 4.0 Home Screen.

P AG E 29

A B

Hi Zara!

C

Hi Zara!

D

E2

E

Home

E3

Dashboard

E4

My Account

E5

Cloud Diary

E6

Help

E7

BOOK A TRIP BOOK A TRIP

E1

4.0 Home Page

4.1 Activated Swipe Up Menu

P AG E 30

4.0 Home Page

A HAMBURGER MENU On click open E1 panel (bottom of screen). Treat as a lightbox.

B LOGO On tap, reset screen to 4.0 Home Screen.

C ILLUSTRATION On load illustration is animated.

D BOOK A TRIP BUTTON On tap, proceed to 5.0 Explore.

E1

SLIDE UP MENU On slide up to activate. Slide down to hide.

4.1 Activated Swipe Up Menu

E3

E4

E5

E6

E7

HOME

DASHBOARD

MY ACCOUNT

CLOUD DIARY

HELP

On tap proceed to

On tap proceed to

On tap proceed to

On tap proceed to

On tap proceed to

5.0 Home Screen.

6.1 Dashboard.

6.2 My Account

6.3 Cloud Diary

6.4 Help

P AG E 31

G

SEE JOURNEY MAP

H

A

How are you feeling?

C

Stressed Ungrounded Angry

D Confirm Your Trip

Where do you want to go?

Pick Up Location

Calm

E

PICK UP

DROP OFF

4-8 Fore Street Barbican London

Gaucho 2 More Street, London

Burnt Out Upset Excited

£10.52

B1

Continue

Destination

PAY

B2

5.1 Booking

I

F

5.2 Payment

5.3 Self Check In

SEE JOURNEY MAP

SEE JOURNEY MAP

Where is your happy place?

Choose ambient music or upload your own.

K

Beach Mountains Quiet Solitude Thunder Storm

You’re enroute to South London Decompressing from a long work day

Rainforest Upload my music

Continue

J

5:31

L

5.4 Customise Meditation

6 minutes until arrival

M

5.5 Enroute Meditation

P AG E 32

5.0 Explore

5.1 Booking

A

B

INTERACTIVE MAP

PICK UP (B1) +

On drag, allow map to be moved around

DESTINATION (B2) FIELDS

to determine B2. Location services

Auto-filled with current location + pin

determine current location at B1.

drop location. On tap, can be used as a search field.

5.2 Payment

C

D

E

F

JOURNEY LINE

BACK BUTTON

EDIT BUTTON

PAY BUTTON

Animated journey

On tap, go back to last

On tap, show pop up

On tap, process

visualisation.

loaded screen.

with text fields to edit

payment and proceed

addresses.

to 5.3 Self Check In.

5.3 Self Check In

G

H

SKIP BUTTON

GO BUTTON

On tap, load the next screen.

On tap proceed to 5.5 Customise Meditation

5.4 Customise Meditation

I CONTINUE BUTTON On tap proceed to 5.5 Enroute Meditation

5.5 Enroute Meditation

I

J

SETTINGS BUTTON

DOWNLOAD BUTTON

On tap, show pop up with toggles for

On tap, save meditation to the user’s

sound, voice and type of meditation.

cloud diary for later offline use.

P AG E 33

A

Hey Zara!

What can we help with?

My Account

B

My Trips

D

Cloud Diary

C

Help

E

6.0 Dashboard

F

Hey Zara!

My Account

Cloud Diary

What can we help with?

K Account Details

G

Common FAQs

Payment

Zara Jones

Name Email DOB

L

Date

Sunday 1st January ‘21

zara.jones@me.com

Time

3.10 to 3.25pm

01-01-94

Pre-Trip

Sex

Female

**********

Password

Sunday Trip

Post-Trip

Stressed

Calm

Anxious

Focused

Burnt Out

Payment Methods

H

Privacy

Excited

M

More Notes

Zara Jones

Name

**** **** **** 1234

Card No Sort Code

51-01-04

Nickname

Zara’s Credit Card

Exp

01/23

Get in Contact

Settings Read T&C’s + Privacy Policy

I

Date

Thursday 28th December ‘20

Time

9.05am to 9.32am

Pre-Trip

Delete Account Sign Out

Thursday Trip

J

Post-Trip

Stressed

Calm

Anxious

Focused

Burnt Out

Excited

More Notes

Rider Portal

6.1 My Details

Careers

6.2 Customer Service

6.3 Cloud Diary

P AG E 34

Dashboard

6.0 Dashboard

A

B

C

E

E

SEARCH BAR

MY ACCOUNT

CLOUD DIARY

MY TRIPS

HELP BUTTON

On tap, load

BUTTON

BUTTON

BUTTON

On tap proceed to

On tap proceed to

6.2 Help

searchable text field.

On tap proceed to 6.1 On tap proceed to My Account

6.3 Cloud Diary

6.3 Cloud Diary

6.0My Dashboard 6.1 Account

I

J

PAYMENT EDIT

EXTERNAL INFO

SIGN OUT

BUTTON

BUTTON

BUTTON

BUTTON

up to change

On tap, show pop up

On tap, show pop

On tap, show in-

On tap, proceed

image.

with editable text

up with editable

app Safari pop

to 2.0 Infomation

fields

text fields

ups.

Screen.

F

G

USER PICTURE

ACCOUNT EDIT

On tap, allow pop

6.2 Help

K DASHBOARD BUTTONS On tap load relevant in-app Safari pop ups. Treat as lightbox.

6.3 Cloud Diary

I

J

EDIT BUTTON

MORE INFO BUTTON

On tap load pop ups with editable self-

On tap, open pop up with full trip details.

check in notes. Treat as lightbox.

Treat as lightbox.

P AG E 35

3

HIGH FIDELITY WIREFRAMES

P AG E 36

High Fidelity Wireframes P AG E 37

Hi

Welcome to Cloud!

Cloud elevates the experience of the

in-between moments by creating a sublime

BOOK

experience of transportation.

GO

Cloud App 2021 | Privacy Policy

2.0 Introduction Page

4.0 Hom

P AG E 38

SEE JOURNEY MAP

Zara!

K A TRIP

me Page

5

minutes left in the Cloud

You’re enroute to South London Decompressing from a long work day

5:31

8 minutes until arrival

5.6 Enroute Meditation

P AG E 39