Visa User Research & Interface Design for Qatar 2022

ckm’s thoughts
5 min readApr 7, 2022

Overview

Visa contacted us to make a prototype to gamify the Visa Go application for the Qatar 2022 World Cup.

The Problem

Currently Visa had no way of keeping users engaged when on their Visa GO app. The most important questions at this stage were:

  • How do we make them engage through gamification?
  • How do we make the experience delightful?
  • How do we make users want to compete?

My Responsibilities

I was tasked with user experience and user interface design whilst working on interactive designs. I was expected to translate business and user requirements into a fully functional application that users would engage with for the Qatar 2022 World Cup.

User Research

After the business had conducted competitor research, myself and the team decided to undertake some user research in order to better understand how our customers would interact with our the Visa Go app.

I wanted my team to further understand the problem we were solving, this is why I created a screener survey to send out across social media. This was a great way of getting in front of ex users & current users to get vital information on what frustrations/pain points they had.

I then went on to conducted further user interviews over Zoom, these were absolutely vital for us to understand fully what we were looking to build.

Affinity Mapping

These are most of the notes I made when interviewing, after carefully looking through them all for 2/3 days we had carefully placed them all into groups based on similarity.

Biggest groupings:

  1. Convenience (User wanted all the information readily & easily accessible)
  2. Ease of use (Many users complained about the complicated previous app)
  3. Navigation (Users wanted to understand where they were at all times in the application)
Affinity mapping groups from workshop

The Problem statement

User needs a way to quickly and efficiently see balance & offers on the go when in Qatar for the 2022 world cup.

Persona

Primary persona

Moodboard

The first thing I set out to do was to see how other applications where gamifying to do this I downloaded loads of apps from the app store & looked on dribbble for inspirations. My mood boarding also acts similarly to comparative analysis as I want to see what other companies are doing in the same sector & see if I can bring any ideas across to help inform my own design decisions.

Mood boarding for Visa

Further Ideating

We groups our ideas into three categories

  1. Transactional moments (How could we utilise these moments in the app)
  2. Game ideas (What game could we use to engage users)
  3. Leaderboard competition (How could we pit users against each other to create a friendly competition)
Ideating on FigJam

Style Guide

As we were working with Visa we wanted to ensure we were sticking to all brand guidelines. When meeting with the Visa Go Manager they let us know that nothing had to be kept the same, the only thing they asked us to do was to keep the Qatari maroon as our splash page colour.

Qatar maroon for splash screen

Wireframes

When we started we had very basic ideas on what we wanted to do, but as the project went into its third week a lightbulb moment, suddenly it hit me we need to do a quiz on Qatar & the world cup.

lo fi wireframes
Lo-fi sketches

Next we moved up in fidelity and this is were the app really started to take shape.

Mid-hi fi wireframes

From here we went to present to Visa & they loved the app we were building, this was very pleasing for us to hear that our assumptions were correct.

Final designs before prototype

Prototype

The final home screen is below, we managed to place users balance, latest transactions & the leaderboard all in one place. This allowed users to engage with the application with no issues as everything is labelled and titled accordingly.

  1. Home screen
visa homescreen prototype

2. Lock screen(Notification)

3. Game screen (Question answered)

Challenges

The challenges we faced were how to break down all the information and show this to the user in way which wasn’t to overwhelming but helpful when stationary & on the go. Other challenges where to manage stakeholder expectations as they wanted to add extra features along the way which when we tested showed no value to the user.

Conclusion

On this project I grew as a person as I started to notice what users really need rather than what they say they need. I believe this learning will allow me to enhance many applications & websites in years to come.

Next Steps

Now Visa have seen the prototype they want us to work with the developers to implement this for the upcoming world cup. We shall be working with developers and product teams to handover all designs and research.

Client: Visa Go

Sprint Length: 6 weeks

Tools used: Figma and Protopie

Lessons learned: Less options less chance of problems for the user

At any stage you feel you would like to see me just ask I always have my files carefully separated for each and every project I work on.

-CKM Design

--

--