INTERAC INTERNSHIP
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
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.
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.
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.
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.
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
CONSUMER
MERCHANT
I did some background research to gain a deeper understanding on how the COVID-19 pandemic has affected Canadians.
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
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.
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.
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.
Holistically, here is how the consumer and merchant flows will interact.
After mapping out the user journey map and logical information architecture of the platforms, I wireframed a design for the merchant dashboard.
A simple colour palette of blues and greys was utilized for the merchant dashboard.
Once all your items have been added to your cart, you can select "Express QR Payment" for an efficient payment approach.
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.
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.
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.
When you arrive in-store, the merchant will scan the QR code proof of payment to complete your order.
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.
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.