A case study on the Amazon Shopping mobile app: UI Design for the wish list feature
The challenge
As part of a 15 CAT unit for a MSc Digital Design course at Southampton Solent University, I had been tasked with defining a design problem to be solved and creating a 6-screen clickable prototype that suggests a solution. Knowing I wanted to focus on a mobile application, I began conducting research on different apps to identify a suitable ‘problem’. The Amazon Shopping mobile app on Android was chosen for this case study, with a focus on its wish list feature, as it was identified in the research part of the process that this aspect had the potential for improvements with regards to its UI design.
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.
ASK: Identify a problem, requirements and constraints.
IMAGINE: Mind-map solutions and research ideas.
PLAN: Choose an idea and sketch possible designs.
CREATE: Create a prototype that fits the requirements.
TEST: Evaluate the solution through testing.
IMPROVE: Make improvements to the design based on the results from the test.
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. As well as this, I repeated the last three steps for the two key phases of fidelity (medium and high) to ensure as much feedback as possible was considered, loosely following a participatory design approach: “the direct involvement of people in the collaborative design of the things and technologies they use” (as explained in the book Designing the User Interface).
When in the testing stage of the process, I made use of guerrilla usability testing (UT): approaching an individual, asking if they are happy to participate, explaining the task and encouraging them to think and talk aloud whilst exploring the design. I observed their interaction with the app and asked them open-ended, non-leading questions about their experience in order to identify the next steps for the interface design.
Project timeline
Below is a diagram displaying the timeline for this project.
Research and analysis
UI design approach
For this project, I decided to use a flat 2.0 design approach which combines aspects of minimalism and skeuomorphism (both defined and explored further in Interdisciplinary Interaction Design) to create intuitive designs and interactive features, as well as improve user comprehension.
To maintain sufficient branding images (of both Amazon and Android), I referred to the original Amazon Shopping app and the Android components sticker sheet (provided by Google’s Material Design) throughout the design process.
Wish lists
I installed a number of wish list mobile apps (and apps for stores that had a wish list feature) to study the user interface and interaction design of their wish lists as well as the information architecture to aid and inform the creation of my design. The apps I explored that were most appropriate and similar to the design style I planned on following include:
· WISHUPON
· WishMindr
· GiftBuster
· Birchbox
· ASOS
From these apps, I identified 10 key aspects that I wanted to incorporate into the design for the Amazon Shopping wish list:
1. Clearly separated wish lists
2. Number of items in list displayed on each list card
3. Add item to list button
4. Use of icons throughout the site
5. Upload images to lists and/or items
6. Large thumbnail images
7. Pop-ups instead of new screens
8. Shortcut to wish lists from home page
9. Add to cart button on right hand side
10. Personalisation and customisation
Prototyping tool
In terms of prototype tools, I chose to use Adobe XD so I could experiment with its current features and identify missing components that would have been useful for this project. As Adobe XD is fairly new, it lacks a lot of features when compared to other prototyping tools such as Sketch. However, it has its advantages; specifically, its speed and its ability to use some features without the need for plugins. It is also fairly simple to use.
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 6 screens I chose to focus on were:
1. Home page
2. List of wish lists page
3. Create a new wish list page
4. Wish list page
5. Edit wish list page
6. Add comment, quantity & priority page
Specification
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:
· 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.
· Include the multiple controls as used in the existing app: action based, selection-based and input-based.
· All controls on the edit list page, for example, look very similar, therefore further differentiation between these should be considered.
· 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). For example, the ‘create a list’ button could be repositioned for easier access.
· Reduce the number of options in the dropdown menus to abide with Hick’s Law — less overwhelming and retains the user’s interest as a result.
· Consider Maslow’s Hierarchy of Needs when deciding on the order and positioning of attributes on the page. Identify what is most important to the user and therefore what needs to be displayed first.
· 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.
· Consider multi-touch gestures, such as press and hold to see more information/options or to move a wish list up or down on the list of wish lists page.
· Most pages in the existing design do not seem to consider the page fold significantly as aspects are cut at the bottom of the screen, therefore design with this in mind.
· There are a number of instances where the text and images are very small, so it is important to consider reading distances and the different target audiences (for accessibility).
· Some buttons on the existing app are very small so people with larger fingers may struggle to press them, therefore the layout of content needs to be balanced with screen size using a suitably-sized touch target.
Design, planning and implementation
Low-fidelity planning and refinement of chosen design idea
Using the feedback from UT1 and the specifications obtained from research, I began designing the new look of the Amazon Shopping wish list with sketches and low-fidelity wireframes (displayed below) showing the basic components: navigational elements, content areas and image placement, and including annotations to further explain details and functionalities. To create these, I made use of free printable wireframe grid sheets for mobile.
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 (medium-fidelity).
Design and production of the user interface style guide
A style guide for this project was developed using inspiration from: 19 Minimalist Style Guides, How to create a brand style guide and How To Create a Web Design Style Guide, as well as from the Amazon Shopping app itself.
The logo was print-screened from the actual app and intended to remain unchanged for this project.
The identity colour palette was extracted by using a colour picker on print-screens of the existing app, and the secondary colour palette was created for the purpose of the features added in my design (i.e. the colour-coding addition for the wish lists).
The typography sets (including the light and dark theme type colour) were extracted from the Android components sticker sheet aforementioned.
The iconography was partially extracted from the Android components sticker sheet but the rest was obtained from Google’s Material Design icon collection. (The icon for wish list was created by myself on Adobe XD using Amazon Shopping’s icon for reference.)
All of the imagery used in this design was attributed from Unsplash; a website featuring photos which have been uploaded by users to offer others use of their images free of charge and with no copyright infringement attached. (A list of the photographers to credit their work will be presented at the end of this post.)
Medium-fidelity wire-framing
A medium-fidelity wireframe was created on Adobe XD using the Android Mobile artboard and a square grid with a square size of 8. It included the main features outlined in the low-fidelity sketches, as well as the basic interactions ready for the second usability test so the participants could get a basic idea of how it would work and how you would navigate it.
Wireframes are blueprints that map out individual pages of a site. They show the elements of a page and their relative weight or importance. — Above the Fold
Key thoughts from the feedback gathered in UT2 included:
All of these factors were considered (and addressed) in the design of the high-fidelity prototype.
Evidence of testing and experimentation of available clickable prototyping tools/platforms
As my main focus was on Adobe XD, I decided to make use of most (if not all) of the features and tools available on this platform. Some of these features are explored below.
I used the repeat grid feature a lot in my design process as it saves time by allowing you to select a single item (in my case it was a card) and click and drag down (or out) as far as you like, until you have the required number of items.
You can also easily adjust the spacing between each item by hovering over the gap and then clicking and dragging to suit. This helps the organisation of the page as well as other aspects, such as negative space.
Once this feature has been activated, you are able to click and drag images from your file explorer into black rectangles — they will automatically put themselves in order.
These images then repeat if needed (when the repeat grid is extended).
Another feature I made significant use of was the symbol tool. This allows you to select any asset and make it into a ‘symbol’.
Using symbols means that you are able to change them across the whole prototype in one go.
This came in handy when changing colours and when making iterations suggested in feedback sessions.
To create the background for the overlay screens, I copied the previous art-board and then drew a rectangle over the top of the area I wanted to darken and blur.
Deselecting border, I then checked the ‘background blur’ option under appearance and set the amount of blur to 10 and the brightness to -50. I left the transparency at 0.
(This was the final setting of background blur following a suggesting in UT2 to make it ‘less blurry’. Prior to this, the blur was set at 30.)
Although these features were very useful, Adobe XD still lacked some which would have been useful for this project (i.e. the ability to maintain scroll position when transitioning between screens, as well as the option for sticky headers and assets — I would have used this for the add buttons, etc.).
Before completing the high-fidelity design, I experimented with a few other prototyping platforms to see if they had the features I wanted (along with the ones I got with Adobe XD):
InVision app allowed me to see a sticky header, however I was still unable to set the wish list button in a sticky position on the screen.
It was also easier to set larger hotspots for the links between screens and you were able to maintain the scroll position after click.
Another feature I liked was that you could choose a gesture (such as pinch) to influence the transition (there were more options for these too!).
I also experimented with JustInMind, however this took some getting used to as there are a lot of features and at first glance it seems like a very complex prototyping tool.
I like the number of forms and inputs JustInMind has to offer (and just on the free version!). Quite a few of these would be useful for my design: the date feature would allow the user to enter an actual date; the file upload would allow the user to upload a photo to their wish list; and a check box for edit list page, for example.
Adobe XD can only be used for clickable prototypes at this point in time, however I hope they chose to incorporate similar functions (and input options) to those explored above.
Key iterations
During the process of creating the high-fidelity design concept, many iterations were made as a result of the participatory design approach that was taken. Some of these are highlighted below.
Initially, the images on the cards (as seen left) only had a white border which, to some participants, made it seem as though it was “just part of the shape rather than a layer over the top [of the card]”.
Therefore, to resolve this, I added a shadow to the image with no effect (0) on the X or Y axis and a blur of 10. I chose a shadow over a border as I still wanted to maintain the flat 2.0 design look.
It was acknowledged that the share and privacy icons were much bigger than the page title, subsequently affecting the visual hierarchy. Therefore, the icons were made much smaller.
One participant requested a way to close the wish list overlay on the home page after opening it as this was not initially clear. So, I repositioned the wish list name centrally and added a close icon on the same side of the screen as other close icons as to remain consistent.
It took many attempts to choose how to apply the colour-coding to the wish lists.
At first, I considered changing the colour of the whole card, but both myself and the participants felt that it was ‘too intense’ to have all of the cards on the list of wish lists page to be different colours. Also, it made reading the information on the cards difficult.
Next, it was suggested that the list name and number of items should be where the colour shows. However, again, this did not seem right.
I suggested putting a coloured overlay over the top of the images to give them a hint of colour and this seemed to be popular among participants.
One participant suggested that the colours should be intensified so that they were more obvious, so I increased the opacity of the rectangular overlay from 30% to 50%.
The main iteration which seemed to have a significant effect on the participants’ responses (and interaction with the appropriate features), however, was the change in the wish list icon throughout the whole process. This is seen below.
Final high-fidelity design concepts
In this section, I will compare the before and after images of the Amazon Shopping mobile app design for the wish list feature, as well as provide a GIF for each screen in action.
1. Home page
2. List of wish lists page
3. Create a new wish list page
4. Wish list page
5. Edit wish list page
6. Add comment, quantity & priority page
Conclusion
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.
Recommendations
Key recommendations that I would make for the Amazon Shopping app would be to:
· Change the size of the images and text on the app so that it is more accessible and readable for users.
· Add more design features (such as: iconography, cards to separate the content, or colour-coding and image upload for wish lists) as these seem to appeal more to users and may aid them with the navigation of the app (especially in terms of accessibility).
· Reorganise aspects so they fit above the page fold and are still usable.
· Make the wish list feature feel more personalised for the user.
Photos (and their photographers) used in this project:
· Avatar Photo by Christopher Campbell
· Compass Photo by G. Crescoli
· Mug Photo by Nathan Dumlao
· Hat Photo by Jordan Whitfield
· Plant Photo by Daniel Hjalmarsson
· Journal Photo by Jess Watters
· Tape Photo by Kelly Sikkema
· Paint Photo by Denise Johnson
· Amazon Photo by Piotr Cichosz
· Amazon Photo by Andres Urena
· Notebook Photo by Elijah O’Donell
· Ornament Photo by Markus Spiske
· Bowl Photo by Alex
· Lamp Photo by Adrián Tormo
· Bag Photo by Álvaro Serrano
· Jar Photo by Jonathan Francisca
· Wish list Photo by Coley Christine
· Cartoon Photo by Andreas Weiland
· Christmas Photo by rawpixel.com
· Private Photo by Kristina Flour
· Home Photo by Timothy Buck
· Vacation Photo by Jakob Owens
· Wedding Photo by Sweet Ice Cream Photography
· Packing Photo by Bench Accounting
· Kids birthday Photo by Brooke Lark
· Secret Santa Photo by Anderson W Rangel
· Present Photo by Jess Watters
· Wish list Photo by Sudarshan Bhat
Thanks for reading!
Please give it a clap or two if you liked it and I would love to hear your thoughts and ideas!
