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:

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.

From a fundamentals standpoint this can be a bad thing as its not hinging on the patterns and pathways users have to come to expect from similar products and thus it can be harder to navigate. If a user was trying to find settings relevant to their account it would be a little difficult to find. I believe the general expectation is when you tap on the icon that symbolizes “Account” or “Profile” it would take to a screen with options that pertain to that. This brings you to a mixture of small options that pertain to your account and a large chunk of it is things that pertain to your orders.

Your actual account settings are within a secondary tap towards the chip labeled “Account.” While it is one of the top items on this page, there’s much larger UI elements that can easily steal the users attention. 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.

However, much of this gets remedied with entering the Account Tab at the top of the screen. 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:

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 a page with the series of option relevant to your Account. It is basically the Account Options page except its not hidden behind a second tap to get to it. 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.

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. You’ll note that the Nav Bar does not include Rufus anymore and the next section will get to explaining the choice behind that.

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.

Original Start Point

Account Page End Point

Final

Nav Bar

Problem and Redesign Overview:

With orders moving behind the Account tab and not being at the forefront of it, I needed a different place for this feature. Orders was a pretty prominent feature to move out of its original spot so I thought about where else it could be moved to for ease of access and utility. The Nav Bar ultimately made the most sense. I also figured it would have higher utility being in the slot that Rufus AI currently takes up. Its close to your thumb (if you’re right handed as most people are) and thus easy to tap.

So the second problem is where does AI Assistant Rufus end up? As you saw from the previous redesign he ended up on the Account Page. This made sense to me for him to be on a page designed towards options and assistance. Placing him there and requiring that extra tap to get to him felt like a reasonable tradeoff for a feature that is likely having more inherent traffic.

Orders

Problem Overview:

I’ll start with what I like that they tried to do with the Orders page before I jump into what I don’t think is well done. I appreciate that they tried to go with a layout that emphasizes a few important things that you may be looking for right away. These being your upcoming deliveries and your returns. They also immediately give you the option to search and filter for what you’re looking for as well. While I think these are good ideas and good elements to have immediately available for the user to access, I think the execution of these items is not particularly thought out.

My immediate thoughts upon opening this page is “Where are my orders?” You’ll note that the full list of your orders are below these carousels, but they take up the entirety of your screen real estate forcing you to scroll to explore this page.

Furthermore, what is the goal of the orders page when its structured like this? Are we trying to remind them of whats going to be delivered, what the status of their returns are, or that they may want to restock on some items? There is just a lot happening on this screen that pulls your eyes around before you finally land on the thing you need or before you realize you need to scroll to see the full list of your order history.

How I decided to solve this:

The first iteration of this redesign was that I wanted to keep the orders tab as clean and intuitive as possible. I opted to shift the list of orders towards the top of the page and removed the horizontal scrolling elements. I felt that they distracted too much from the main goal without providing enough information about those items anywho. Shifting towards a list view and keeping the orders components intact allows a very quick at a glance view of your orders. This solves the visual clutter and needing to look for a comprehensive list of your orders.

Simultaneously, this orders page also deals with Whole Foods purchases if you’re scanning your in-store code, which means your orders page can populate rather quickly with your grocery runs.

Solving this problem was something I thought about in a few different ways. 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 next problem was with the at a glance carousels. Again, I liked the idea but didn’t think it was executed well. So I brainstormed solutions:

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
- Could work but how would we display it? The menu bar can only hold so many options unless… it was a carousel and the only carousel on the page!

So I decided to include some of what I considered to be the more prominent tabs in my menu bar while creating that carousel. Things like returns and items you may want to buy again/restock your home with. In adding these other tabs, I figured being able to show some of those active states and what they may look like would be helpful for showcasing my process.

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.

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.

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.

Whole Foods Tab

Original Recreation

Buy Again Tab

Final

Returns Tab

Product Filters

Problem Overview:

Having a chunk of the filters available be accessed via carousel at the top of the screen feels a little clunky. Exacerbating this issue is the fact that some of those filters have drop down menus attached to them. This is apparent by the downward facing carrot next to items like “Popular” and “Brand.” Creating a menu within a carousel feels backwards and not optimal.

However this problem does not get alleviated by tapping the actual filters icon. Now you get prompted with a scrolling sidebar of filter headings and filters to tap in each. On first impression this gives the immediate feeling that it was both an afterthought and designed more for desktop than for mobile. You can also note that theres a large amount of screen real estate being wasted because of this scrolling sidebar and the fact that some of these filter headings are redundant. There’s a lot of white space that could be used if this screen was formatted differently.

How I solved these problems:

Keeping things condensed to the filters button felt like an immediate quick win for the app. They would all be in one spot and there would be no question of “are there more filters.”

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

This was something I sketched out pretty intensively. Each time I iterated it was aquestion of “whats the most effective way to use this screen real estate to achieve a more simplistic and aesthetically pleasing filters UI/UX?”

Original Recreation

I eventually settled on creating the 4th mockup and iterating on it a little further. After looking back on V2 and V3 I noted that having a tab swap for the overlay would get in the way of the seamless and simple experience I was after. 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 just like my notes state. 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. 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.