AR Payments App for Smartglasses

AR Payments App

Design Exercise

Charisma Kausar 2022 Semester 1

CS3240 Interaction Design

Contents

1. User Research

2. Ideation

4. Wireframes

5. Hi-Fi Prototype

6. Reflections

3. Designing for AR

1. User Research

Problem Statement

To create a futuristic application to order and pay for goods

and send money to friends and family that is more convenient

than existing applications.

Ordering goods

Paying for goods when the amount is pre-determined

Paying or sending money by entering amount

Requirements:

1.

2.

3.

I compared online payments with in-store payments through

online research and scoped my project to only in-store/physical

payments as it has more room for improvement.

Link: https://www.figma.com/file/huF7ifwhKdSXPvxnCjFYjG/IDE---Affinity-Diagram?node-id=0%3A1

Affinity Diagram

I conducted 6 user interviews

to understand people's pain

points when ordering and

paying for goods and

summarised their problems in

the following affinity diagram.

User

Journey

Map

Link: https://www.figma.com/file/pjrOxz32uqRoySjxHBQgzG/IDE---User-Journey?node-id=0%3A1

2. Ideation

Problem Ideas

It is difficult to find items at a physical store

Show navigation guidance to the nearest product on their shopping list using smart glasses. This would

include the distance and pathway to the product location.

It is difficult to find more information about

products at physical stores

Show the user some product information such as price, available sizes, alternatives, etc. when they take a

look at the product. Expanding only one detail card and hiding the rest unless the user chooses to see it will

allow less clutter.

Waiting in the checkout line is inefficient

and tiring

Allow users to scan their products as they collect them using their smart glasses. After collecting

everything, users can scan a QR code to connect to the store's server, apply any store discounts and pay

their final amount without any waiting lines.

Sending money to small store owners or

friends and family involves a lot of steps

Speed up money transfers by auto-scanning QR codes.

Get contact details of friends and family to transfer money to using facial recognition in case the person is

nearby. Use voice control to enter amount as difficult to type in smart glasses.

Brainstorming Link: https://www.figma.com/file/OiV9SvpiLWRtzXG1y1DVt1/IDE---Brainstorming?node-id=0%3A1

List of Ideas

Link: https://www.figma.com/file/nKOFhDYGXZQr9d00m2xh6L/IDE---Crazy-8s?node-id=0%3A1

Crazy 8s

*Smart Glasses UI highlighted in orange for easier comprehension

Key User Tasks

Based on my ideation process, I decided on the following user tasks:

1. Wallet management: Adding cards to the app and configuring payment settings for smooth

payments

2. In-store Cart Payments: Finding items using navigation guidance, checking product info,

self-scanning items to add them to the cart, and paying for them using a QR code instead of

checkout counters for better in-store experiences.

3. Manual Input Payments: Voice input and facial recognition to enter the amount and/or

recipient and transfer to small shop owners, friends and family.

3. Designing for AR

Smart Glasses

The AR payments app can run on smart

glasses with an in-built camera,

microphone for voice control, 1280x720

visual display, and built-in NFC for tap-topay functionalities. The app can be

controlled using the touch controller.

T

o

u

c

h

C

o

n

t

r

olle

r

C

r

o

s

s

-

k

e

y

f

o

r

u

p

-

d

o

w

n

-le

f

t

-

r

i

g

h

t

c

o

n

t

r

ols

E

n

t

e

r

k

e

y

t

o

s

ele

c

t

o

r

c

o

n

f

i

r

m

B

a

c

k

,

H

o

m

e

,

a

n

d

H

i

s

t

o

r

y

b

u

t

t

o

n

s

T

r

a

c

k

p

a

d

f

o

r

g

e

n

e

r

al touch control Tap Drag Flick/Scroll Pinch Out Pinch In Available trackpad controls:

Design Considerations for AR

UI has to be translucent with a slightly blurred background (similar to glassmorphism) to

allow the user to be able to see their environment as well as the app UI clearly.

The UI must not obstruct the center view of the user so that they can view their

environment comfortably.

There must be guidelines to help people get started as augmented reality smart glasses

are a new platform for most people.

Colors that are rare in shopping environments must be used to allow the UI to be seen

clearly.

Main Reference: https://developer.apple.com/design/human-interface-guidelines/technologies/augmented-reality/

4. Wireframes

Field-of-View

Wallet Management

Guidance Tips

Item Directions

Scan to add to cart

QR Code Checkout

Voice Input for Entering Amount

Facial Recognition for Contact Details

User Reviews

Some UI components are too big due to too much detail.

The ring (coin) icon for payment options is not intuitive.

The numeric keypad to correct voice input takes up screen space and it is difficult to type.

More user guidance tips will be helpful so as to not misunderstand what the controls are.

--> Use smaller components and place them on the corners. Give out information in small chunks and only if

the user asks for it.

--> Changed to menu icon to represent real-world more accurately and for external consistency.

--> Allow the user to re-enter the amount using voice input again as accuracy is high, compared to keypad

input which requires more user work than needed.

--> Add more help tips at the beginning to explain how the controller works.

5. Hi-fi Prototype

Task 1 - Landing Page

Scan Card

Settings Configuration

Guidance Tips

Store Details

Task 2 - Item Directions

Item Details

Comparing Alternatives

Scan to Add to Cart

QR Code Checkout

Task 3 - Waiting for Voice Input

Voice Input for Amount

Correct Speech Recognition Errors

Transfer Money

Contact Details through Facial Recognition

6. Reflections

Feature Comparison

Navigation Guidance

Very few existing applications provide navigation guidance and they require looking at the app instead of in front

of them which is not safe for users. The smart glasses app has a HUD display to keep the head up while looking at

the desired UI components.

Automated QR-code scanning

Scanning the QR code automatically when the user looks in the direction for a few seconds reduces the number of

steps involved compared to loading the scan feature in apps like PayLah! which usually holds up the checkout line.

Voice input

Voice input for payments is not supported by existing apps like PayLah!. Allowing voice inputs avoids user errors

like not inputting the decimal point and in general is more easier for many users.

Facial Recognition

Getting contact details of people around you through facial recognition on top of looking up the contacts like

most current apps helps when transferring money to people around us, for example, splitting bills.

All-in-one experience

There are various budding apps that support self-scanning of products, showing product info, etc. but none of

these support all the features in one. Moreover, the user has to pull up their mobile camera every time which

makes it very inefficient. This limitation can be solved using this smart glasses app.

Comparison to Exiting Apps

Reflections

Designing for AR was very difficult for me as I was unfamiliar with smart glasses and the touch controller. I had to

research about field-of-view and the controls available to model them on Figma. However, the unfamiliarity also

helped me to get creative and allowed for lots of insights.

Designing for an in-store experience meant the user had to move around in their environment a lot which required

many changes in background scenes. This was difficult to model accurately according to my chosen scenarios.

The step-wise design process proved to be helpful to be able to design for a product that I do not have experience

using. The affinity diagram, user journey map, and Crazy 8s were all useful steps to be able to visualize a working

prototype.

The data-ink ratio concept was especially relatable when building this AR payment app as we have to make the best

use of the limited space available so as to not obstruct the user's view.

Evaluating my work using Nielsen's 10 usability heuristics helped in each stage of the prototyping process to

improve my design and make it intuitive enough for new AR users.

Thank You!

Design Exercise

Charisma Kausar 2022 Semester 1

CS3240 Interaction Design