Cart 0
UX Video/Audio Resources Fast Company Articles
Cart 0
UI/UX Services & Support

Visa: tRoon Journey Mapping

An animation of Visa Features for Solutions in Sales Enablement Material.

OVERVIEW
Solutions are a collection of Visa products and capabilities that tell an end-user’s journey. I worked on the customer journey for the Top of Wallet solution, where we showcase Visa’s products and capabilities for the Visa Signature card.

TIMELINE
3 months

TOOLS USED
Pen & Paper, Figma, and Photoshop

My RoLE

As a UX/UI designer, I worked with Visa’s stakeholders and another designer to develop various personas with a storyline to tell an end user’s journey. I was responsible for designing user flows for the persona that the sales team could demonstrate to potential clients.

PROJECT
I had an opportunity to work on another team’s project called Top of Wallet Solution with the NA Deals Team. I collaborated with their team and another designer to develop a persona and journey with 6 key moments/storylines. These design artifacts will be used by the sales team in their day-to-day interactions with Visa’s clients.


WHAT WAS THE BUSINESS IMPACT?
We needed to highlight several products working together to tell a cohesive story about Visa Signature capabilities through the eyes of the customer. 

BUSINESS OBJECTIVE (PURPOSE/WHY)
We needed to show a user flow that began with a card application process and resulted in a successful registration of a luxury experience.

Card illustration-9.png

RESEARCH
All our research was done in-house with our sales and marketing team. We collaborated with both stakeholders and our product team to develop the persona and storyline benchmarks.

 
Troon Personas.png
 
 
Portfolio-Banner.jpg

JOURNEY MAPPING
We had various revisions and ended up on this 6-step storyline. I will be showcasing a user flow for step 5.

  1. Customer applies for a Visa Signature Credit Card, receives a digital card, and accesses benefits

  2. Redeems a card offer, purchases a digital camera, and chooses to pay in Installments

  3. Customer taps to pay at the grocery store, earns rewards and unlocks a statement credit.

  4. Pays a phone bill using card-on-file and unlocks a cellphone protection benefit.

  5. Customer reserves a luxury hotel, Silvercar, and a Troon golf session for a family road trip

  6. Customer reviews her card statement and pays it instantaneously.

WIREFRAMES

We demonstrated that Visa Signature card is the most used card globally of Visa’s products and capabilities. I collaborated with all stakeholders on developing the persona and storyline to tell the end-user journey.
Low-Fidelity Wireframes

 

1: Hotel Search Screens

2: Success Message

3: Car Rental Results

4: Reservations

Hand draw wireframes and gray wireframes

5: Book Now Screen

6: Final Reservation Success Message

IMPLEMENTATION - DESIGN
Overall design is showcasing the luxury products emphasizing the user’s experience for their family vacation. The tile and images are depicted bigger to have the customer reserve a luxury hotel, a Silvercar, and a Troon Golf session for their family road trip.

Hi-Fidelity Wireframes

 
 
 

A11Y

I’m a big believer in taking annotations to hand off to development. Adding annotations is about highlighting the accessibility elements on the page, to remove all barriers.

A11y Annotations

 
A11y.png
 

CONCLUSION

All parties developed a user flow based on a storyline ready for user testing and demonstration by the sales team for future clients. 

CLICK THE VIDEO TO SEE THE USER FLOW