Old version of the personal mobile app
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
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
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
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
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
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.