While Visa is traditionally known for their credit cards, they wanted to reframe themselves to be more than that. The new Visa.com reflects their larger mission– purpose-driven, unlocking the age of access for everyone, everywhere. We designed the site to communicate this.

My Role

- Strategize a new way to tell Visa's story in the digital space

- Design Visa's site with the new visual system as well as update old pages

- UX/UI Design, Prototyping

Agency

Digitas

To first rethink the approach and the tone of the new experience, we created a messaging framework that focuses on 4 "access" pillars as a guide: innovation, connection, inclusivity, and thriving.

Then we refreshed the cluttered, content-heavy navigation. By studying the analytics research, pulse data, and A/B testing, we updated the navigation so it is now simple, and audience/purpose led. We were able to remove the word 'card' to reinforce the idea that Visa is not just a credit card.

A/B Testing research with removing the words "Card" and with/without the word "Visa" in front. Results show that removing the word "Card" did not impact SEO.

Nomenclature change exploration and auditing/organizing links under the new L1 nav.

Example of the old navigation for cards:

New navigation, for individuals:

The new Homepage consists of brand chapter components that display any related content when the user scrolls horizontally. After these contents have been introduced, smaller individual content tiles are used to house global or regular content.

Here is the side-by-side content map and the designed homepage we created for the initial launch that applies the messaging framework.

Homepage interactions for brand chapters and content tiles:

Visa's new visual identity uses cut-out photography to highlight everyday people around the world. We selected over 100+ people to cut, and applied the direction to 25+ different regional backgrounds to be mindful of diversity and inclusivity.

Homepage examples for different regions. We created a placement system in the grid for different regions to follow to add flexibility whenever they want to replace the people on the page.

Colombia
Taiwan
Indonesia
Oceania
New Zealand
Russia
Caribbean
Canada
Sub-Saharan Africa

The old experience had endless links about what Visa stands for under the 'About' tab in the nav, confusing the users on where to click. With the new site, we created 4 new purpose led pages under the new 'Everyone' tab that combines all the loose links while telling a story. Each page reflects what Visa supports internally in their workplace and globally to help other communities.

For Visa, each page has an "owner" that oversees the content per page. By working together with the content owners, we made sure their needs and goals for the page were aligned while still applying our new messaging framework. Another aspect to keep in mind was that the stories had to be global and not US only, as these pages were to be used throughout all the regions.

Leading by Example
Visa opens doors for all over the world so more people can participate in the economy
People + Possibilities
Addressing economic inequality by empowering people traditionally excluded from the financial system
Supporting Communities
Empowering underserved communities and supporting local economies everywhere
Protecting Our Planet
Committed to driving sustainable commerce as we work towards a more sustainable future

Here is one of the 'Everyone' page. Leading by Example introduces Visa as a leader that can open doors throughout the world by supporting small businesses, fintechs, committing to sustainable efforts, and more.

All four pages has a brand blade at the end to show that they are connected.

Lastly, as we look at the site holistically, we worked with page owners to either create a new page or visit existing pages to apply new visual, photography, and copy direction.

Auditing process to see which pages are 'priority' to re-design first. Some of the factors we're considering include: click rates, most used products, navigation items.

Select examples:

Existing page - before
About Visa
Existing page - after
About Visa
New page - wireframe
Access and Infrastructure
New page - proposed design
Access and infrastracture