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
