LockAware

LockAware is a home security company that helps people safely secure their homes through their LockAware membership and security audits. Because only 1 in 10 online locksmiths are actually real, LockAware’s membership gives members access to a trusted network of locksmiths. These locksmiths provide "home hardening" security audits, where they will come to customers' homes, assess its physical security, and make recommendations to thwart burglaries.

The Goal

Improve the design of the LockAware website to increase the conversion rate of visitors to paying members by educating them on the benefits of locksmithing services provided by LockAware's membership and Home Hardening.

My Task

As the UX/UI designer, my main focus was on wireframing, prototyping, and UI design.

Who is the Target User?

The target audience is homeowners, particularly those in areas with a recent uptick in burglaries.

Wireframes

I first did a paper wireframe with the CEO to brainstorm the layout of the website. The content that needed to be displayed on each page was provided to me by the CEO. He wanted to emphasize the LockAware membership as the primary offering so joining the membership is the first call-to-action.

The paper wireframe for LockAware's home page.

The paper wireframe for LockAware's home page.

Initial Concept: Digital Wireframe - Version 1

After the initial sketching process, I transferred the wireframes to digital format using LockAware's real content. Another initial focus of LockAware was on educating consumers on the locksmithing industry, this is displayed in the Locksmiths You Can Trust section, as well as in the Who We Are page.

LockAware's Homepage

LockAware's Homepage

LockAware's Who We Are page tells LockAware's background story.

LockAware's Who We Are page tells LockAware's background story.

For Locksmiths encourages locksmiths to join LockAware's network.

For Locksmiths encourages locksmiths to join LockAware's network.

Card Sort

I performed a card sort to gather user awareness on the benefits of locksmithing and on how locksmith services play a part in home security to see if the current content would resonate with users. I came up with a number of terms for the cards that relate to home security and slipped in words to represent LockAware's two product offerings as well as terms for locksmithing. The group names in bold are the actual names provided by the user.

Card Sort: User 1

Card Sort: User 1

Card Sort: User 2

Card Sort: User 2

Card Sort: User 3

Card Sort: User 3

User 1:

  • Prevention group: security cameras, home alarm system, homeowners insurance, home security membership, security window deal, home security inspection.
  • Physical devices serve as a barrier between home and outside: peephole, deadbolt, lock, key, motion detector lights.
  • Easy to break in places at a house besides doors that are hard to put a lock on: laminated or tempered glass, windows.
  • Other: Locksmiths.

This user did not believe locksmiths belonged with home security, hence the "Other" group. Locksmiths open the door for people who are locked out and are there to help someone get into their home, not to secure the home.

User 2:

  • Home security: security window decal, homeowners insurance, home security membership, home alarm system, home security inspection, security cameras.
  • Lock N Key: lock, locksmiths, key.
  • Look through: peephole, windows, laminated or tempered glass.
  • Irrelevant: motion detector lights, deadbolt.

User 2 decided lock, locksmiths, and key are grouped together since locksmiths work on locks and keys. The "Look through" group contains items that can be physically seen through. The "home security" group contains terms that relate to the home itself; they are all things that are applied on or to the home.

User 3:

  • Security technology: home alarm system, security cameras, motion detector lights.
  • Non-physical security, "insurances", things to help insure your home is safe: homeowners insurance, home security membership, home security inspection.
  • Physical security: deadbolt, peephole, lock, laminated or tempered glass, windows.
  • Used for getting into your home: key, locksmiths.
  • Misc: window decals.

User 3 grouped by the type of the home security items. "Security technology" includes items that run on electricity and feel more "high tech" while "physical security" includes non-electronic objects that can be touched or seen in the real world. The "insurances" group are products that do not exist physically. They are like policies someone would buy for security. Finally, keys and locksmiths are used for entering the home, not securing it.

Overall, locksmiths are not viewed as part of home security but the products LockAware offers, the membership and the inspection (Home Hardening) are considered part of security. The most common view of locksmiths is a person the user calls when they need to get into their home rather than keeping anyone out.

Based on these findings, I changed the content to focus on education about why home security is important and how LockAware's products improve home security.

 

User Feedback-Based Concept: Digital Wireframe - Version 2

Education on home security is achieved by displaying facts and statistics on break-ins meant to motivate the user to check if their home is safe by taking the security quiz. This security quiz was added to help convert site visitors to Home Hardening customers by showing them how their home is vulnerable to burglars and how Home Hardening can help fix those vulnerabilities.

Other changes include:

  • Removing all color from the digital wireframes in order to minimize distraction. The small bit of color has a tendency to pop against the rest of the greyscale elements.
  • Minimizing the size of the sign up flow form fields, moving the labels to outside the fields, so they are visible if the user needs to review their information, adding example placeholder text.
  • Adding the membership price on the Submit Payment page in the sign up flow.
  • Emergency services text in the top left corner was changed to be more clear on the action the user should do if they need an emergency lock out service, call LockAware's number.
  • Adding three tips as a teaser to Top 10 Tips and also in case the user decides not to watch the video, they still get some of the content.
Content on the home page was changed to focus on education about and the benefits of home security.

Content on the home page was changed to focus on education about and the benefits of home security.

A security quiz, pictured above with sample questions, was added to help show users the vulnerabilities in their own homes.

A security quiz, pictured above with sample questions, was added to help show users the vulnerabilities in their own homes.

Quiz results shows the user their score and makes recommendations to improve their security including presenting LockAware's Home Hardening service as an option.

Quiz results shows the user their score and makes recommendations to improve their security including presenting LockAware's Home Hardening service as an option.

Prototyping

I created a clickable prototype in Invision by uploading the wireframes I did in Sketch. I received user feedback to remove the dropdown and create two new menu buttons since there are only two products: Home Hardening and Membership. This would bring the total count of menu items, not including the logo, to five which is still a reasonable number for the navigation. It also has the benefit of keeping the products visible rather than buried in a dropdown.

Visual Design

I used the existing LockAware logo as a basis for choosing the color palette and the Call to Action button colors. Helvetica was chosen as the font since it is sans serif with a modern feel while also being easily readable.  

The first version of a LockAware style tile.

The first version of a LockAware style tile.

Full Color Mockup

In the full color mockup, I applied the colors from the style tile and added the logo. I added bold to parts of the text in the second second to make that section more easily scannable for key words and phrases. I chose photos with homes in them since the company is about home security. I also added a gradient to the background photos to improve readability of the text.

Summary

Feedback from users during the card sort was a pivotal point in the process since it changed the messaging of the content on the site. Instead of creating a new problem for users by educating them on the importance of locksmiths and the locksmithing industry, a more effective strategy was to take an existing desire, wanting to keep your home safe, and showing how LockAware can help users achieve that.

Tools: Sketch, Invision, Photoshop, pen and paper