Chris Zappala.
SaaS

SaaS mobile app

At CardTapp, I owned UX design end to end for a mobile app used by mortgage and real estate professionals, conducting my own research to modernize a dated experience and fix real points of confusion for users.

Company
CardTapp
Role
Sole Designer
Timeline
2016
Focus
UX research, mobile app redesign
Overview

CardTapp's core product was a SaaS mobile application that mortgage loan officers and real estate professionals used to represent their brand and stay connected with clients. As the sole designer on the team, I owned UX direction end to end, including conducting my own user research, to understand where the experience was falling short and lead its redesign.

The challenge

The existing app had grown outdated, both visually and in its core sharing flow, and there hadn't been a structured research effort to pinpoint exactly where users were struggling. As the only designer on the product, it was on me to build that research foundation myself before proposing any redesign.

My Process

Research

I ran research across several methods to build a complete picture of where the experience was falling short:

  • Competitive research
  • Heuristic review
  • Feedback from sales and customer success representatives
  • Feedback from users
  • Stakeholder interviews

What I learned:

  • Users were misunderstanding certain parts of the sharing process
  • Installing the mobile app was confusing for Android users
  • The look of the app was dated; potential customers weren't comfortable with the app representing their brand
Legacy CardTapp app on a mobile phone mockup, showing a mortgage loan officer's profile with dated navy buttons stacked below a headshot and company logo
The legacy app I inherited and redesigned.
Persona

Based on what I learned through research, I developed a persona to keep the team grounded in who we were actually designing for:

Meet Josalyn Smith

An entrepreneurial business person who knows the value of time and information. Believes that technology can assist in growth.

Her Goals

  • Gain repeat business and positive word-of-mouth promotion
  • Close deals efficiently
  • Know when a lead is interested

Her Pain Points

  • Not having access to up-to-date data
  • Losing deals to competitors
  • Missing opportunities to connect with referrals
Portrait of Josalyn Smith, the persona representing CardTapp's target user: an entrepreneurial business professional
Task flows

With the persona grounding who we were designing for, I mapped out the key features to focus on for the redesign.

Main Tasks

The focus was put on the following tasks:

  • Users adding the app to their phone and registering
  • Sharing the personal mobile app between potential customers
  • Users engaging with the calculators. When potential customers use the calculator, the app owner is sent a notification
Task flow diagram for the new share process, showing four mobile screens from entering a recipient's info through sending a note and a final thank-you screen
The new share process: from entering a recipient's info to a confirmation note that lets the app owner know a lead connected.
Wireframes

Through an iterative process, I arrived at the following wireframes.

Wireframe of the Share App form with fields for the recipient's name, phone number, and optional email
Share App: entering the recipient's info before sending the app link.
Wireframe of the Share App confirmation screen explaining an SMS text with the app link will launch
Confirming the SMS text and link before it launches.
Wireframe of the Send a Note screen with a status dropdown and a notes field about the contact
Send a Note: logging the lead's status and a note for the referrer.
Wireframe of a thank you screen confirming the note will help the referrer connect with the contact
A thank-you screen confirming the note was sent.
Wireframe of the Pre-Qualification Request calculator with sliders for purchase price, down payment, and FICO score
The pre-qualification calculator: purchase price, down payment, and FICO score as adjustable sliders.
Wireframe of a thank you screen confirming the pre-qualification request was sent to the member
Confirmation that the pre-qualification request reached the member.
Wireframe of the app home screen with the loan officer's profile, contact options, and a bottom navigation bar
The home screen: profile, contact options, and cobranding all one tap away.
Wireframe of the final registration step with fields for full name, phone number, and email, plus a Facebook signup option
The final registration step, with a Facebook signup shortcut alongside the standard form.
Testing

I conducted user testing to validate the designs throughout the process.

Here's an example of how we tested one feature around sharing. InVision clickable prototypes were a valuable tool to demonstrate new features internally and to test with users.

The Task

Use the share feature to send this app to a friend.

The Results

  • Users were successful in completing the sharing task
  • They understood that notes were intended for the owner of the personal mobile app
  • They understood what fields were optional and what things they could skip
InVision clickable prototype of the Share App screen on a phone mockup, with the on-screen keyboard open for entering a recipient's info
The clickable InVision prototype used to test the share task with users.

Final Designs

Visual Design

With the flows validated, I brought the designs into CardTapp's visual identity: brand blue, real iconography, and photography in place of the wireframe's placeholder circles.

Final visual design of the Share App form with fields for the recipient's name, phone number, and optional email
Share App: the sharing form in its final visual design.
Final visual design of the Share App confirmation screen explaining an SMS text with the app link will launch
Confirming the SMS text and link before it launches.
Final visual design of the Send a Note screen with a status dropdown and a notes field about the contact
Send a Note: logging the lead's status and a note for the referrer.
Final visual design of a thank you screen confirming the note will help the referrer connect with the contact
A thank-you screen confirming the note was sent.
Final visual design of the final registration step with a profile photo, full name, phone number, email, and a Facebook signup option
The final registration step, with a Facebook signup shortcut alongside the standard form.
Final visual design of the app home screen with the loan officer's profile, contact options, calculator, and a bottom navigation bar
The home screen: profile, contact options, and the pre-qualification calculator all one tap away.
Final visual design of a thank you screen confirming the pre-qualification request was sent to the member
Confirmation that the pre-qualification request reached the member.
Outcome

The redesign shipped and the numbers followed quickly:

12%
increase in sales conversion rate after launch
85%→96%
completion rate for the share feature
73%
of customers chose the new template
  • Customer feedback was positive. Current users were happy about the new style, and they enjoyed the flexibility of choosing icons to go with each link from an icon library.
  • Users were given the option to keep the "classic" style or switch to the new template.
  • Customer service stopped receiving complaints from customers regarding the sharing process.
  • Sales were no longer fielding objections to the visual style of the personal web app.

Next case study

Generative AI workflows