Meeting the needs
of modern commerce
Launching a secure digital platform showcasing Visa’s B2B tech and solutions to fintechs, partners, merchants and acquirers.
The Visa Navigate Experiences platform provides a ways for Visa’s B2B customers and partners to explore the latest products and technology in an engaging, interactive and responsive web format. The design and architecture of the platform support not just the storytelling of these products in use, but also allow users to engage with the platform through scroll-triggered animations, embedded demos, and interactive quizzes.
Client Objective
The initial platform concept was born during the global pandemic. There was a business need to continue product sales and a social duty to adapt the face-to-face meeting and sales journey. The first version of the platform’s objective was to provide the user with a virtual experience akin to what they would experience in real life.
However, it soon became clear that the potential storytelling nature of the content was more valuable and scalable than a virtual environment. So we used an audience-first lens to develop a narrative around products that are often difficult for Visa to explain out of context.
Design Process
During design, we worked very closely with the client to understand the product story we’re trying to tell in order to make sure its significance is well reflected in the site design. Speed of scale can often be held back by design features so once we understood the need, we quickly agreed on a component-first design approach.
This meant that we had a defined design framework to work from so wireframes and structure were already in place, helping to speed up the design process. We also designed and created reusable components which again helped expedite the development process, as well as create a standard of design throughout. This meant that each section, although a different focus, is linked visually and on brand.
Build Process
During the development phase we adopted an agile project management approach which allowed us to work collaboratively with the client, flexing based on their needs and work stream priorities. We worked in fast paced sprints and used project management tools like kanban boards and estimation points to understand and convey completion timings. This approach also gave clarity to any change of timings should there be a hold-up either side or scope change.
Technical Detail
The Front End of the platform is built using the React JS framework. This was chosen due to the key benefits of:
- Speed – Different developers can write individual parts and all changes made won’t cause the logic of the application
- Flexibility – Compared to other Front End frameworks, the React code is easier to maintain and is flexible due to its modular structure. This flexibility, in turn, saves huge amounts of time and cost to businesses.
- Performance – React JS was designed to provide high performance. The core of the framework offers a virtual DOM program and server-side rendering, which makes complex apps run extremely fast.
- Reusable Components – One of the main benefits of using React JS is its potential to reuse components. It saves time for developers as they don’t have to write various codes for the same features. Furthermore, if any changes are made in any particular part, it will not affect other parts of the application.
The Back End is a custom built application linked to the Front End via an API and allows visibility of site users, sign up email white listing, marketing consent and holds form entries, all with the functionality to export this data should it be needed.