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.
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.
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.
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.
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.
Designed by Gustav Dybeck