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