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.
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.
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.
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.
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 :
- Asos (for the graphic aspect)
- Zalando (for the graphic aspect)
- Wish (for information hierarchy and architecture)
- C-discount (for information hierarchy and architecture)
- Amazon (for information hierarchy and architecture)
From these apps, I identified 8 key aspects that I wanted to incorporate into the design for the Amazon Shopping app:
- Add buttons
- Use of icons throughout the site
- Upload images to lists and/or items
- Large thumbnail images
- Shortcuts from home page
- Add to cart button on right hand side
- Personalisation and customisation
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.
- The products are not highlighted
- All products are too mixed and not ordered
- It looks very squashed and cramped.
- The text and images are too small, I can't tell what it is.
- It's not good for big fingers.
- I think a shortcut button would be better
- There's too much white.
- I don't like the buttons.
- It looks very basic, boring and old- fashioned.
The 7 screens with 2 news features I chose to focus on were:
Two new features
- Page with ideas for decoration
- Page including a new augmented reality option
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
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.
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.