Amazon thrives on customer service. When a product has more than 1 type of purchasing option, presenting the most cost effective options available first is definitely part of that service. While some products may never see multiple pricing options, many do. This project focuses on the visual explorations and redesign of the Amazon Buy Box and how it interacts with the many different features Amazon offers their customers.
Due to NDA, confidential information and content has either been omitted, modified or substituted to comply with coorporate policies.
Wires were built using a full UI library in Axure. This skipped the need for barebone wireframe tools and allowed me to rapidly create prototype-ready mockups almost instantly.
Axure provides click functionality directly into the hi-fi mockups, allowing me to illustrate and demo concepts with interaction simultaneously.
Prototypes were built out into scenarios or end to end flows to illustrate every each use case required.
Amazon embraces the use of research and values metrics drive design descisions. I worked closely with members of their research team executing usability studies with functional prototypes I built.
Weekly presentations were made to stakeholders and team leads, taking feedback and incorporating it into each iteration throughout the process.
Each use case was fleshed out as a full color detailed mockups or functional prototype. Redlines were provided for better accuracy in development.
Strealining the basics. The concept was already incorporated into the Books feature of Amazon. My role was to explore visual options incorporating the new UI and accommodating the many other purchasing functions across products. My responsibilities were simply exploring visual options beginning with the Lightning Deals. In this, revealed the need to push this site wide.
Consolidate. Amazon needed to simplify and consolidate. A new treatment was needed that was consistent on every experience for every product regardless of price point.
Unify under a new UI. As you can see from above, different teams followed different styles and having a single product page with over 150 seperate elements each owned by seperate teams, can cause a pretty big headache. The second major task was to redesign all of these under a single style.
Solve for multiple buying options. Products on Amazon have many different buying options, like a subscription, a rental, a firesale, or from third party sellers; to name a few. The challenge was determining which of these were needed to be displayed by default first.
Business goals. First, we needed to determine a logic that dictated the priority of pricepoint depending on product selection. This logic was the guide not only for me, but also for the backend engineers for priority order. Next, Build all new explorations using Amazon’s new UI framework. And lastly, provide explorations for all platforms.
User goals. We used usability testing and metrics to drive user needs, These would determine user requirements needed for updates. Specific needs were then prioritied and turned into use cases to solve for. Each use case was explored separately and presented as a flow or interaction within Axure.
User logic. A standard buy box was static until a new buying function was introduced. We needed a logic that dictated priority based on price point. Basically if a regular product was offered as a subscription and also on firesale at the same time, backend needed to dictate which was presented to the user first while still offering the other two buying options simultaneously. This would be done using the toggle radio as the function and unifying it visually using the new global UI.
Mobile first Methodology. This allowed me to work out constraints of the smaller platform, while at the same time familiarizing myself with the new UI. Mobile to desktop then finally to tablet. While working on desktop allowed the freedom for more indepth interaction, it did present additional use cases that weren’t discovered initially on mobile. Similarly, as we moved to tablet, they tripled as each use case required building for portrait and landscape views. Regardless of the new complications, core business requirements stayed consistent.
Amazon UI. Amazon uses a mobile first methodology. When I was brought onto the team, others had already started creatting content on mobile including: buy box treatments, updating various widgets, elements and interactions with Amazon User inerface, or AUI. Below are a few examples of default buy box treatments using the new UI.
Accommodating options. After completing the mobile web explorations, I moved on to desktop. This is where the need was discovered mostly for the need for stack logic. Below are only a few basic explorations made using the new UI with the stack logic accommodating multiple buying options.
Adding elements to UI. Most of the UI elements required were already developed and provided for within AUI; there were a few that were not. As a fire sale item, a time constraint is required explorations that would also fit within the new style. This small hurdle wasn’t only a visual exploration, but also required interaction and accommodation to specific use cases.
Building a journey. Key feature, interaction and use case was built as flows. Some features were first mapped out as user journeys to avoid confusion or loss of feature. This would assure interactions would stay consistent throughout the designs. As the feature become more solidified, interaction would be built into a single feature, layering click functions, simulating slides or fades and presenting flags, errors or callouts as the journey continued through to the end.
Adaptation. For the buy box treatment a standard visual treatment was static until a specific buy function was available for the product. This is where stack logic came into the picture. Using a selection feature built directly into the buy box, the best deal is always presented first, along with the ability to select other purchase options including the regularly priced option. Some of the buy options explored include an internal firesale or deal, a subscription based auto purchaser, and rentials.
Firesale feature within Amazon.com. These are limited time sale item that drastically reduce the normal price of the product
Products users tend to buy regularly provide users with a slight discount with a reoccuring subscription that automatically purchases and ships the product to the user.
Items like books, that a user either returns a physical hard copy or a digital version expires. Similar to Subscribe and Save, discounts apply over a regular priced item.
This scenario becomes even more complicated when customers run into issues like a product that becomes waitlisted, or even a deal they end up buying at the exact same time as another customer. These are only a couple of examples of the many use cases needed to be considered.
Flighting and usability studies. While some of the designs I created were simple enought to push to development, some required further attention. Amazon does an incredible job making data driven design decisions. While this specific visual treatment had already started being been incorporated throughout the site, Many of the features were new. We slowly released different variations of the build in a flighting mode.. Only a small percentage of the general public would see the changes, depending on predetermined metrics, we were able to determine if our users needed a different solutions or if this design was working.
Additionally, our studio had a usability lab that ran full time, working out various concepts to the public. We would test features from basic feedback flags to completely new interactions. While the buy box was never a focus for any of my specific studies, yet it was used as a part of the testing. During testing, we would observe behavior, and make on the fly edits or note specific challenges that required immediate changes.
Amazon uses a variety of techniques and technologies during their usability studies, depending on the device or interaction it would change. The data was always collected, presented to the team, and discussed in detail to drive the next design decisions.
Deliverables. Pushing designs came in phases as each platform was completed. As stated before, the buy box had already been launched and up and functioning on the site prior, only the new visual changes to include multple buying functions. Mobile web was completed first, then desktop and finally tablet last
Amazon UI. Building within a provided framework like Amazon UI was incredible. The team had already built a functional library of features in Axure. This allowed me to build so much faster as well as provide me the ability to prototype and demo functionality and flow from a single preview. I learned Axure while there; I will forever be a fan of its capabilities in being able to illustrate rapidly.
Ownership of my own projects. Being a product owner gave me the responsibility to argue and fight for my own work with reason, while at the same time knowing when to take creative criticism. It also required me to manage my own meetings with stakeholders and project managers.
Looking at the bigger picture. Sometimes working on fine details and pixel pushing for that perfect presentation can take you over. Stepping back and looking at the bigger picture was one of the most valuable things I took home from this project. Take a fresh breath, and come back to it from a farther perspective.
Managing complexity. Organize and structure. Organize and structure. As use cases continued to multiply and convolude the project, organizing and constantly updating tree structures helped organize the project for me as a whole. This helped me get back into the project much quicker after meetings or various interruptions.
Design by tenets. the tenets of the team were pretty standard, but this was the first time, i found value and referencing them repeatedly. Having a mantra to focus around helped me grow not only as a designer but as a better professional as well.