DESIGN THINKING & INTERACTION DESIGN
Designing a mobile and desktop web app experience for user re-engagement.
CLIENT:
Major Fintech Bank (NDA)
MY ROLE:
UX/UI Designer, Interaction Designer
Project Focus & Role Impact
Team
Experience Director, Experience Designers (2), Visual Designer, CRUX Marketing Team, Engineering TeamTools Used
Sketch, InDesign, Box, JIRAIn our client’s application, customers will sometimes abandon the application process before completing it. We determined we can reduce drop off and re-engage with customers. I spearheaded the ideation, creation, and refinement of two features and modules. I incorporated these new modules into our sophisticated design system, contributing to its growth and aiding in keeping its integrity. We believed that with the implementation of these features, our client could reconnect with a high percentage of their original customers.
Timeline: 7 months
1. The Problem
We designed the mobile and desktop credit card application process for a Major Bank client. While signing up for a credit card, a percentage of customers will abandon the application process before completing it.
Our client asked us to solve for two questions:
How can we encourage users to submit their contact information before leaving the flow?
1.
How can we reduce drop off and re-engage with customers that do leave?
2.
2. Research: Marketing & UX
As we did our research, we sought to keep these things in consideration:
Determine the steps where customers are leaving.
Re-engage with qualified customers that didn’t complete the application.
Look at multiple ways to re-engage with customers.
APPLICATION FLOW, PART 1
~40%
INTRODUCTION
CONTACT INFO
~6%
~3%
FINANCIAL INFO
PERSONAL INFO
~4%
APPLICATION FLOW, PART 2
ACCOUNT SETUP
~8 to 11%
Our marketing team studied the analytics and determined the percentages of user drop off during the application flow.
After looking at the numbers, we agreed that the Introduction Section and the Contact Info Section were prime places to re-enage users.
*The numbers shown are example averages of the total mobile experience and inclusive of the Mobile Web and Native App for three client partners.
The UX team tried to place ourselves in the user’s shoes:
How must they feel to suddenly be in a credit card application process and were asked to leave their private information? How can we design with that in mind?
As we considered multiple solutions, we determined that as we built we needed to keep three things in mind:
SECURITY
Both solutions should provide secure means to capture a user’s information and re-engage with them at a later time.
EASE
The on-ramp for the user to provide their information and return to the application should be as frictionless as possible.
VERIFICATION
We’re dealing with people’s sensitive information: contact, financial, and personal identification.
3. The Solution(s)
Narrowing Our Recommendations
Our marketing team presented a number of potential solutions, and our client concluded that we should conceptualize two of them.
REMIND ME LATER
Provide the user the ability to be reminded later with a SMS link to the application.
ARE YOU SURE
Enhance the current back-button speed bump modal to have a way to re-engage with the user if they haven’t completed the application.
We divided the acquisition process into three points: 1) the intro section, 2) pre-contact info collection, and 3) post-contact info collection.
1. INTRO SECTION
REMIND ME LATER
2. PRE-CONTACT INFO
3. POST-CONTACT INFO
ARE YOU SURE
Moving Forward…
Moving forward, I’ll focus on the solution I ideated, Are You Sure.
4. The Process
Design Thinking
💖
EMPATHIZE
Our research allowed for us to look at the application process from the perspective of the user. We knew to make verification, security, and ease our influence as we designed.
✏️
DEFINE
We designed with these features in mind:
We knew the steps where customers were leaving → Have a modal pop up when the user attempts to leave the application at these steps.
We wanted to re-engage with qualified customers that didn’t complete the application → Send them a scheduled SMS with a link that invited them to return to their saved application and complete the process.
In order to send the SMS link, the user needed to submit their contact information → Before users leave, give them a final opportunity to provide their contact information in a pop-up modal.
💡
IDEATE
We went through different iterations of the flow of Are You Sure and determined two main scenarios:
1) PRE-CONTACT INFO COLLECTION
There’s a point in the user flow where the user can exit the application process, but they still hadn’t submitted their name and number. The first instance of the Are You Sure modal asks if the user would like to complete the application at a later time. If they affirm, the modal asks for the user’s name and number. Once they submit, the web app sends feedback, and the user receives an SMS with a link to the application.
2) POST-CONTACT INFO COLLECTION
If the user submits their contact information and attempts to exit the application, the modal asks for the user’s number and email. Once they submit, the web app sends feedback, and the user receives an SMS with a link to the application.
🛠️
PROTOTYPE
Our visual designer made a prototype to send to the client.
📝
TEST
We sent the Mobile and Desktop Web App UX interaction notes, copy, and visual design to the external development team.
Conclusion
This was an amazing opportunity to create and own a web application from beginning to end in the Agile process. And through research, I learned key characteristics products should have when engaging with users’ personal data. If I were to complete a similar project in the future, I’d like to do usability testing with real users.
We submitted the deliverables to the client and the development team. However, since our team was going through transitions with the client, we were unable to see the results regarding customer re-engagement.