Design Portfolio & Resume

App Navigation


Customer Goal

Quickly and easily get around the Android app experience.

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

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. It has been a long process.

I started by wireframing lots of 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 functions are consistently available in a drop-down menu.

Using sketches and then wireframes, I proposed a phased approach over several versions of the app to the product owner. I succeeded.

I created a paper prototype, 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.

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

Final Products

It took more releases than I’d proposed, but the app did proceed from the hidden tabs model, to the logo drop-down menu with top navigation elements, finally, and most recently, to the menu icon in the upper left corner also with top navigation.

Outcome

It took approximately 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 to about 4.5 out of 5 stars. It was a success.

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

Lessons Learned

  • 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, if not more so, especially in matters that can effect customer trust.
  • Adhering to platform and OS conventions make a lot of sense, except when they don’t make the most sense for your customer; adhere to standards unless data and research indicates you can and should do better

Additional Context

One reason I love working in the mobile industry is because it never stands still. By late 2013, it was clear that a pattern had emerged and was becoming a standard: using a menu icon with three horizontal lines in the upper left corner to slide a menu into view. 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 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. So 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 is revamping or redesigning Amazon’s navigation across all mobile devices and platforms. I’ve worked extensively on the iPhone and iPad shopping apps on creating a more unique Amazon navigation experience, neither of which is released so cannot be included in my portfolio at this time.