UX DESIGN • UI DESIGN

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

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

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.

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. 

Complete payment flow, click to enlarge.

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. 

Payment page, click to enlarge.

Error handling.

Order status page in pending, click to enlarge.

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.

Reminder email desktop and mobile

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.

Orders depending on payment method

Designed by Gustav Dybeck

gustav.dybeck@hyperisland.se