Description
Role
Date
Optimizing in-store credit card sign-up experience.
Product Designer
October 2023
Crafting a seamless agent sign-up process for credit cards, while enhancing the in-store experience for customers.
The focus lies on agents to fill out the credit card application on behalf of customers who are instore, while fostering a positive experience for the customer in-store.
Objective
There are two ways to request a sign-up of the credit card through the retail store:
The customer is currently a Rogers customer through other services and has been pre-approved for the credit card.
The customer simply walks in and requests to apply for the credit card.
Research
As this is a novel experience, we conducted interviews with our retail agents to inquire about potential challenges they may face personally. Additionally, we sought insights from the agents regarding anticipated pain points from the customer’s perspective.
What are the pain points?
Agent’s pain points:
“Scared it might be too complex of a form to navigate because we want to avoid delays for longer wait times for the customers”
“Lack of real-time support incase of unexpected issues that blocks me from completing the application
”
Anticipated customer’s pain ponts:
“Long wait times and afraid the signup process is time-consuming, causing frustration and impatience”
“Customer might find the process confusing because usually credit card signups are done by themselves ”
“Not enough training or insufficient training, making it harder for us to complete the form”
User Flow
Given the intricate nature of the application form, it was imperative to ensure propery coverage of all legal rquirements, particularly the financial nature of this sign-up process.
This is the first quick draft to highlight the key questions that need to be asked and a few pages were added later on due to stakeholders feedback
Design 01
⭐ Before starting, we had to use Roger’s design system which includes all typography, colours, icons, and components.
Here are a few mockups of the flow. Please click the Figma link below for the initial mockups to cover the basis.
We initiated the process with high-fidelity designs because we had to use Roger’s design system for brand consistency. Simultaneously, our content writer and I collaborated to ensure alignment between UX content and the overall user experience within the designs.
User Testing
Our UX researcher lead the user testing for this study, and we came to the conclusion that option for a real-time observation approach to understand how agents navigated the application as if they were assisting an actual customer wanting to sign-up would be the best approach.
We utilized FigJam for this session, involving 8 agents to interact with the entire application process and share feedback on usability. The evaluation covered the overall user journey, including but not limited to navigation and impression.
Here are the results from the user testing in sections:
Questions and instructions refinement
Focusing on condensing some of the screens by combining the some of the questions into one screen where applicable so better speed up and streamline the completion process.
Leveraging Roger’s internal tools
Suggesting using Roger’s internal tool (Oneview) to pre-populate their information to the application for quicker and easier process
Adding helpers in the form fields
Enhancing the user experience by incorporating searchable fields, particularly in extensive lists related to fields of work or study, and integrating searchable addresses for improved accuracy.
Design 02
Taking the user testing feedback in we made the following changes:
Added the option to pre-populate the form from Oneview (Roger’s Internal tool) for pre-approved customers. This will only pre-populate the Personal Information and Contact Information pages
Consolidating questions where feasible across various screens, I streamlined the prescreening process onto a single page, utilizing statements and a singular checkbox for confirmation, as opposed to radio labels, to minimize the number of clicks required for user interaction.
Implemented search functionality in dropdown and input fields containing more than 10 options, enabling users to search and view dynamic results or receive a "no results found" notification based on their input.
Before
After
Final Pages
This is the final MVP version with all the key pages of the application.