Amazon

Complete redesign of the Amazon application

DATE

March 2019

SOFTWARE

Sketch

Principle

SKILLS

UX/UI Audit

User Experience

User Interface

Introduction

I decided to deal with this subject because I have always trusted amazon and I usually order on this website. That is why I was interested to know more about the ins and outs of a project like this one.

Amazon history

While Amazon.com started out as a small ecommerce store selling only books, it grew into the world’s largest retailer in a relatively short amount of time. This impressive company has now expanded into a retailer of almost any product you could ever want or need (including fresh groceries), publishing, instant streaming, and much more.

Approach

Design Process Method

After conducting research into potential design methods that could be used for a project like this, I decided on using the Engineering Design Process (below) as a basis for the development of the clickable prototype.

The Engineering Design Process

I chose to expand on this by including an extra ‘test’ before the planning stage in order to identify the strengths and weaknesses of the existing app.

Research and analysis

UI design approach

For this project, in order to ensure a better understanding for the user, a better graphic approach and a better intuitive design, I decided to use a flat design approach, with aspects of minimalism, graphics and modernity (both defined and explored in more detail in Interdisciplinary Interaction Design).

To maintain sufficient branding image of Amazon, I referred to the original Amazon Shopping app components sticker sheet (provided by Google’s Material Design) throughout the design process.

Google’s Material Icons

Wish lists

In order to study and better understand the user interface (having a better UX approach) and the interaction design of their product sheets (how they presented the different products they sold) I decided to install a number of mobile "Shopping" applications. It also taught me information architecture to help and inform the creation of my design. The applications I explored that were most appropriate and similar to the design style I had planned to follow included :

From these apps, I identified 8 key aspects that I wanted to incorporate into the design for the Amazon Shopping app:

  1. Add buttons
  2. Use of icons throughout the site
  3. Upload images to lists and/or items
  4. Large thumbnail images
  5. Shortcuts from home page
  6. Add to cart button on right hand side
  7. Personalisation and customisation

  8. UX/UI Audit / Comments on the existing app

    To kick-start the design process, I conducted an initial usability test with 3 participants on the current design of the Amazon Shopping wish list pages. Key responses are portrayed below.

    Screens

    The 7 screens with 2 news features I chose to focus on were:

    Home page - Menu - Login page
    Artciles pages - Description of an item

    Two new features

    1. Page with ideas for decoration
    2. Page including a new augmented reality option

    3. Result of the audit Ux/Ui

      As a result of the initial research and the analysis of the existing app (among others), the specific design needs, features and functions that needed attention were clear:

      • Think about the user, the interaction he may have with the application when he wants to buy products or other for example.
      • Some features do not make use of affordances — using familiar buttons (considering their shape and dimension) to help the user identify that the asset can be clicked.
      • Button interaction states and feedback (i.e. where the user can tell if a button is pressed) should be clear on all interactions with buttons.
      • Some aspects may be deemed as ‘information overload’ (from the cognitive load theory) — especially as aspects are not clearly separated from one another.
      • Some buttons and interactions need to be spaced and positioned differently on the screen, especially to abide more with thumb zones (when applying Fitt’s Law to mobile design).
      • Create a design that utilises minimum usable design by: prioritising aspects, incorporating visual hierarchy and using proximity appropriately. Remove unnecessary content and information that takes up space.

      Design, planning and implementation

      After having done a lot of research work both Ux and Ui and so all this while thinking mainly of the user who is the very basis of my project. First of all, I based myself on the feedback from user tests and the specifications resulting from the research, I was able to start designing the new look of Amazon Shopping App with sketches and low fidelity wireframes showing the basic components: navigation elements, content areas and image placement, and including annotations to explain in more detail and functionality. Thanks to all the feedback

      Wireframes

      This stage was useful in helping to identify and visualise different design solutions, whilst also creating a foundation on which to build upon in the next stage.

      Final design

      Sign up - Sign in page
      Fingerprint login page
      Unlocking - Home page
      Aricle page - Description of an item
      Home decoration page - Menu

      Conclusion

      After discussion of testing/user feedback. Key points that arose from the final usability testing with my participants was that they all very much preferred the new design as it was: easy to use, nicely presented and had good visual aspects that were clear and/or recognisable.

      Thanks to Natacha Deacon for her inspiration for the text, as well as the development of the project.