Customer Goal

I want to quickly and easily get to where I want in the Amazon mobile app.

Role

Lead Designer (solo)

Key Deliverables

• Early concepts
• Wireframes
• Create, conduct and document user research
• UX specification
• Final visuals (assets)
• Finding and logging implementation bugs
• Ideation for the future

Impact

• The navigation progressed from the hidden tabs model, to the logo drop-down menu with top navigation elements, finally, to the menu icon in the upper left corner also with top navigation
• It took  two months for most customers that upgraded to use the top navigation and drop-down Menu 90% of the time
• Usage and ratings in the app store increased over time from approximately 4.0 to 4.5 out of 5 stars
• Years later, the switch from the drop-down menu to the Menu icon in the upper left corner barely caused a ripple in usage (as I’d hypothesized), and features such as Wish List, Gift Cards and more saw usage increase dramatically due to greater visibility and a single, consistent place to look for the expected Amazon breadth and depth

Process

In 2011, Amazon’s Android shopping app looked like a cross between their mobile website and the iPhone app, utilizing the hardware Menu key built into the devices to display a set of tabs. It did not stand out, and did not feel as much like Amazon as it could have. I wanted to make changes almost from the very start – but in a large company with a huge number of customers, progress had to be measured.

I started by wireframing alternate tab solutions, for the most part adhering to the OS standards of the day. The app tabs were triggered via the hardware Menu, and I initially proposed making them visible (consistent with the iPhone app). They fell short overall, and didn’t address the growing body of data highlighting how customers expect, for better or worse, the apps to look and function more like www.amazon.com. In 2012, I proposed moving away from using tabs in the app. Instead, I believed our customers should have a similar navigation experience with the main Amazon website, where navigation is concentrated at the top, visible rather than hidden behind a hardware Menu key, and have core functions consistently available in a drop-down menu.

Using sketches and wireframes, I proposed a phased approach over several versions of the app to the product owner. After discussions and reviewing my proposal, the project was approved.

I created a paper prototype, and designed and conducted a study to evaluate the move from the hidden tabs to a design wherein the customer taps the logo to expose a drop-down menu containing key features that did not fit along the top navigation bar. It went well, so I proceeded to create an initial UX specification, and work with the development team (remote). During implementation, in addition to collaborating with the PM and developers throughout, I also created comps, assets and performed additional user testing.

Toward the later phases of implementation, the business decided that, despite the positive user testing, it would be best to still leave the tabs available, which meant there could be no contextual menu per Android OS conventions. This was done in order to collect comparative data and give customers more time to adapt. When a mere color change can result in millions of dollars of revenue impact per day if poorly chosen or rushed out, this was disappointing as the designer, but also totally understandable and expected.

I followed a similar process for updating from the drop-down Menu from the logo to the Android slide-in Menu pattern.

Lessons Learned/Constraints

• One trade-off of using the menu is that it quickly becomes very long, especially when you are large company like Amazon with customers expecting a similar experience across platforms and devices
• User research is critical, and can be a gating factor for forward progress, but usage data from A/B testing is just as critical in matters that can affect customer trust (and, potentially, substantial revenue for the business)
• Adhering to platform and OS conventions make a lot of sense, except when they don’t for your customer; adhere to standards, unless data and research indicates you can, and should, do better
• Patience and deliberative planning of the user experience can pays rich rewards for both the business and their user

Additional Context

By late 2013, it was clear that an emerging design pattern was becoming a standard: a menu icon with three horizontal lines in the upper left corner to slide a menu into view, eventually labeled as a “hamburger menu” based on a creative interpretation of it’s visual appearance. In addition to increasing discoverability by using a recognized pattern, switching from the drop-down off the logo to the menu icon freed up the logo itself to act as a trigger to navigate to the Home screen, which research indicated was a small source of frustration with the drop-down UI. I revamped the design to use a menu that slides in from the left over the top of the content. However, the Android left menu pattern wasn’t entirely sufficient for Amazon’s customers, so I made a few tweaks, including the use of sub-headers and a more fluid interaction, where items in the menu or the top navigation do not blink into or out of existence, but, rather, fade or slide more organically.

My main focus in 2014 was revamping or redesigning Amazon’s navigation across all mobile devices and platforms. I worked extensively on the iPhone and iPad shopping apps on creating a more unique Amazon navigation experience, much of which never shipped, though, since leaving Amazon, I’ve seen elements pop up now and then in the mobile apps.