Analyzing Amazon Mobile App's Checkout Flow
Why Amazon Mobile Checkout Flow
Shopping involves a rather complex decision making process: comparing prices, visual evaluation, vendor evaluation, etc.
The space / screen estate on mobile devices is very limited. How do you then accommodate and/or streamline the complex process of shopping?
I genuinely want to shop for male romper(s) for the summer.
My Experience with the App's Checkout Flow
Short-Term Suggestions for a Better Experience
1. The color of the price text.
As explained in the diagram above, the first "happiness drop" I experienced was when I first went to the Shopping Cart screen. I felt happy and excited from browsing and choosing the rompers, but was immediately confronted by the subtotal price in red.
Now, I understand that red might have been chosen because of its visual prominence (and hence, clarity of the prices in user's mind), and that blue is used to indicate links (e.g. vendor's name). But I think it would be less of a surprise if the prices are in yellow or a darker blue (and links in underline).
2. How the page transitions from one to another
Right now, the screen transitions in the app are as following:
I click on the shopping cart icon, the Shopping Cart screen then slides in from the right. On the Shopping Cart screen, if I click on a thumbnail of an item to check its pictures or specifications again, the item's screen slides in from the right as well.
The problem with this transition is that the sliding-from-right obfuscates where the user is at, among the many stops of making a purchase (it might just continue sliding horizontally to infinity). Does going to the item's screen from the Shopping Cart screen mean progressing or regressing? The "x-position" of the screen becomes unrelated to the sequence of tasks.
I propose to change the screen transitions to be more contextual.
Here, the Shopping Cart screen slides in from above (where the shopping cart icon is), instead of from the right. And if the user presses on the item's thumbnail, the shopping cart screen slides back up to reveal the item's information screen. However, there is a small strip remaining (like a minimized window), to (1) inform the user how much less the subtotal would be if they remove the item, and (2) remind the user that the shopping cart is always on the top of the screen, waiting to be completed.
So, browsing items are horizontal and can be infinite, but the shopping cart (the act of purchasing) become "vertical" and the x-position of the shopping cart does not matter.
3. Thank You Page
I also propose to give the user more emotional reward once the order is confirmed and processed, since settling a fickle mind when shopping can be stressful. Especially in this scenario, I wished that I was reminded of the excitement of having a romper for the summer.
One easy way to remind the user is by having the picture of one of the items purchased on the Thank You screen.
Another way is to have an illustrated animation that feels light and joyful. I feel like it would be a nice surprise as the user, after the mental gymnastics of choosing and confirming an order, would not expect a cute little animation to end the process.
3.5 (Bonus) Autocomplete for Address
Like Google maps / Uber!
Long-Term Suggestion
The 2 big ideas I want to propose are:
The app should not "punish" the user for being fickle and wanting to get more for their money.
The app should deliver more emotional and aspirational reward for shopping.
For this exercise, I will elaborate on point (1)
On Researching the Idea
While browsing for items feels seamless enough in the app (and the 1-Button Purchase is awesome), making changes in the Shopping Cart / Order Placement is definitely confusing.
First, as explained in my experience diagram, editing the items in the Shopping Cart does not feel like progressing in the purchase. In fact, if I want to change the specification of the item in the Shopping Cart, I have to add a new item with that new specification.
Second, some terminology to navigate between the pages is inconsistent. Going back from Order Summary page is "CANCEL", and in other pages it's the back-facing arrow.
I would research on making the process less painful (or even encouraging fickleness) from two perspectives: (1) looking at existing best practices, and (2) by looking at user behavior.
For best practices, I would look at Youtube and food delivery apps like Seamless / UberEats.
Youtube app was revolutionary to me when they introduced video minimization. The video will still continue playing (and I can still watch it) even when I browse other channels. More interestingly, I almost subconsciously understand that I can browse "horizontally" or "vertically". Vertical browsing is when I go from video to another video that is on the recommended section. Horizontal browsing is when I go back to home/subscriptions and browse the channels and/or related videos. This divide could be applied to Amazon app as well.
As for food delivery apps, their design is usually optimized to accommodate special order, ordering multiples of the same item but with different specs, and organizing the order items. Incorporating some design elements from these apps into Amazon's mobile app might allow a less painful experience when a user wants to make a lot of small changes to the order. Will categorizing items by vendor/departmental category inform user better? Will more encouraging and cheeky copies help user progress along?
On User Behavior & Validation
There are several metrics that I could think of to measure if the difficulty of checking out and making changes:
How many times the user adds the same item to the Shopping Cart (lesser means better experience)
How many times the user navigates to the Shopping Cart via minimized screen (more is better)
How many times the user goes back to Shopping Cart screen from Order Summary screen (lesser is better – the idea is if making changes on Shopping Cart screen is convenient and easy, there will be less mistake by the time user gets to Order Summary screen).
And ultimately, a smoother experience would result in a happier experience. I would imagine that my excitement for male rompers would be maintained and amplified as I go through the purchase process. Having a rating prompt on the Thank You page would yield data useful to measure this happiness. Also, while it might be a stretch, related purchases (e.g. sunglasses, hats) could be indicative that whatever excitement, intent, and context are well maintained and get reminded in the user experience.
