Amazon Redesign
Problem: User friction around using the Account page, Orders tab, and Product Filters when searching. Feels unintuitive and cluttered.
Account page Solution: Reorganize Account page flow to better align with user mental models.
Orders tab Solution: Streamline Orders tab by removing carousels, returning to a list format, and distributing information across distinct categories.
Product Filters Solution: Reorganize the information into an overlay that uses screen real estate efficiently and has the look/feel of a mobile apps design.
Account Page
Problem Overview: User mental models and current layout do not match, creating friction.
Amazon’s layout on the account tab is to show you a carousel of your orders, items to buy again, and generally more products. I can imagine they do this to try and drive the user to another purchase, however it directly conflicts with user expectations and causes confusion.
User expectations and frustrations :
Users expect the account tab will take them directly to a list of options related to their account.
The current layout requires the user to tap the account tab then tap the account tab again in a carousel. This is not intuitive and hides relevant information.
Having to tap the account option twice while having it be the fourth option in a carousel makes this tab easily missable as well.
Original Start Point
Account Page End Point
What Amazon’s actual account page does well: Relevant options displayed in a proper hierarchical format with headers for organization. Easy navigation in a list format as well.
Taking a deeper look here it can be seen that Amazon provides a plethora of settings for its different types of users between sellers, customers, etc.
These all being in the same tab makes sense for being able to find them all
They’re pretty well organized with distinct headers
Easy to tap targets for each item, and each item is succinct.
Each piece of organization is layered into a page hierarchy fairly well with what can be assumed to be the most important and commonly sought after options by their users.
The main drawbacks to a list of so many options is that it is quite easy to get lost trying to find something a user may need that isn’t as common. Scrolling through this many options, it can be very easy to scroll right past the one the user may be looking for.
Solution and Impact:
Reorganized flow structure to better align with user expectations, reduced friction and improved overall user satisfaction.
Version 1: Removed current account navigation and replaced it with the list options users expected (quick win). Added a search bar for harder to find settings.
My first method for tackling these issues was to firstly make the Account page more reminiscent of other apps so that some of those patterns and pathways carry over.
So in tapping that Account icon in the Nav Bar, it takes you to their page that houses a list of options relevant to your Account.
It gives this tab a clear goal and function to execute based on user intention.
To remedy the issue of harder to find settings, I opted to add a secondary search bar for this page that prompts the user to search for a setting they are looking for.
I retained a few elements from the original, namely the header bar that tells you the name and country associated with this account as well as notifications.
This was done primarily to retain some of the quick actions from the original design that I felt held some weight and function within the overall design of the page.
Feedback and Impact: Positive user feedback and reduced navigational friction. Some users wondered where Rufus AI went and this is where the final version picks up.
MVP: Moved Rufus AI to the account top bar and replaced that nav bar item with a dedicated orders tab.
The second and final version of this page was to add Rufus AI to the top bar.
Customer support options are typically found in account settings so this made logical sense and created a quick access method.
Also leveraging the empty space in the Nav Bar to add an orders tab felt beneficial to give users a more quickly accessible means of getting to their orders.
It now just requires one tap instead of two.
Feedback and Impact: Navigational friction between account options and orders was no longer apparent. Users loved having the account and orders tabs be more easily accessible.
Nav Bar
Changes Made and Impact: Moving Rufus into the Account header and Orders to the Nav Bar reduced friction and increased more relevant feature access.
Putting the actual account options up front still does not solve the issue of orders being two taps away. This being a feature that was widely used more often than Rufus AI amongst my testing group, it needed to be more easily accessible.
This is why I opted to shift Rufus to the header of the Account tab and move Orders to the Nav Bar
Orders is still accessible via the account tab should muscle memory still take you there
Impact: The effect of moving this feature into the Nav Bar made it much easier for testers to see their orders and with having a more clear and refined design (upcoming in the next section) it led to more positive user feedback and less friction between the user and the app.
Orders
Problem Overview: Orders page lacks clarity and informational hierarchy
Speculation on Amazon’s design for this page leads me to believe they want to push the user towards another sale.
The business goal does not appear to be balanced with user goals as it requires users to scroll past emphasized categories for a full look at their orders.
The bones of this page are good in having categories of orders the user can parse through but the execution is lacking.
The carousels don’t provide much in the way of information and they eat valuable screen real estate.
They also don’t go the extra step to organize each category in a seamless way.
Solution and Impact:
Remove carousels, organize order types into subpage tabs, add a new menu bar for the subpages. This reduced confusion within the orders page, created a proper informational hierarchy, and drove user satisfaction.
Original Recreation
Version 1: Removing the carousels and shifting towards a list view created a more easily viewable orders list for users but order content was an issue
The first iteration of this redesign was that I wanted to keep the orders tab as clean and intuitive as possible.
Shifted the list towards the top and removed the carousels
I felt that they distracted too much from the main goal without providing enough information about those items anywho.
This solves the visual clutter and needing to look for a comprehensive list of your orders.
Made the heading larger and fit the rest of the design language of other pages
Improved visual accessibility
The new problem was that this orders page also deals with Whole Foods purchases if you’re scanning your in-store code
Your orders page can populate rather quickly with your grocery runs.
MVP: Menu bar addition that houses the tabs of the carousels for a less cluttered and more simple view reduced user frustration
The process of reaching the next iteration:
I could add Whole Foods to the filters menu but that hides its ability to be immediately accessible.
I could also have a fully separate orders page but that might get confusing.
I ultimately chose to use a menu bar of tabs so that user can tab between their grocery shopping history and their online orders.
But there would come another problem…
The at a glance carousels were a good idea with poor execution and I wanted to include a better version of them
I could add a filters button and overlay and have those options be in there
That would be a bit jarring for the people that are used to them being at the forefront of the page
I could separate them into different pages accessible from the Orders tab just like I was thinking with the Whole Foods Orders
A menu bar of tabs to display various order filters instead of several carousels
So I decided to include some of what I considered to be the more prominent tabs in my menu bar while creating that carousel.
Buy Again
Returns
Whole Foods Orders
Whole Foods Tab
The Whole Foods tab tells you whether something was delivered to you, you scheduled a delivery, or you purchased it in store. It keeps much of the same design language as the Amazon Orders tab while providing more contextual information relevant ot the type of order.
Returns Tab
The Returns tab does similar in the way of contextual information such as telling you if an item had a successful refund, if the return was completed, and the refund was issued. Again much of the same design language.
Buy Again Tab
The Buy Again tab is our final tab and it articulates what your recurring purchases have been so far. The contextualization here is in always having the product title be as spelled out for you as possible so that you know exactly what that item was. It also tells you the last time you ordered it as well so you can judge if its something that you would likely order again based on various variables. Those variables being things like, enough time passed, need a duplicate, want to try again, etc. These are all more personal user variables that can impact a reorder decision.
Impact: This reduced friction, added an easier way to view important order info and gained more positive user feedback.
Product Filters
Problem Overview: Mixing different types of touch targets together creates a confusing layout for the user. The filter overlay does not use screen real estate efficiently or effectively.
Trying to scroll horizontally from the filters icon does not scroll the carousel. The options presented give the illusion that they are all of the applicable options.
The overlay that appears when accessing the full list of filters via the icon is messy.
The overlay separates into two independently scrollable sections that can be both difficult to navigate and difficult to read.
Additionally there are overlaps in the options displayed.
Original Recreation
Direct Screenshot
Solving the Touch Targets Problem: Reformatting the filters carousel into a single, easily tappable touch target that opens the overlay.
This reduced visual noise near the search bar and was more easily approachable by users creating another quick win.
Solving the Problem of Filters Layout: Reformatting the filters to be their own carousels within a list format to reduce wasted screen real estate and navigational fatigue.
Reduced user friction but created scrolling fatigue with the carousels.
Key pillars I designed around during this process:
Screen real estate
Combining redundant headings
A less tab/table like format
Something more vertical and easily parsed
Each time I iterated my mockups it was a question of “whats the most effective way to use this screen real estate to achieve a more simplistic and aesthetically pleasing filters UI/UX?”
Design Process
I eventually settled on creating the 4th mockup and iterating on it a little further.
V2 and V3 I had a tab swap for the overlay that would get in the way of a simple experience.
So I opted to just include “Sort By” at the top of the overlay and all of its options as a left to right set of chips.
Similar to Amazons original layout but it made more sense here.
I condensed down several headings into single headings.
I operated on the formatting of one major header and several smaller ones under it with the appropriate options labeled to their right.
Everything was more legible and cleanly displayed.
To keep some items more succinct, I did include carousels for those headings with more options. Overall it was pretty successful win although the carousels created some friction within testing.
What I would do differently with more time:
In my self imposed time constraint of a few weeks, I did not have time to iterate further on this section of the experience.
However, with more time I would not have done carousels, but rather blocks of chips beneath each heading for a more “it's all there” experience.
My Design System
This section covers the design components I used to create this redesign on top of the dark mode versions of them as well. The color system was hard to pin down as Amazons color scheme for its accenting, fill, and stroke colors varies quite a bit within their components. However, I mimicked their aesthetic as closely as possible during the duration of this project.
All card style components
Buttons
Miscellaneous Components
Navigation