The cart and checkout is one of the most important pages on the BuildDirect website. The problem with the previous design, was that users were having a hard time understanding the cart page, they couldn't find the checkout button, there were too many distractions and they ended up calling in to fulfill their order through our sales team.

 

Our solution was to simplify and organise content, improving usability and the visual design to gain trust from our customers. We have many different scenarios to account for with free sample orders, heavy orders coming from multiple warehouses and the list goes on... 

 

For this project, I was given very basic desktop wireframes of one scenario which I took and expanded on. I continued to research and expanding on the design planning for the different scenarios while keeping user experience and usibility at top of mind. I created a fully responsive interactive prototype which was tested with users and improved based on the feedback. 

Once the user has confirmed their order and proceeds to checkout, they are taken to the checkout page. The problem with our old design is that the user couldnt reference their cart, and they were "greeted" with a really long form which was quite overwhelming. 

 

I came up with the solution to organise the large amount of information separating up the checkout text fields into three sections: 1. Contact Information; 2. Shipping Information and 3. Payment Information. When the page first loads, only the Contact Information section fields are shown giving the appearance that the form is quick and easy to fill out while displaying the closed sections to be filled out (disabled) below. By clicking the Save and Continue button, the information that was just filled out is summarised and the next section is then revealed. The user still has the ability to go back and edit the previous section if necessary.

 

Having the sticky Order Summary with available payment options to reference builds trust and reduces the likelihood of the user going back to the Cart page, or having filled out the whole page only to find out we don't accept a certain method of payment.