Amazon Redesigns

My take on redesigning the Amazon shopping experience. This is not a comprehensive redesign of everything but rather specific aspects of it that cause friction.

Account Page

Problem Overview: Mental models and layout do not match and this creates friction for the user

Initially tapping the Profile/Account option in the Nav Bar presents you with a ton of information and options and not what might be expected. While I do not know why Amazon picked this approach for their Account page, I can say it differs greatly from its competition and just about any other app. It also confuses myself, family, and friends.

This can be bad from a fundamentals standpoint as the user may be expecting one thing based on previous experiences with other apps and they encounter something else entirely.

  • The understanding as I have it is that tapping an “Account” icon leads to options that pertain to your account/profile

  • What is actually happening is you’re being brought somewhere that has a small subset of options that pertain to your account but the rest are hidden under yet another account button on this page

    • Your eye is also not drawn towards this account button either as the visual hierarchy pulls you to look at items under the “Your Orders” or “Buy Again”

      • This makes this option missable

In a similar vein, between icon and expectation it appears that this page does not have a real goal of what it wants its users to be doing here.

  • Should they be worrying about their upcoming orders?

  • Should they be worried about items to repurchase or keep shopping for?

  • Are they here for their account info?

Theres a lot to try and unpack with a seeming lack of clear goal and potentially unintended confusion.

Original Start Point

Account Page End Point

Theres some good to be had: The actual account tab that has relevant options is laid out well and includes just about everything you could need

This still begs the question of why account settings are two step process to even view. Taking a 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.

The Idea Behind the Redesign: Line up designs with user mental models for seamless use

Version 1: Having the Account icon navigate you to a list of account options was a quick win in testing. Adding a secondary search bar made finding more specific options easier

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 mediate 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.

All of these changes resulted in positive user feedback and more ease of use within this iteration.

MVP: Replacing Rufus AI with an Orders tab and shifting AI to be in the top bar of the account tab led to easier access to a more frequently used option

The second and final version of this page was to add Rufus AI to the top bar. This way if you had a particular question about a setting or something within your account you could quickly access Rufus without needing to tab over to him. 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.

  • Lastly the second iteration also added the Dark Mode toggle within the App Preferences block of settings.

    • It seemed natural to add it here as a simple toggle so that it can easily be turned on and off.

This iteration in testing proved to be valuable as it gave easier access to a more frequently used feature of the app while retaining some of the prominence of the AI feature.

Nav Bar

Problem and Redesign Overview: Moving Rufus into the Account header and Orders to the Nav Bar reduced friction and increased 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

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: The current layout does not have a clear purpose and forces users to scroll to see all of their past orders

This layout has some pros to it and that it is trying to emphasize some key categories of items that you may want to revisit or take a look at in your order history but its execution is not conducive.

  • There is not enough information presented for these items to give you a good “at a glance” for something like the “Your Returns” tab

    • How far along is X item in the return process?

    • Has a refund been issued?

  • An argument can be made that this would clutter the screen further with this method

However users and my own pain point comes from the fact that I cannot see all my orders and their status right away.

  • I have to scroll to see that

  • The header for seeing all of your orders for the past three months is very small and easily missed

    • Especially by those with vision issues

Lastly, with this structure the goal of the Orders tab doesn’t seem clear at all.

  • Am I meant to be pushed towards another sale?

  • Am I meant to be checking my return statuses?

  • Am I meant to be checking my upcoming deliveries?

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

This reduced friction, added an easier way to view important order info and gained more positive user feedback.

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.

Whole Foods 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.

Returns 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.

Buy Again Tab

Product Filters

Problem Overview: Mixing a carousel of filters with ones that drop down creates visual clutter and confusion. The filters overlay also leaves so much screen real estate open that could be utilized better.

A carousel of filters with drop down options is a mix of touch options that can create friction and confusion.

  • Tapping to scroll left to right could open one of these drop downs

    • Or

  • You may scroll when you intended to use the drop down.

However this problem does not get alleviated by tapping the actual filters icon.

  • This screen feels like an afterthought with how much it looks like it belongs on a desktop

  • There is a lot of white space not being used

  • There are overlaps in filter options

    • Connectivity, features, purpose, max power output, etc could be under one heading instead of their own

Original Recreation

Direct Screenshot

How I solved the first problem: Reformatting the filters carousel to just be a single button that opens the overlay used screen real estate better and more optimally for the user - they could see a little bit more before they scroll

Keeping things condensed to the filters button felt like an immediate quick win for the app.

How I solved the second problem: Reformatting filters to be more of a list view with carousels for various filters reduced wasted screen real estate and reduced scrolling

However redesigning the filters page was a much more involved process but I knew more or less the key points that had to be addressed:

  • 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?”

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 there, easily scrollable and at your fingertips. I was quite happy with this redesign as it uses the whole screen to tell you your options and its easily read through as well.

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 posed a little bit of friction within testing.

In thinking about this further as I am writing this, I would have opted for something more akin to the “Sort By” style. By this I mean having all the items under these headings just be blocks of chips. I feel that it would be more user intuitive than the carousel system. This is just what I drummed up within the few week constraint I gave myself for these redesigns and creation of Dark Mode.

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. As such there was no concrete system in place other than acquiring the colors from screenshots and applying them to components as they were created.

All card style components

Buttons

Miscellaneous Components

Navigation