Adventures in e-commerce: Building a home security buy flow from scratch

Rylan Francis
Protect America Design
6 min readFeb 7, 2019

Background

I’ve always seen Protect America as a trailblazer in the home security space. We were one of the first to fully popularize DIY home security — eliminating the need for a professional installer and giving the power to the people. We were early adopters to digital marketing, with monthly spends over a million dollars in Google alone. But when it actually came to selling home security, we were old school. Since 1992, Protect America has been selling home security over the phone. Even as other home security companies were launching e-commerce buy flows, we stuck to the traditional call center model.

This wasn’t just a convenience thing. The fact of the matter is: it’s hard to sell home security online. It is not as simple as buy a widget and you’re done. There are contracts, credit checks, and complicated options when it comes to securing your home.

Problem

Make an online e-commerce system that can complete and automate the full home security buying process.

Target Audience

Home Security Buyer between 35–54 who don’t want to talk to a person on the phone (because who likes buying things on the phone?).

Research and Feature Requirements

With any good project with a ton of nuances, its always best to layout the requirements and features you’re looking to have. Not only does this help define the scope of the project but for this particular project ruled out the feasibility of a third-party solution. Obviously, as you start laying out features, the task can seem overwhelming or impossible. The key here is to not look at them as a whole, but steps or chunks. As the saying goes…

How do you eat an elephant? One bite at a time.

Breaking up the project into phases — must-haves, phase 1, phase 2, test 1, test 2, etc. allows you to handle smaller pieces of the project. It also gives developers and stakeholders the ability to plan for the future while still focusing on the “right now.”

Being a company with over 25 years of customers, deep-diving into our data was key to figuring out what to remove, focus on, and build for feature sets.

In a normal phone consultation, there can be up to 45 different base packages with 15–20 products that can be added on. A lot of these products are used in <5% of the deals and therefore fringe cases.

But an over-the-phone consultation provides the seller with a bevy of information that they can use to customize an order exactly to the customer’s specifications. However, when the normal e-commerce buyer is making the choices, most (if not all) can’t discern the difference between a micro sensor with earth magnets vs a crystal sensor. This is where data helps us make choices for the consumer — choosing the best decisions based on ease of use, price, reliability, etc. — focusing the customization on larger decisions the customer cares about provides the consumer with a custom built solution while making the overall process easier.

In essence, it was key that we provided ease of use through simple omission.

Base packages were defaulted to three packages that fit >90% of the customers needs. Products were also reduced down to around 4–5.

Further customization was added in but with a reduced importance using a simple edit icon.

Design Process and Prototyping

Our design system is built on custom styles derived from the Materialize framework (I have written about using the Materialize grid system in a previous article here). This means most of our wire-framing and prototyping are done at the same time using symbols adhering to our design styles in Sketch. This allows me to build Hi-Fi mock-ups quickly while always staying true to the brand.

Using Sketch’s prototyping tool helps me navigate each section to test flow and make adjustments real time. Sections were purposely designed to be simple with big buttons to denote user input.

In the background, our e-commerce is built on a combination of Django/Python and Javascript/Knockout with the cart handling on the javascript side. This mean the cart is constantly updating and checking for user input. Clicking on an item will update your cart, providing a bit of a design problem.

The user has to know the changes they are making are taking effect.

It was important that active feedback was built into each piece of the UI. Buttons change color, progress wheels, as well animations for prices were added to show reduction or increases. These considerations were flushed out by prototyping.

These seem like simple additions but adding feedback to user actions are essential to making sure the user isn’t confused.

Buy Flow, Funnels, & Testing

Behind the scenes, one of the most important things to a successful website or buy-flow is tracking. You need to have information on what’s working and what needs to be tested. This section for us actually goes back to the feature requirements laid out in the beginning when starting e-commerce. One of the requirements I had from a marketing perspective was the ability to move steps around and track by pages.

This allowed me to tie into Google Analytics, building out page tracking that ultimately ties to various goals based on the buy flow. Those goals can then be used as metrics for testing new iterations, pages, and customized buy-flows.

What if we wanted to test different layouts for additional equipment? Simple, create a new page and A/B test it. The goals will show metrics from the next page in the funnel down to the number of customers buying.

What if we wanted to have a completely different landing experience based on campaign source?

Add the analytics tracking on to the page and again the goals will follow it through.

Making sure you plan for user tracking and flow ensures you have the ability to optimization down the road.

Final Thoughts

An average phone consultation for home security can take around 30 minutes to an hour. The fastest e-commerce sale I’ve seen on our system was 4 minutes.

The entire process to build our e-commerce system involved many departments, and decisions to get it where it is today. And even then, we are still optimizing and working on making it easier for the customer. However, I believe it had help a subset of customers that simply don’t want to deal with the old school way of buying home security.

And while not the majority of our business, our e-commerce is a success. The e-commerce system allows the company to be in places its never been before with 24/7 sales and online only buy-flows. It allows third-party vendors to connect into our sales system without overrunning our sales floor. It will continue to evolve as we have more ways to use it to help secure more homes.

When building a complex design system its always important to take it one step at a time. Plan ahead and in workable phases. There is always that mid project slump, but taking small bites allows you to keep moving forward and gives the team a measure of success throughout the process.

There are a lot of moving parts and unexpected things that come up — so be prepared to add more chunks if need be. Don’t be afraid to remove features and build out phases for future releases.

Then once its built and released, give it love. Nothing is ever perfect. Follow your data and iterate on the design with the user always in mind.

--

--

Rylan Francis
Protect America Design

Senior Creative Director at Protect America: a home security company based in Austin, Texas. I believe that one’s favorite movie says everything about them.