Introduction
As an avid user of the Amazon website I’ve always found the usability of the site to be really poor. I decided to test my skills and redesign the Amazon checkout pages. The main objectives were:
- Bring consistency to the interface
- Clean up the design and colour scheme
- Add common functionality to specific areas
- Reduce the number of steps
Analysis
Breadcrumb trail
My starting point was going through Amazon’s checkout phase and getting current screenshots of each page. At first, I found some of the design elements really confusing. The breadcrumb trail had two steps Addresses and Gift Wrap – most of the time as a normal user you’d probably automatically skip past those as it isn’t in the natural flow of the checkout process. To add to this, most of the breadcrumb names don’t make any sense in terms of describing what the actual step does.
The design, the colours, the horror!
The consistency of the design was awful to say the least. Pages had no consistency in layout, colours or look and feel. For instance, submit buttons are placed randomly throughout. Adding new payments or addresses were scattered in different places and doesn’t allow the user to quickly know where to go to add new details.
Sign in / Create account
People would praise Amazon’s sign in process but to be honest I found the layout and language perplexing. As a new customer you wouldn’t except to type in your email address and click on sign in as you don’t have an account yet!
Gift wrapping
The gift wrapping step is unclear in terms of layout and functionality. There are two options:
- Don’t gift this item… but you can still write a gift note for free
- Gift wrap this item with “Amazon Gift Wrap” paper at a cost of £2.92
The radio buttons are perplexing as one would expect to either wrap the items or not. The message for free option seems like a waste of the customer’s time. The layout isn’t tender on the eyes as the proximity between radio buttons and textarea is quite far and even further away if you have a larger monitor.
Delivery options
A major issue with the checkout is the inability to view your shopping basket at anytime throughout. Amazon had to (most likely) compensate by placing the items within the page to allow users to remember what ones they chose. This seems like the case with the delivery options page. The typography isn’t up to scratch; to stop excessive eye strain its recommended to keep the width to approximately 500px. Its difficult to pick the features of each delivery option without having to read the entire option text.
Another aspect that will eventually confuse users is the chance to go to a different part of the process that isn’t the next step. For example, “Change quantities or delete?” button allows the user to go away from this page without completing the step properly – by choosing their delivery options. Hence Amazon have to compensate for this by allowing the user to change their delivery options on the last (Place your order) page.
Selecting an address
The only issue is the position of “new delivery address” placed below – isn’t logically placed.
Place your order
The final screen nicely rounds up everything the user has chosen. However, the design is a different story as with most of the amazon pages.
Solution
Identifying all the problems helped me create initial concepts and try to push consistency across the design. I was able to reduce specific steps and allow for a more consistence as well as enjoyable user journey (well I think so!).
Points to take note of in the redesign
Selecting an address
Firstly, entering a new address is done easily – searching via post code or entering manually and both methods bring up more form fields underneath the column. This bit of functionality is also permanently placed. Numbers are wrapped around a circle and used to highlight the different addresses as shapes/numbers are more commonly known to be easier to remember.
The two steps have been reduced into one:
Once the user has selected an address, they are presented with the delivery options:
Confirmation page
The styling of the page has been changed but most of the content remains in the same layout. The left-hand column deals with the delivery address and the user’s items while the right-hand column deals with the payment. What is different is how the functionality is used to change any details.
For example, rather than having a completely separate page for sending to multiple address – it is handled on the confirmation as well as gift wrapping items.
So sending to a different address is done via a secondary modal dialogue box (a modal which doesn’t disable the page like a primary modal).
What have we learnt?
Most of the changes made allow the user to confidently use the checkout process by allowing:
- Clear design, simple design
- Understanding of what each page does via the breadcrumb trail
- Giving the user the ability to undo their actions
- Consistence areas (i.e. right-hand column adding new addresses/credit cards)
- A fixed width – making sure the pages don’t jump around in terms of layout and design reduces fear
-
The new sign page uses a link to create user account rather the old radio button method.
-
Good layout structure is brought to all the pages. Where adding something new is handled on the right-hand side.
-
Once a user clicks on 'Select' button, the address turns green and slides to the left - displaying delivery options.
-
Select Payment page is very similar; adding new cards is done on the right-hand column. The gift certificate functionality has been changed to 'Piggy bank' to bring familiarity with what it does.
-
The confirmation page now sports a cleaner design - allowing the user to gift wrap or send to a different address rather than going to different pages.
-
The last page shows what they've order - receipt page as well as tidying up the promotional parts at the top of the page.
-
Selecting a different address brings up a secondary modal dialogue box.
-
The shopping basket can now be viewed on any page.
