August's popular simple device installation changed how we look at conventional methods of reading manual books.
The new August Wi-Fi Smart Lock is now equipped with built in Wi-Fi, requiring no bridge to connect. All in a smaller housing by 45% volume reduction and 20% slimmer profile.
Background
With every launch of new product, August needed to create new installation guides, and each one is specific to their own device. Prior to introducing our 3rd generation hardware devices, we noticed around 80% of our users had difficulties with our installation guide.
Role
Our design team collaborated with product managers, customer support, engineering and marketing to create product planning, ideation, and build the guide. I, along with another designer built this comprehensive guide, research, and ideation. I also led the asset production and program management.
Overview
As the lead User Experience Designer for the August Wi-Fi Smart Lock, my involvement with this project focuses on building a simple and easy to understand experience from the moment you unbox the device to after care. That includes the following:
• Device Setup
• Device Installation
• Device Behaviors
• Device Settings
• Asset Production
• In-App Messaging
• Product Planning
On paper, this may not sound like a lot of changes for a company to just add Wi-Fi chip to a new device and make them smaller on the hardware side. However, as you will see here, there are a lot of work goes into the software side as well, and how the marriage of hardware and software plays a critical role in conducting an orchestra of end points to support this product to success.
Involvement
User Research
Persona/Scenario
Wireframing
Prototyping
Asset Production
Sketch
Zeplin
Constraints
2 months work
Limited resources
Limited bandwith
Cost minded operation
Mini note: In August's entire app experience, a user spends the longest time interacting with the app during setup and installation. August's main purpose of the app is to use less of it if possible and remove the tech friction by offering acessories and solutions such as Apple Watch feature, and widgets for iOS and Android for faster control. This is the reason why August invested so much resources and thought into the onboarding process for these devices.
Problems
1. Our printed installation guide was tucked away inside an envelope in the product packaging. It wasn’t discoverable and it assumed users would read them.
2. Static illustrations and paragraphs of instructions didn’t convey the instructions efficiently. The app also doesn't mention the instruction manual before setting up.
3. Flow disruption - the app didn’t mention any manual and assumed the user had installed the lock prior to using the app.
4. Each user has unique setup in their house, from their deadbolt type, wall type, or wether they want to install optional DoorSense (door sensor) for their lock. They would need to get specific installation for specific setup.
Goals
Business Goal
Our business goal was to introduce 3 new devices while still maintaining our reputation in simplicity and security and at the same time lower company costs.
UX Goal
Provide a simple way to illustrate complex information without breaking user flow for setup
August Users
Our target users are people who come from a variety of mindsets. Personas help guide the design process and decisions. These three were picked due to the variety of potential mindsets each brings to the table. With their different background and needs, each would have different opinions on how these installation guides look, feel and executed. We base on their need to how often they would read this guide, their expectation, and their confidence level in following the guide.
Sketches and Planning
We collaborated witch customer support team to build out a comprehensive instruction for each product offering. We wanted to cater to specifically users who had no experience with any door lock mechanics. We wanted to avoid the user to feel overwhelmed by interacting with their deadbolt lock. In order to do that, we took our step-by-step printed instructions in the packaging to the app, where it merged nicely with the app onboarding flow, and replace static images with videos. The app allows us to fill in complex flows and make them interactive, where a user can choose their choices and their match their door type to the correct flow.
Design Direction
Our main app consisted with templates and design system that helped us guide through the decisions we made during this process. As part visual and part text, we utilized the same design that was mainly used in the overall setup flow. It allowed us to visually portray the visuals on the top and the streamlined instruction supporting copy. We also wanted to have a progress bar for the user to find out where they are in teh step, and a navigation that allows them to go back and forth between the steps. At the time, most of our competitors only showed a video that you had to scrub and pause. Since that experience wasn't friendly for August's standards, we gave our users the ability to easily navigate between the steps so they could take their time.
We also thought webview was going to be a better solution in the app after reading iOS and Android guidelines, because then we didn't have to store all of these assets in the app itself, and saving the user their app size in their smartphones. Plus, we could also easily update the content as we wish without the need to release a new app update. The modular design allowed both August and the user the most updated instruction.
With video and image asset production, we wanted to give a personal touch to the users, and keep cost low. Here we wanted to subtly communicate that there were real people behind the August device the purchased, and we care and took the steps to guide you through the process. We also decided this decision over motion graphics due to the time constraint, and the ease of using the assets needed for the KB articles as well.
Production
Both my co-designer and I split the work, where he built and coded the web view components to match our designwhile I provided the assets. The shoot took 1.5 weeks with edits and revisions for all 7 devices and 146 shots. Each shot is coordinated with the optimum angle for the specific parts we wanted to highlight. My co-designer also helped with icon sets for the deadbolt adapter picker.
Why
1. We eliminated discoverability issues by fusing it in the setup flow. Users do not need to scout for the installation guide in the packaging.
2. Interactive videos made it easier to follow through at user's pace, removing the need to scrub videos and IA issues. This saves the user's time from reading long text heavy manuals.
3. Modular design made it easier to update on August's end.
4. Less cost, we built all of this in house without much spending.
5. Didn't affect app size because of web view.
Validation
1. One of our most popular selling feature is the ease of installation
2. We tested internally by sharing our prototype and made rapid changes. Shared it to our product, CS, and executive team.
3. After launch, we decreased 87% of incoming support tickets regarding installation
2. Competitors started to follow our lead on this feature soon after
Full Case Study
For a full case study version of this project, feel free to reach out!
Reflections
If we had the time and resource, we would've explored the reusable style of motion graphics, as it needed less logistical process in the office to get a studio area and shoot. I learned that we didn't always need to design everything coded in the app. Web views could also help mitigate problems like modularity, scalability and IA issues for each customer. We learned to empathize with our users who might not be familiar with the in and outs of a deadbolt mechanism, doorsense installation, or even some doorbell installations. The way we nurse them for each step was crucial to drive this success.