Telfar Payment Page

As part of the Daily UXUI challenge, one of the tasks was to create a pavement page. In this case, the payment page was created for the brand Telfar

Problem Statement

To create a web-based payment page for a product (E-commerce)

Challenge

The page had to meet several criteria:

A form section to collect information
A card payment section
A review basket
One week deadline

Current Telfar Checkout

Telfar

The images below show the current Telfar page and the payment process users currently experience. This section of the site overall is functional and does lead the user to make a purchase. You can however see some highlights below.

Highlights

The brand identity does not stand out in the check out process

The image for the product being purchased was small

Font sizing is a bit inconsistent - price section

Low-fidelity wireframes

The first wireframe created for this challenge was low-fi and had all the context stored on one page. The content was divided into sections/ compartments. There is a progress bar so users can see how far they are in the buying process as well as 2 buttons at the bottom for navigation.

Mid-fidelity wireframes

The low-fi wireframes were developed by having two different pages; depending on if the address was added manually. The relevant text and titles were also added with text input fields. The colour scheme for the brand was consistent in the design as used in the buttons below and the price highlight section.

High-fidelity wireframes

For the final design, it was important to put the company logo on the top corner as part of the branding. Icons were finally added to the screen as well as button labels for the primary and secondary buttons. The images were also added to create a wholistic view of the design.