ACCESSories App
The ACCESSories mobile payment app authorizes payments through scanning registered accessories to curb checkout line hold ups caused by failed Face ID (with face masks) authorized payments during peak COVID-19 times.
The app design aimed to meet design reqs found via usability analysis and user needs (basic needs, functionality, interface, and interaction) and implemented them in app prototype.
Overview
UI/UX Case Study for University Course: Human-Computer Interaction & Communication
Objective
Explore and test different interactive and user-focused solutions to current issues mobile payment issues. Providing new and innovative app proposal grounded in user testing.
Techniques Used
User Observations, User flows, Team & Individual Usability Evaluation Studio Sessions, UXTOOL Testing Session
Tools Used
Balasamiq, Mural, Miro, Stormboard, Illustrator, Google Surveys
Responsibilities
Conducting user observation, identifying user needs, creating lo to mid-fi prototype designs, constructing UI elements and design system, drafting user testing protocol, facilitating usability evaluation sessions, and summarizing and implementing studio results.
Duration
13 Weeks
The Problem
Digital Pay user's are running into issues during payment and holding up checkout lines at stores. Our team noticed that the payment apps such as Apple Pay and WeChat pay had an arduous payment process for mask wearing users when face ID is enabled and created an unpleasant experience where users have to forfeit the speed and convenience of face ID authorized digital payments.
Problem Statement
How can we alleviate the user frustrations of face Id authorizing mobile payment with face coverings while maintaining the user needs of effortless, convenient, and low contact mobile payments.
Our Aim
The Solution
1 Low-Contact, Security & Privacy
An app with the same properties of traditional pay apps of using a camera authorizing substitute (via accessories) instead of entering passcodes in public allows users to maintain security and privacy while allowing the fast and low-contact convenience.
2 Coherent & Responsive
The app offers a simple and straightforward interface with visibility of the live system and user's progress in each task with a progress bar and appropriate feedback of task start and endings such as adding a new card or completing a payment.
Empathize
Observations
Our team initially set out to observe in grocery location across Mississauga and Vancouver when we noticed long wait times and physical space used in long physically distanced checkout lines during the peak COVID-19 pandemic. We started noting down the following things to notice any trends which would help us understand why lines were being help up so long:
Grocery
Stores
Age
Group
Transaction Method
Transaction Time
User Flow Map
A user flow map helped us track different paths users experienced when paying with different payment methods during the COVID-19 pandemic. Our team decided to focus on the digital and mobile payment process (shown bellow outlined in blue).
During our user research we derived some overall and key observations to note:
1. A majority of people preferred digital payment methods due to COVID-19.
2. Users who had to enter pin/passcodes after their Facial ID failed made efforts to hide their pin numbers.
3. Users initially try to authorize digital payment methods with facial recognition even though it fails due to face coverings.
4. This confusion caused hold ups in lines and made lines take a lot more space as 6 foot distance regulations were still in place.
5. Due to the aforementioned issues, users were visibly annoyed with the digital payment methods that involved facial ID.
Define
In doing so, we found that users valued 4 main points:
Security & Privacy
Coherent Payment Process
Fast
Transactions
Low Contact Transactions
Ideate
Design Requirements
Using our user observations and findings, we constructed the following requirements:
Design
UI Design System
After design requirements, I was tasked with creating our UI Design System for the different UI elements we will be using in the app.
Final Designs
