Toast Ecommerce Hero

Toast Ecommerce

Toast Inc.

I develop a painted door ecommerce experience that tested the demand for restaurants to buy Toast online.

Toast at the time did not offer the ability to purchase a Toast POS terminal online, requiring customers to call a sales representative to purchase any Toast product. Thus to reduce the cost of accquisition Toast was looking to implement a ecommerce application which would reduce the friction from buying Toast via a sales representative.

Timeline

3 Week Build

My Role

Front End Developer

Tools

HTML
Javascript
Craft CMS
AWS
Algolia

Themes

Ecommerce | User-Experience

The Problem

To buy a Toast Point of Sale product a customer must call a Toast respresentative or schedule a demo online via the Toast website. Then they must got through a series of back and forth engagements with a number of sales representatives to ensure they are a verified employer and to sign the appropriate contracts. This process is time consuming, costly, and prone to the customer losing interest and possibly ending the negotation. Furthermore scaling a sales organization to meet demand can be inefficient. It was clear that there had to be a better way to buy Toast Point of Sale however, was there even a demand to purchase Toast online?

The Solution

Create an experience that gives users the ability to purchase Toast Point-of-Sale online without having to fully invest in developing an ecommerce site before understanding the demand. Customers that prefer a traditional sales call can still purchase Toast via a call with a Toast sales representative and those that prefer not to not call can begin their purchasing journey via a guided ecommerce experience.

Goals

  • Page Load Speeds are Fast

  • Effectively Track Completion

My Role

I was the front-end developer responsible for building the majority of the user experience. Our team, to keep the application light and responsive, decided to use HTML and Javascript to create our template partials and couple it with Craft CMS as our source of truth for our product catalog. In addition to developing the front-end experience, I worked alongside our sales department to effectively hand off the necessary information to continue the buying process once the user had completed their order.

Development Process

0.1 - Understanding the Scope

Purchasing Toast is not as simple as purchasing a point of sale terminal, plugging it in, and accepting orders. Each restaurant layout requires a different set of hardware devices to install for the system to work and there is added complexity in which pieces of hardware are compatiable. Thus for this test we decided to offer a simplified Toast bundle that was equipped for the average small to medium sized restaurant.

0.2 - What Should the User Journey Look Like

There were 3 main phases to purchasing Toast online. a user needed to specifiy the hardware items they wanted, the software subscription and modules they wanted, and their installation package. We decided agains a single page approach and decided to create a page for each of these phases.

Select the Hardware Bundle they wanted plus any hardware add-ons they want.

Select whether they wanted a monthly or yearly recurring software subscription. Plus any additional software modules they want (Toast Loyalty, Toast Payroll & Team Management, etc.).

Select the installation package they want, Remote or Premium.

Ecomm Homepage

0.3 - Develop the Application

Once the user journey was determined, I developed the initial mockups provided by the design team. During the development process I worked in tandem with the design team and other our Web Team leads to adjust the user experience accordingly as design edits were made. After 3 weeks of development we settled on the final design and reviewed our final product.

Peep 76 SVG

Why end it here?

Reach out to me at ibanatoski@gmail.com and lets talk about data-viz šŸ“ˆ , a new song you learned on the guitar šŸŽø , or anything you like šŸ” šŸ šŸ• !

Thank You to @pablostanley for his Open Peeps library! An amazing open source character library!