UX DESIGN • UI DESIGN

ThePowerMBA / Redesign of payment process

ThePowerMBA / Redesign of payment process

PaymentCover

Introduction

Introduction

During my time at ThePowerMBA I was asked to redesign the payment flow and order page to introduce new functionality.

My role

My role

I was the only designer on the project collaborating with the technology team.

The approach

The approach

We started the project by defining the user stories for the capabilities of the page. The functionalities were defined from a UX and Business perspective. However, we were at the same time limited by the technical possibilities and the third party support from payment providers.

When the user stories where done I created a flow chart of the payment process and the different outcomes. The flowchart was a great way to align everybody in meetings and discussions.

coverGrid
Flow chart of the payment process and what happens in each case, click to enlarge.

When the flow chart had been approved and the complete payment process defined I started exploring design solutions. First by using paper and pen and then moving to digital low and high-fidelity mockups.

Throughout the process, I shared advancements with technology. This enabled them to start focusing on the development of functionality and we could advance towards the finished solution. 

PaymentFlow
Complete payment flow, click to enlarge.

Payment flow

During the process we discussed the placement of the different objects. I decided to place the resumen block first on the page to give the user the ability to confirm that the right product is in cart before continuing with the purchase. 

PaymentPageStand
Payment page, click to enlarge.
ErrorHandling
Error handling.
OrderStatus
Order status page in pending, click to enlarge.
MobilePay
Mobile screens
Mobile screens

Reminder

If the process is abandoned before the payment is done a reminder email is sent out to the user. The email is sent out to remind the user to finalize the purchase. The email is sent out 2-days, 1 week and 1 month after the abandoned purchase.

RemincerEmail
Reminder email desktop and mobile

Order page

For the order page I designed a number of version depending on the payment method used. For the elements containing a list I used a mono spaced font to improve legibility. I also focused on making the status of the list items to stand out.

ElementsOrder
Orders depending on payment method

Designed by Gustav Dybeck

Nuura