Amazon Dash Button

Overview: As a leader in ecommerce, Amazon is exploring ways for customers to purchase products beyond their online marketplace.

Problem: Design a purchasing experience for Amazon’s Dash Button, a physical device that orders a consumable product with one button press. To purchase a Dash Button, the customer must be invited to participate in the Dash Button Beta program. Customers should be able to request an invitation to the program or proceed with their button selection if they have been invited from the same landing page. Customers should be able to select from a variety of Dash Buttons and be shown a recommended Dash Button to purchase.

Solution: A state-aware landing page that can serve up separate messaging depending on whether a customer has been invited, not yet invited, or invited and completed a purchase. The landing page displays the image of a customer’s recommended Dash Button in the top section of the page. The landing page leverages existing development work created to launch Amazon’s Echo device. A secondary page allows customers to select their Dash Buttons. The remainder of the purchase flow follows existing Amazon checkout patterns.

Research

Because Dash Button is unlike any other product Amazon has launched, there was not any direct user research to draw from to help inform the design. In order to make data-driven design decisions, I relied on learnings gathered from launching Amazon Echo on an invitation purchase flow. Additionally, a lot of effort was made to gather specific business requirements, as those parameters defined the customer flows. Small changes in those business requirements often altered the flows and subsequent development work drastically. Brainstorming sessions with the product manager, UX design manager, site merchandiser, and development manger were held to uncover edge-cases that in-turn influenced the business requirements.

Purchase Flows

I stepped into this project as the purchase flows were being developed. As requirements changed and the program became more defined, I iterated and adjusted the purchase flows as needed. The diagram of the flows was used as a tool to educate senior leadership, product management, and the development team on what the customer experience would be. View as PDF

dash_button_flows_v2

Wireframes

I made wireframes in Omnigraffle to define the user interface and help the visual design and development teams move forward with their work on the project. I relied heavily on Amazon’s Human Interface Guidelines and established patterns to design the UI. The wireframes were also presented to senior leadership to get sign-off on the user experience. View as PDF

dash_button_wires

Hi-Fidelity Mock-Ups

The visual team made hi-fidelity mock-ups of the landing page while I made mock-ups of the subsequent pages of the purchase flow. The mock-ups were then arranged in the order of the various use cases and customer flows to communicate the finalized customer experience to necessary stakeholders. View as PDF

dash_button_mocks

Landing Page

I red-lined the finalized hi-fidelity mock-up of the landing page and partnered with the front-end developer to ensure proper execution of the design. I also created the production assets needed for both the desktop and mobile versions of this landing page.

dash_button_landingpage

Dash Replenishment Service

In the course of designing the purchase flow for Amazon Dash Button, I was also asked to design a page that would introduce Dash Replenishment Service, an API that can be integrated into third-party devices to order consumable goods. I worked on the basic wireframe design of the page as well as a way to capture some information from third-party devices manufactures and makers of consumer packaged goods. Below is the final landing page. Visit Site

drs_landingpage

Dash Button Category Page (Visit Site)

After the invitation program for Dash Button ran its course and Amazon decided to allow all Prime customers to purchase buttons, we deprecated above invitation landing page. With this transition, there was a need to both explain what the Dash Button program is and allow customers to shop the selection of buttons on the main Amazon.com website. Unfortunately, we did not have any development resources we could dedicate to this project. I proposed building a Dash Button category page on a browse node using existing retail widgets. Our team had never built a category level page before, so I had to a lot of research on Amazon’s wiki to determine how to build the page. The team also did not have any visual design resources to spare, so I stepped in and created the visual assets for the page is well.

dash_button_category_page

Margaret Darcher

Invitation Purchase Flow

Project Scope

My Role