Contact

/ i-wanna-pay

I wanna pay

I wanna pay

tag : mobile/web/payment

company : Kuncie

date : 2022

roles : product designer

timeline : 2 weeks

date : 2022

roles : product designer

timeline : 2 weeks

company : Kuncie

date : 2022

roles : product designer

roles : product designer

timeline : 2 weeks

Improving the payment method experience for Kuncie’s users so we can make choosing payment less hassle than before.

Improving the payment method experience for Kuncie’s users so we can make choosing payment less hassle than before.

The content of this portfolio will include :

Act 00 - Prologue

Act 01 - The Brief

Act 02 - Approaching the Brief

Act 03 - The Implementation

Act 04 - re Approaching the Brief

The content of this portfolio will include :

Act 00 - Prologue

Act 01 - The Brief

Act 02 - Approaching the Brief

Act 03 - The Implementation

Act 04 - re Approaching the Brief

Act 00 - Prologue

Act 00 - Prologue

Act 00 - Prologue

Summary of everything

Summary of everything

The Brief

The Brief

The Brief

We were tasked to help make our payment method interface simple and more usable, the stakeholders believe that our payment methods interface hasn’t been performing very well due to how bad it looks since there are plenty of users that left the premise once they enter this page.

We were tasked to help make our payment method interface simple and more usable, the stakeholders believe that our payment methods interface hasn’t been performing very well due to how bad it looks since there are plenty of users that left the premise once they enter this page.

We were tasked to help make our payment method interface simple and more usable, the stakeholders believe that our payment methods interface hasn’t been performing very well due to how bad it looks since there are plenty of users that left the premise once they enter this page.

Constraints

Constraints

Constraints

We only have two weeks (1 Sprint) to work on the project we’re expected to deliver high fidelity with some research to validate our decisions.

We only have two weeks (1 Sprint) to work on the project we’re expected to deliver high fidelity with some research to validate our decisions.

We only have two weeks (1 Sprint) to work on the project we’re expected to deliver high fidelity with some research to validate our decisions.

Success Story

Success Story

Success Story

We were able to reduce the significant time for users to decide which payment they’ll choose for an item that they bought with the new design iterations.

We were able to reduce the significant time for users to decide which payment they’ll choose for an item that they bought with the new design iterations.

We were able to reduce the significant time for users to decide which payment they’ll choose for an item that they bought with the new design iterations.

Alternate Success Story

Alternate Success Story

Alternate Success Story

This iteration of the payment method doesn’t make it to implementation due to time constraints and limited manpower and deprioritization of this project, we instead have another version that is more feasible to develop.

This iteration of the payment method doesn’t make it to implementation due to time constraints and limited manpower and deprioritization of this project, we instead have another version that is more feasible to develop.

This iteration of the payment method doesn’t make it to implementation due to time constraints and limited manpower and deprioritization of this project, we instead have another version that is more feasible to develop.

Act 01 - The Brief

Act 01 - The Brief

Act 01 - The Brief

What are we trying to work on

What are we trying to work on

What are we trying to work on

The Brief

The Brief

The Brief

We were tasked to help make our payment method interface simple and more usable, the stakeholders believe that our payment methods interface hasn’t been performing very well due to how bad it looks since there are plenty of users that left the premise once they enter the this page

We were tasked to help make our payment method interface simple and more usable, the stakeholders believe that our payment methods interface hasn’t been performing very well due to how bad it looks since there are plenty of users that left the premise once they enter the this page

Specific Request

Specific Request

Specific Request

Make sure that all the payment methods are still shown fully but make sure it still looks neat and clean at the same time.

Make sure that all the payment methods are still shown fully but make sure it still looks neat and clean at the same time.

Act 02 - Approaching the Brief

Act 02 - Approaching the Brief

Act 02 - Approaching the Brief

How to work on it

How to work on it

How to work on it

Constraint

Constraint

Constraint

We only have two weeks (1 Sprint) to work on the project we’re expected to deliver high fidelity with some research to validate our decisions.

We only have two weeks (1 Sprint) to work on the project we’re expected to deliver high fidelity with some research to validate our decisions.

Methods

Methods

Methods

  1. Benchmarking

  2. Designing High Fidelity

  3. Mini A/B Testing

  4. Reporting our findings

  1. Benchmarking

  2. Designing High Fidelity

  3. Mini A/B Testing

  4. Reporting our findings

02.1 Benchmarking

02.1 Benchmarking

02.1 Benchmarking

We start benchmarking and exploring a few e-commerce and digital courses platform, to understand what sort of patterns exist out there and how can we adapt them to our payment method.

We start benchmarking and exploring a few e-commerce and digital courses platform, to understand what sort of patterns exist out there and how can we adapt them to our payment method.

We start benchmarking and exploring a few e-commerce and digital courses platform, to understand what sort of patterns exist out there and how can we adapt them to our payment method.

Why this Approach?

Why this Approach?

Why this Approach?

Benchmarking is one of the fastest ways to gain inspiration for our design concept by utilizing and understanding the common pattern that the web and apps use out there, we can start making our own version by adapting the existing design pattern.

Benchmarking is one of the fastest ways to gain inspiration for our design concept by utilizing and understanding the common pattern that the web and apps use out there, we can start making our own version by adapting the existing design pattern.

Understanding Patterns

Understanding Patterns

  • Pattern (A) less than 15 : Show All payment list -> user click on the payment that they want

  • Pattern (B) more than 15 : Categorize Payment List -> Choose Category -> Choose payment on the category

Gathering Requirements to decide which patterns are gonna be use

