INTERAC INTERNSHIP

QR Code Payments for eCommerce

Leveraging QR code payments to streamline online checkouts for consumers and retail management for merchants

Project Details

ROLE

User Surveys, Journey Mapping,
Information Architecture, Wireframing, Prototyping

TEAM

Brittney Cheng - UI/UX Intern
Devon Law - Developer Intern
Liam Crocket - Developer Intern

TIMELINE

2 Months
July - August 2021

TOOLS

FIgma
Flutter

How can we respond to the demand for safer digital payments?

Context

Interac Corporation is a Canadian financial service company that connects people with banks and allows them to transact electronically. They are most well-known for their electronic funds transfer service and their Debit platform that serves over 24 M monthly users.

Interac empowers Canadians to transact confidently by providing payment services rooted in security, reliability, and efficiency.

Challenge

COVID-19 has impacted us in many ways, including the way that we shop. Through numerous lockdowns and fear to return in-store, many people have resorted to online shopping and curbside pickups. As consumer behaviour shifts to a more digital landscape, there is a need to optimize eCommerce experiences for both deliveries and curbside pickups.

The challenge was to leverage QR codes to design and build a proof-of-concept that re-envisions the at-home delivery and curbside pickup experince.

Solution

An improved eCommerce experience leveraging QR codes was proposed as a solution to the desire for more efficient and safe shopping during the pandemic.

Alongside collaboration with 2 developers, I led the design an end-to-end delivery and curbside pick up flow that utilizes QR codes to streamline the online shopping process. 

Defining constraints and requirements

Previously...

The project I worked on was an extension from previous co-op terms. The interface for a Financial Institution emulator app that leverages QR codes and electronic funds transfers to make payments was already created. The idea was that the app could be used at participating stores for simpler payments. Extending QR payments to eCommerce was also initially explored, but required a deeper look.

Requirements

01. CLICK AND COLLECT FOR eCOMMERCE

Expand in-browser eCommerce experience to include click and collect through QR code

02. PROOF OF PAYMENT

Include QR code storing capabilities within the user’s bank app to serve as a proof of payment

03. MERCHANT DASHBOARD

Allow merchants to schedule, manage and finalize pick ups for their click and collect orders

Why QR codes?

Benefits

CONSUMER

  • Less hassle
  • Contact free payments
  • Accessible everywhere

MERCHANT

  • Reduced fees
  • Easy set-up
  • Quicker payments

Understanding the problem

Background Research

I did some background research to gain a deeper understanding on how the COVID-19 pandemic has affected Canadians.

User Surveys

I surveyed 60+ people from ages 16-60 to learn more about their consumer behaviour and how it may have been affected by the pandemic. The purpose of this survey is to identify trends and potential opportunities; overall, re-envisioning the future of commerce.

CASH USAGE AND QR CODE EXPOSURE

ONLINE SHOPPING BEHAVIOUR

CLICK AND COLLECT BEHAVIOUR

Mapping out the click and collect process

Journey Map

Based on research insights, I mapped out the customer journey of a click and collect process from making the initial purchase online to collecting the item in-store. 

Consumer Flow

I outlined how a consumer would interact from browser to in-app to complete an online purchase. Users will fill their shopping cart on their desktop computer and proceed with payment by scanning a QR code from their mobile device. 

Merchant Flow

From a merchant side, I outlined how the flow would look if a consumer were to order an item online. I also determined how the order would be verified and completed once picked up. On the merchant’s side, a staff member will schedule the consumer’s pickup through a web-application. Once the merchant schedules the pickup, the consumer will receive a QR code proof of payment which will then be scanned to confirm that the order has been collected.

Bringing it together

Holistically, here is how the consumer and merchant flows will interact.

Designing a solution

Wireframing

After mapping out the user journey map and logical information architecture of the platforms, I wireframed a design for the merchant dashboard.

Style Guide & Branding

A simple colour palette of blues and greys was utilized for the merchant dashboard.

The final product

Ordering Online

Once all your items have been added to your cart, you can select "Express QR Payment" for an efficient payment approach.

Confirming your purchase

When you scan the QR code on the screen with your banking app, you can confirm and pay without manually any payment information or addresses. All that information is pre-configured within your bank app.

Scheduling an in-store Pick Up

From the merchant's perspective, once the order has been placed, it will appear in the "Incoming Orders" panel within the "Active Orders"tab. Here, the merchant can schedule a pick up time for the consumer. 

QR Code
Proof of Payment

Once the merchant schedules your order for pickup, you will receive a unique QR code within your bank app. This will be used to confirm your proof of payment when you pick up your item.

Scan to Complete

When you arrive in-store, the merchant will scan the QR code proof of payment to complete your order.

Future next steps

User Testing

If I had more time, I would have liked to conduct user testing to validate designs. From user feedback, I would have continued to iterate and improve upon my designs.

Extending User Surveys

Based on current resources, it was most accessible to only interview consumers. However, it would have been ideal if we understood from a store merchant's point of view on how the pandemic may have affected them. Through broader answers, I could have designed a solution that would be ideal for both parties.