top of page

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.


UI/UX Case Study for University Course: Human-Computer Interaction & Communication


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


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.


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.

ACCESSories Cover 2.png

The Design Process







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:






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.

User Flow Template.jpg


In doing so, we found that users valued 4 main points:


Security & Privacy


Coherent Payment Process



low contact_3x.png

Low Contact Transactions


Design Requirements

Using our user observations and findings, we constructed the following requirements:

Design Requirements_3x.png


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.

Accessories App UI Design System

Final Designs

Final Designs.png
bottom of page