How we designed a product website for Abode
For the past couple of years Chris Carney, Brent Franks, and Max Burton have been working on Abode, a security-focused smart home solution. Unlike similar home security solutions, Abode gives you full control of your system, it doesn't charge you an expensive monthly fee to monitor your home, and it is very easy to install.
In 2015 Abode had a successful campaign on Kickstarter and started selling their home security devices in the USA. They sold on Amazon and also used their own website. However, the user experience on this website was rather poor, and hence the sales volumes.
Services
Marketing design
UI/UX design
“I basically started Abode to eliminate all those pain points for people and really give a customer control of their system and their solution and really make something simple and seamless.”
Abode is a company that makes life easier, not more complicated, but product offers on their old website looked very confusing and didn't attract the attention of visitors. So the founders started looking for a solution.
To pick out an agency that could design a truly amazing user experience for their online store, Abode asked 12 web development companies to create
a home-page concept.
We had one week to design the home page... And we decided to do three versions of it!
We didn't know much about the project at that stage and hoped that at least one of our designs will impress our client and win the competition.
Our three concepts were structured differently, but they all did have one thing in common: They emphasized clarity, cleanness, and minimalism – an important set of characteristics for a modern innovative product.
When Chris, Brent, and Max saw our works, they decided to choose us as their web design partner.
Our scope of work included website design and frontend development. We needed to create more than 50 pages from scratch for the Abode online store. We built the whole project in eight weeks.
To get the ball rolling, we needed to understand who exactly buys home security systems, what user experience pain points are there on the Abode's current website, what other companies Abode competes with, and how our clients are going to measure their website design success.
About 30% of all American households will own home security systems by 2023. This is a huge market! To build a website that could help Abode bite a piece of this market, we needed to research user persona.
With this knowledge, we could understand what information users need to reach their goals and how they want to feel as they do it.
People who are looking for a home security solution tailored to their needs, and don't want to spend time analyzing product offers.
“I don't have time to analyze technical specifications.”
People who already bought one of Abode's Starter Kits (Smart of Iota) and are looking for some additional devices to keep their homes in control.
“I want to be able to choose devices that work for me.”
People who are looking for an optimal and cheap solution.
“I want to buy a complete and robust solution for home security.”
People who want advanced and robust smart home functionality (we call them Geeks).
Now we could explore user journeys and brainstorm how we could design a solution to give all 4 types of customers what they're looking for. But first, we needed to explore user experience on the current Abode's website so we don't miss anything important.
What user experience do Abode's competitors' websites offer?
There are several big players in the DIY niche of the home security market. We investigated websites of about a dozen of them and picked 3 home security providers that Abode directly competes with.
We had an awesome time.
To better understand what the current Abode website lacked in terms of user experience, we created a list of pain points. Here are some of them:
There are 4 door and window sensors and they look very similar. It's hard for a user to understand how to select one.
Some users don't understand
the technical specifications for each sensor and camera. They just want to buy an optimal solution for their purpose.
The website doesn't show how emergency alerts work in the app and what users need to do in case of an emergency.
There are 2 types of cameras in
the product line with no explanation of the difference between them.
We wanted to make sure Abode's customers would be able to quickly find the right amount of information, at the right time.
Figuring out how much information is enough was incredibly hard. We couldn't possibly fit everything about the products on one page. Also, we didn't want our users to get distracted from their main purpose by throwing a bunch of technical specifications and links to "learn more" every here and there.
We spent a lot of time thinking through the structure of the data.
Abode has many different products, but a lot of them are technically the same, just with slight variations.
The full range of Abode hardware products includes various door and window sensors, cameras and motion sensors, outdoor and indoor sirens, smoke alarms, water leak sensors, temperature and humidity sensors and a whole lot more. It's hard for a user to understand where to start from.
We added a message: "It all starts with a Security Kit" on the Home page:
We also pinned two types of Abode Smart Security Starter Kits to the product menu.
Then, users can click to go deeper to see more detailed information per offer and easily navigate through all the devices that are included in the Security Kit.
They can see what these devices look like, how the system dispatches notifications in the event of an alarm to the Abode's app, and most importantly, they can view where security devices can be attached in the room.
Once a user purchases
the Smart Security Kit, they can add more devices as per their needs.
We decided to group similar devices by problems they solve right in the menu. This way users can easily scan between the different product options without having to go into a product page.
For the home page, we wanted it to be useful and human-friendly, and only slightly promotional. Users can check out the main Abode's offers, or deep-dive into how Abode works.
We got rid of all the clutter and made a minimal graphic design with simple user interactions. Carefully applied minimalist principles made the website attractive and effective.
We had two options for visualizing Abode's devices: photographs or 3D renders.
We wanted to get the perfect image, that's why we went for 3D renders.
The 3D renders gave us a possibility to create the right colors, pick the type of lighting condition that suits us, and improve the communication on our team getting everyone in syn.
What's more, now our clients can reuse images in their promo campaigns in another form or context.
Abode's website is powered by WordPress and uses Shopify shopping cart for accepting payments. To keep all information updated, we needed to pull product details into WordPress from Shopify. We could use the Shopify API, but we needed a faster solution.
We wrote a custom script that pulls up the changes from Shopify quickly without affecting user experience.
To increase the speed more, we optimized product images using image compression methods.
We also transferred all product pages to the product templates so our clients could easily edit those pages without affecting the layout design.
Copyright © 2014-2022
Kyiv, Ukraine
Dehtiarivska str. 33B
Contact us:
eleken@gmail.com
