Chris Zappala
UX Designer

CardTapp

Redesigning the personal mobile app

Overview


About the Company 

CardTapp builds sales productivity tools that help facilitate and follow up with connections more effectively. They offer personally branded mobile apps, which allow individuals to set themselves apart, showcase their products and services, and be more proactive about following up with potential partners, prospects, and customers.


Problem Statement

CardTapp's mobile app had usability issues in the sharing process, registration pages, and calculators. Additionally, reworking the visual design of the mobile app would help elevate their product offerings.


My Role

I was responsible for all aspects of design including task flows, wireframes, clickable prototypes through finished visual comps. As well as working with engineering to ensure what was built matched designs.


Project Goals

  • Improve the share and registration features and eliminate areas of confusion

  • Make the calculator feature an easier and more efficient experience

  • Refresh the visual design of the mobile app


Business Constraints

  • Maintain existing feature sets

  • Use fast-loading web fonts to increase the download speed of the progressive web application

Discovery
CardTapp Mobile App

Old version of the personal mobile app

Research

  • 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 (See accompanying image). Potential customers weren't comfortable with the app representing their brand 

Persona
CardTapp Mobile App

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 Ponts

  • Not having access to up-to-date data

  • Losing deals to competitors

  • Missing opportunities to connect with referrals

Task Flows
CardTapp Mobile App

New sharing process

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.

Wireframes
CardTapp Mobile App

A first draft of what became the new sharing process

An Iterative Process

Starting with low fidelity wires, I built out the proposed task flows. I continued to iterate and make improvements. 

Once consensus was built among stakeholders, and technical requirements were met, I moved on to higher fidelity wires and clickable prototypes.

Prototypes
CardTapp Mobile App

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

Visual Design
Outcomes

Results

  • Customer feedback was positive. Current users were happy about the new style. 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.