Redesigning Gpay’s QR Scanning Microflow- UX Case Study

This case study is a series of events that I went through to improve the scanning QR microflow of google pay.

Kartikey Mehta
3 min readNov 26, 2022
High fidelity prototype

👉How did I start working on it?

This case study is a part of the UX Challenge that I worked on during the ‘UX Kickstarter workshop’ organized by Anudeep Ayyagari and Growth School.

The challenge was to choose a microflow for any existing app and improve its user experience. The time deadline was three days to complete the process and submit the case study, so the decisions were taken accordingly.

Choosing GPay for the challenge:

GPay has a sizable user base in India and offers users a very pleasant user experience when it comes to UPI payments, making it more convenient for them to pay with a QR scan rather than with actual currency. I chose this app because I wanted to enhance this experience.

👉Issues that I discovered:

It was difficult to spot any flaws at first glance. But how is it possible for something to be faultless? After using heuristic approaches to review, I found numerous situations where the experience may be improved. The problems discovered are mentioned in the image below.

Problems Identified through Heuristic Evaluation

After finding the scope for improvement and talking to a few people, I categorized the issues into major and minor ones.

Major issues:

How might I make users notice that they can access to Scan and Pay feature also by swiping right?

How might I help them get proper guidance while using that feature?

How might I help users repeat the QR payments easily

Minor issues:

How might I make it easy for users to see and understand what is written below?

👉Ideation:

I started looking for solutions after I had a good knowledge of the issues. A brainstorming session helped me to go beyond constraints and get various possible solutions. I prioritized a few of them based on the practical possibilities and thinking about the business impact they could create.

Possible solutions to the defined problems

👉Low-Fidelity Sketches:

I had a vague idea of what I needed to design at this point, but in order to bring it to clarity, I decided to create rough sketches before moving on to high-fidelity screens.

Low fidelity Sketches
Low fidelity prototype

👉Final UI:

After going through these stages I found myself ready enough to go on to Figma for final designs.

I made a very small adjustment here by changing the transition of Scan screen with a swipe to the right. But this small change can create a huge impact on the business as it will help users by becoming a signifier to the affordance of getting Scan Screen opened by right swipe and will increase their active user base.

Screen showing swipe transition
Scan Screen
Scan Screen with popup

👉My key learnings:

I learned a variety of topics throughout this two-week workshop that helped me in finishing this project, including:

How to identify and understand the problems as well as user needs

How to prioritize the main issues

How design thinking works

How to design with keeping both users and businesses in mind

--

--

No responses yet