Gathering Requirements to decide which patterns are gonna be use

  • We’re gonna be adopting the list from Xendit since we’ll be using the system

  • There’s gonna be more than 15 payment methods

  • Make sure that the payment method is arranged like the data above

  • We’re gonna be adopting the list from Xendit since we’ll be using the system

  • There’s gonna be more than 15 payment methods

  • Make sure that the payment method is arranged like the data above

02.2 Designing High Fidelity

02.2 Designing High Fidelity

02.2 Designing High Fidelity

We know that there will be 15 or more payment methods that are available to use on our website, so we took the Pattern (B) approach to overhaul our payment method interface but some stakeholders believe that Pattern (A) is gonna work better on the interface so we prepare both iterations and will test it later on.

We know that there will be 15 or more payment methods that are available to use on our website, so we took the Pattern (B) approach to overhaul our payment method interface but some stakeholders believe that Pattern (A) is gonna work better on the interface so we prepare both iterations and will test it later on.

Why this Approach?

Why this Approach?

Why this Approach?

Taking the fast route on high fidelity since it will be more efficient to turn it into a prototype that can be tested by the user later on

Taking the fast route on high fidelity since it will be more efficient to turn it into a prototype that can be tested by the user later on

02.3 Mini AB Testing

02.3 Mini AB Testing

02.3 Mini AB Testing

We have Pattern (A) and Pattern (B) iterations to test out, we conduct the study unmoderated using a total of 20 participants, 10 Participants gonna be tested with Pattern (A) and the other 10 will be tested with Pattern (B)

We have Pattern (A) and Pattern (B) iterations to test out, we conduct the study unmoderated using a total of 20 participants, 10 Participants gonna be tested with Pattern (A) and the other 10 will be tested with Pattern (B)

Why this Approach?

Why this Approach?

Why this Approach?

We need something to help us compare two alternatives and have a proof for the stakeholders to consider since Actual A/B Testing could not be done due to some tech limitations on our end.

We need something to help us compare two alternatives and have a proof for the stakeholders to consider since Actual A/B Testing could not be done due to some tech limitations on our end.

02.4 Reporting our findings

02.4 Reporting our findings

02.4 Reporting our findings

We’ve concluded our mini A/B Testing now it’s time to understand how both patterns affected the way users use the interfaces.

We’ve concluded our mini A/B Testing now it’s time to understand how both patterns affected the way users use the interfaces.

Pattern (A) - Take more time to complete

Pattern (A) - Take more time to complete

Pattern (A) - Take more time to complete

As we’ve seen on the slide above that the pattern take more time to complete, this can potentially imply that the “show all” interfaces can make user overload with the available options, hence the time to decide also increase.


Minimize Cognitive Load to Maximize Usability, NNGroup (2013)

As we’ve seen on the slide above that the pattern take more time to complete, this can potentially imply that the “show all” interfaces can make user overload with the available options, hence the time to decide also increase.


Minimize Cognitive Load to Maximize Usability, NNGroup (2013)

Pattern (B) - Take less time to complete

Pattern (B) - Take less time to complete

Pattern (B) - Take less time to complete

Pattern (B) has managed to reduce the amount of time that the user needs to complete due to the fewer choices that the interface has, thus making it a more viable option to be implemented on the next iteration.


Minimize Cognitive Load to Maximize Usability, NNGroup (2013)

Pattern (B) has managed to reduce the amount of time that the user needs to complete due to the fewer choices that the interface has, thus making it a more viable option to be implemented on the next iteration.


Minimize Cognitive Load to Maximize Usability, NNGroup (2013)

Act 03 - The Implementation

Act 03 - The Implementation

Act 03 - The Implementation

The End Results

The End Results

Context

Context

Context

Sometimes life really doesn’t go our way, and changes can come anytime to turn things around.

Due to the lack of manpower and technical issues to execute Pattern (B) on the WordPress environment, we proceed to make an adjustment to the current WordPress design. We recently discovered this issue late in the development.


Where sadly I think we can notice it early in the development. Let’s just celebrate and call this an alternate success story

Sometimes life really doesn’t go our way, and changes can come anytime to turn things around.

Due to the lack of manpower and technical issues to execute Pattern (B) on the WordPress environment, we proceed to make an adjustment to the current WordPress design. We recently discovered this issue late in the development.


Where sadly I think we can notice it early in the development. Let’s just celebrate and call this an alternate success story

So what happens on the implemented version?

So what happens on the implemented version?

So what happens on the implemented version?

  • The payment methods are reduced to 8 options

  • The pay button is now sticky to make life easier for everyone

  • The payment methods are reduced to 8 options

  • The pay button is now sticky to make life easier for everyone

Act 04 - re Approaching the Brief

Act 04 - re Approaching the Brief

Act 04 - re Approaching the Brief

How to work on it if we have more resources and time

How to work on it if we have more resources and time

Usability Testing on the initial interface

We will uncover more issues better this way, we’ll understand immediately how users react and feel when they’re using the interface, starting with the brief and small time constraints that hinder us to understand the problem space better.

Designing High Fidelity with UT Report

We will have a better and solid understanding of the problem space through the UT and we can create something that is more resonating to the user instead of only listening to the brief.

Aligning Development More Often

As I’ve learned firsthand how less alignment could make changes appear very late in the development causing not only changes to the design but to the dev as well on approaching the task, having a bit more alignment and more backlog groom could potentially solve the issue

REAL A/B Testing

A proper A/B Testing for the the two patterns alternative, so the design decision can become more valid and clear with using a bigger sample and longer time durations