Frontpoint

The Impact of Checkout and Digital Touchpoints Redesign

Role: UX/Visual Designer
Tools: Sketch, InVision, & Photoshop

Overview

Frontpoint is known for being the best overall Smart Home Security system, balancing DIY installation with professional-quality components. Lift Agency collaborated with Frontpoint to redesign their website with Magento and digital marketing touchpoints to grow their online sales. Currently, 90% of consumers go through the ecommerce experience through desktop; 60% of users reach the website via mobile. To reduce the high 93% cart abandonment rate, Frontpoint wanted to increase the numbers of users purchasing home security products in fewer steps with a more engaging and simplified cart experience.

My Role

Reporting to the Lead Sr. Art Director, I worked as the only lead UX designer in a small team of 4 for this project and was responsible in creating the entire ecommerce flow for the new Frontpoint website in both desktop and mobile platforms. Before shipping off the final product to the dev team in India, I spent countless hours doing quality assurance within the aggressive 3-month deadline.

My Responsibilities
  • Cross collaborating with the art director, copy/content director, and other designers
  • Leveraging e-commerce best practices and company data insights as supplement for UX research due to budget constraints
  • Developed sketches to lo-fi wireframes to hi-fi designs for both mobile and desktop formats to present to internal and external stakeholders
  • Managed designers for a short period to help me execute designs for some phases
How do we build a better cart experience that decreases cart abandonment and increase RAQ forms?

Goals
1. Prioritize mobile leads to more conversion
2. Progress navigation bar makes it easy to see next steps
3. Minimize content on each page view to ease the customer experience
4. Listing all the prices with discounts provides transparency to build trust in the flow to reaffirm purchase

DISCOVERY

Shop Entry Points: Emails, RAQ Forms, and Shop Page

There are 3 main entry points to the shop path: shop page, email captures, and request a quote forms. Users that submit their emails to Frontpoint will receive RAQ, promos, cart reminders, and other marketing emails in the case that they are still doing research for home security products. If the user are ready to purchase then they can go through Frontpoint’s shop path to get started. Users can also get access to shopping through search or paid socials.

REDESIGNED DIGITAL TOUCHPOINTS

Frontpoint RAQ Email Series Impact

+ 46% open rates
+ 43% clickthroughs
+ 73% sales coming sooner
+ 80% of sales are driving from email 1

I also redesigned the request a quote email series and created paid socials for different campaigns. Prospective customers will receive the RAQ emails series signing up for a quote through paid socials, marketing landing pages, and the homepage. A series of 9 emails was sent out to over 100,000 prospects.

BEST PERFORMING SOCIALS
INTERNAL SITE AUDIT

Defining the User Flows and Painpoints

This new user flow (below) shows the steps being broken out into 5 steps instead of being consolidated to one page in the cart. This helps make it more clear on what step the user is on and doesn't make the cart filled with too many actions or visual overload.

Painpoints to solve for for the best optimized checkout:
  • Reduce bounce rate from page to page
  • Make it easy to change/remove cart items
  • Be transparent with all fees/additional costs
We identified 4 potential user flows that serve as an entry points
  1. Package: Select Package Bundle from Shop Page
  2. BYO: Select BYO option and customize your security products
  3. Product Page: Select Product item, which brings you to  the Shop Page of packages and BYO options
  4. Quotes and Emails: RAQs and emails will lead to the shop page or abandoned cart
COMPETITIVE AUDIT

Pros and Cons of ADT vs. Simplisafe

Entry Points

Shop Page and Build Your Own

The current shop page had too many steps cluttered with CTA buttons and navigation links that led to the packages and build your own page. The "Shop Packages" and "Build Your Own" product modules didn't show at desktop or mobile breakpoint and had a lot of wasted space. Although all the products were listed out, the product link interaction led to modals, which led to a lot of clicks.

Improvements
  • Instead of 2 pages of products, the new shop page is consolidated to one page with the all the package offerings including the build your own.
  • Utilizing warm lifestyle photography to show customers how Frontpoint can provide security in their everyday lives and keep their home safe.
  • Added product carousels at the bottom of lifestyle imagery to also show the security products at a quick glance instead of clicking through all the product links.
Hi-Fi Key Frames

Design Decisions

Both pre-bundled packages and build your own flows is simplified with shorter copy and design to get the customers to complete a purchase. Most importantly the interactions for desktop should scale to mobile.

Step 1: Product Details Page

Modifying Value Propositions on Product Details Page

  • Condensing copy to speak more to the feature's value that is included in each of Frontpoint's packages offering
  • Product Modal pops up when a product name link is clicked and contains more in-depth details of the security product.
  • Mobile view immediately shows details of the package before the breakpoint
Step 2: Add-Ons
Making Add-Ons a step

Instead of having the user bounce between the cart and add-ons; the design decision was to create less interruption by creating add-ons as a step in the checkout flow. Leveraging the designs from Build Your Own to not only create less development effort, but to keep the flow cohesive.

Step 3: Monitoring Plan
Easier to Select and Compare the Monitoring Plans

With the removal of the monitoring agreement removed and removal of one plan per the client's request, the user only has to compare 2 plans: interactive and ultimate.

  • Select Your Monitoring Plan: Using the toggle buttons to display lower prices.
  • Comparison Chart Modal: For a comparison at a quick glance, the “compare chart” link leads to a pop up with a simplified version what is available in both plans.
  • Terms and Condition Modal: The “Terms and Conditions” text link is available to the user if they choose to read through for full transparency.
Step 4: Cart Summary
Simplifying the Cart Page to Focus on Order Summary

By removing all of the primary CTA buttons, the cart page was simplified to 3 actions: edit cart, continue shopping, and secure checkout. On the right rail of the page, it is packed with many value propositions that include the money-back guarantee and testimonials from customers to build trust and ensure why Frontpoint is the best option for home security.

Step 5: Checkout
Combining Shipping and Payment into One Page
  • Fill out all information in one place: Instead of keeping shipping and credit card separate, the user can complete all the information in one page and view their order summary at the top.
  • More Action Steps Post-Purchase: Next steps include viewing blog posts, download the Frontpoint App, or to go back to the Frontpoint’s homepage.

Lift Results