The new August Wi-Fi Smart Lock is now equipped with built in Wi-Fi, requiring no bridge to connect and new solutions for its new features.

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.

AWSL-Silver_Matte_Black

 Marketing Photography by: FuseProject

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

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 Experience
User Interface
In-App Photography
In-App Videography
Iconography

 
Industrial Design

FuseProject

Titan_Silver

 Marketing Photography by: FuseProject

Goals

There are a few goals that were set along with the launch of this device.

T1.1

1. New built in Wi-Fi

With the new addition of Wi-Fi module in the hardware, August is introducing a new method to connect to the internet without using a remote bridge device. This is the first time I incorporate Wi-Fi setup as part of the device setup flow and incorporate screens built to set up success for the user experience from the get go. 

T2.1

2. Modular design

Making the designs modular in every part of the flow will be easier for the engineers to make changes, and for August users to understand clear grouped and compartmentalized parts in any flow. This is done by clear messaging where users are and categorizing features in settings in groups that make sense.

T3.1

3. Update behaviors

August Wi-Fi Smart Lock's smaller form factor made internal changes compared to the previous versions from its layout, battery type, memory, light behaviors and installation repercussions. With that, I am updating our device behaviors and expectations through close collaborations with engineering teams.

Looking at our current setup flow

Based on feedback, our reviewers and users love the way we architect convoluted information with easy step by step guide for customer success. This led to a drop in customer support calls by 30% compared to our older setup flow.

Old-Setup

If you see in this flow, we start from the top left towards the bottom left, a path where there are a lot of options and information that a user may encounter during the setup process. First, the user needs to go through the sidebar menu in the app to get to the set up a device section, and they face a list of devices that they need to install. Then, they pick the device lock model they have, listed by generation type and image renders in the app to show the list of devices.

Old-List-3

These renders are all done in sketch, along with the photography of the backgrounds were done in house. However, with the growing list of products coming in from our parent company AssaAbloy, August will have hundreds of locks to be merged in this app and this style of product list will be very heavy to our app weight, and logistics of getting renders and background images is time consuming. It worked great when August had only a 11 products in the past, but it was clear the app needed something new and more modular, so it can accomodate inbound products from August's sister companies

Further going down the list in the flowchart, I also have made it modular with the installation guide and DoorSense guides. These are web view, internally hosted, which was worked on for quite some time. Compared to our competitors, most host a one time video through Youtube and though it's easier to ship, it is actually more difficult to update if you need to modify it in the future because you would need to change the video link, updating the video, and refix links to other parts of our support pages. With the modular system, I proceeded with something that is easy to manage, depending on the device type, deadbolt type, and lock type. The DoorSense sensor magnet in the lock is different from lock to lock, and I provide two installation types - surface or flush mount. With all of this compilation, the modular system works and all assets/steps are updated with August Wi-Fi Smart Lock.

 

Then the house setup is something August have always been using since our first generation. This system is something that has been the base of the app architectural system with the ideas of keychains. With no bandwith to update that system and revamp the whole perspective around keychains. However, if I did, it would've been a much needed one with new products that doesn't fit our front door access mindset with most of the current product. In this case, we still provide the user to edit their house name, lock name, and add their own house image. At this point, the lock has already made an establishment with the app through bluetooth. Each DeviceID is paired with the app. 

The HomeKit step has always been a modular flow that is attached here since our second generation smart lock. I also decided to not change anything here as it still works and if we were to update it, it would add time because of the approvals needed with our partner Apple. For the rest of the flow, the lock does most of the work behind the scenes with the app by calibrating, doorbell cam setup if you have one already setup, and a step where the lock sends back and forth information with the app to see if all is good before proceeding to the lock screen where you can control and use your lock. In this version, the software update happens right after the setup flow immediate in the lock screen. This lets the user feel "almost there" but really, one more step.

What we're doing in this version

With August Wi-Fi Smart Lock, the process is even more streamlined even though it's adding a step with the addition of Wi-Fi setup. Previously, adding Wi-Fi has always been done only if you have a remote connection bridge device August Connect. Incorporating that system and porting it to the August Wi-Fi Smart Lock is the most efficient way to execute this process.

New-Titan-Setup

I have taken a new approach with this version, a much needed update with clearer view under a few months before launch. Here, I also silmutaneously work on a international expansion project to setup with QR codes (You can view that project from the home page of this portfolio site). What this does, it gives the users less taps to go through, and browse which version they have by viewing the images provided. With this, I have worked with our partners in the factories and creative team to add QR codes in our physical devices next to the HomeKit qr codes setup. In both our iOS and Android apps, I set a qr code scanner for the user to scan and immediately recognize the device. The app will automatically notice the code and able to differentiate it from the HomeKit QR code. The new screens also give you second and tertiary fall back options, where you can enter your serial number as a second option or a device picker that has no pictures as a third option. This all text list view saves the app a lot of app space and all are now driven by the server.

QR-3

The mechanics of this flow is essentially the same, however, I am reinforcing our previous design's steps into categories. This is previously specked for previous versions but were not quite well implemented. In this version, I guide the users with cover categories indicating what they're doing in these sections, as a sense of setting expectations, think of it like chapters of a book. In the installation guides, I also added new assets and laid out extra steps needed for installation especially with the cover plate provided inside the box for August Wi-Fi Smart Lock. 

During lock setup, I also added a user access invite page that was part of the product specification if you have current guests in the house. This streamlines the adding process instead of inviting one by one later post setup. Then finally, our biggest addition is our Wi-Fi flow. This Wi-Fi setup borrows the essence of our August Connect setup flow and a hybrid of our August View setup flow. This hybrid leads to a marriage of automation and a case of following device restrictions per OS. The happy path is, that the device would know which SSID of the current device and due to restrictions, iOS does things differently than Android where iOS needs you to enter the password manually after connecting your phone to that device. Our lock reads that SSID from the phone in attempt to connect to the internet. During this time, the lock is in Wi-Fi provisioning mode and looks for that connection. 

Wi-Fi-1

The devil is in the details, hence every scenario is thoughtfully considered, including error screens, such as if the user quits while still in the Wi-Fi setup flow. In the screenshot above, you'll see the variety of steps considered including which OS shows which screen, and in this case, shows an instruction on how to switch Wi-Fi through the phone's iOS settings.

Screen-Shot-2020-04-19-at-11.59.52-PM

Device Installation and Calibration

New installation and calibration assets are updated with August Wi-Fi Smart Lock. In addition, I also included the optional Door Plate Cover in the flow.

calibration_titan_closed_unlocked-1
calibration_titan_ajar_door
calibration_titan_lock_door
calibration_titan_open_door
calibration_titan_unlock_door-1
doorsense_hero_titan-1

Along with with my own photoshoot and videoshoot, each step is still shown clearly to install and calibrate the devices. By hosting it in our secure server, these assets are modifiable anytime we want to update an asset, add or remove a step, or even diverge to different paths. 

During the shoot, I also told that in the code, there were no errors previously attached to the calibration of the lock separate to DoorSense, so this time I also specked out what those errors were and where they would be. Previously with calibration, the lock calibration reading and DoorSense happens silmutaneously attached together as a flow. By separating and modularizing these two, I am now able to create specific error conditions without disrupting the whole flow. Because of this, I worked closely with the engineers to get a deeper understanding on how the lock firmware captures these DoorSense readings.

To view some of the videos of the installation guide, click here

Errors

I also encountered a problematic device error where it didn't notice the 2 possible error states the app couldn't read before. As it turned out, the app was capable to only read once error case and it was misinterpreted as a device error rather than a calibration error. With that, I suggested to divide the lock readings and the DoorSense™ readings to be separated to two errors. 

App-Cover-Copy-14

Device Behaviors

One of the behaviors highlight is the change in the lock light animations. Instead of our older device light styles, August uses a single RGBW LED behind the logo of the faceplate to show both lock and unlock. In collaboration with Jeff Heppert one of our User Experience Designers, we prototyped the timing to match our original lock/unlock sound design provided by FuseProject. 

1. Explorations of sound and light

👈🏻 Here, you can see all the explorations we did with the light and sound behaviors. One of the main problems is how we need to portray both the light behaviors of 2 different operations, lock and unlock, from multiple dots of our previous locks and change that into a one LED behavior.

As we got a tip from one of our colleagues, turns out the sound of lock and unlock follows the syllables of those words. And so with that in mind, we chose the light behavior that mimics that fun tip, and after asking around our coworkers, 93% of them finds this one to be the one that makes the most sense.

Please manually click on these videos as it will trigger the sounds as well, and mute or pause them as you browse the other ones.

T1.1-Copy-2

2. "Don't touch the big red button!"

Well, kidding, but there has been a long conversation where there is a red button at the back of the device. Going back and forth with the product team, we debated over the use of this red button. Most people think it would be a reset button, but that's not the case. After a long debate of what this button would do, I eventually rely on the sole base belief from August that our products should be secure. And to not compromise that, among with the request from Apple, is that we make this button to be a HomeKit reset button. Since we also have no product manual in the packaging, I have to refer this button separate in the FAQ. If I were to have time to revisit this, there would've been a clearer messaging around it as we might expect some CS calls otherwise without clear indication of what this button is.

Titan-Icon

Device Settings

This time around, I also re-organize and added new tabs to the Lock Settings, adding a few tabs to the settings page, and a new icon representing the August Wi-Fi Smart Lock shown above 👆🏻. 

Lock-Settings

I added and removed things in the lock settings list, but fundamentally all of the parts are modular, so they are easier to move and recategorized as needed thanks to mobile engineering work. In our design sprint, I did a mini cart sort in the design group to categorize the Wi-Fi settings features that are added after brainstorming what those features are. I also cross checked these features to that of our doorbell cam settings. 

Compared to our doorbell cam settings, these seem obvious as not much are actually changed, however I do want to note here that some of the Wi-Fi settings are in different places, in if I had the chance to update it, I would categorize Wi-Fi settings as its own category. Also, Notify when offline is also ported from our August Connect remote bridge settings, bringing it down to under the notifications tab. We deem that this feature had a great feedback from the customer to be able to manually set them on or off, and so we also placed it here. 

T1.1-Transparent

Messaging

2.4Ghz/5Ghz Network Compatibility

Throughout the entire Wi-Fi setup experience, we emphasize the network compatibility. Since the beginning, we have debated if this product should talk to both network frequency. As I suspected, after rounds of questions with a focus group conducted by marketing, 70% expected devices today to speak to both networks, while the others don't really care. The difference between these frequencies are how much of a wide spectrum and interference both has. With the 5Ghz compatibility, it would also drain more battery as testing by the engineering went. All and all, we decided to stick only with 2.4Ghz network. With that, we collaborated with CS and Marketing as well aside from the app to clearly communicate that this is a 2.4Ghz compatible device.

In the app, during Wi-Fi settings, we mention this note 3 times.

Copywriting the app

With a lot of copy over the years, different designers come and go, the copy of the app changed its character and sound. I pushed very hard on having a clear communication between designers, marketing, and product to have a solid brand sound, which has been lost over the years. So we came up with a friendly front desk concierge voice that is welcoming and yet trustworthy. Because trust is difficult to have, reliability is key to this message. With that, we started to use the words such as "apologies", "please", "we recommend", or "if you wish"  and more human sounding rather than robotic. 

Messaging Through Imagery

Not just copy, I have made changes to the images as well and started to use less device renders. Part of another project,  I contributed to phasing out using less image renders, so that screens become more modular in the future. Such example is error screens. It used to show our default image render of the device above our error copy, and also avoiding OS level pop up errors as part of our design systems. Now generic icons such as exclamation marks so that it could apply to other devices as well.

FAQ/Customer Support

During these times I also made a doc list of all the articles needed for this product. Listed all of it for product and customer support to fill in the right information for the customer later on. In total there should be an additional of 8 articles or so apart from the generic lock KB articles. 

Reflections

For the first half of this project, I had no product manager nor VP of product. I'm thankful for the opportunity to lead this project and the learnings I got out of it.  Cross functional teams really worked well under tight schedule and deadline to make this work. While it may sound simple to a customer that August just added the Wi-Fi module in the hardware and made it smaller after 4 years or so, it was actually a lot of work and years of work compiled to make this device happen. It's been in our dreams since the first year I started at August as the 30th employee. 

The modularity of the designs for this product has been the backbone of every product thinking. I am proud of the work the overall team did towards the decisions made, but also a few that I would also want to update. I would revisit the button at the back of the device, as if we talk about security and not wanting to have this button in there, maybe we should not make it as jarring in red color on a black plate. 

The latest notes from our beta users has been positive, where QA has a set of focus beta user group that helped us with enormous helpful feedback. 

Note: Our agile work style as a startup and situations related to the pressure of launch time and times where there was no product manager pushed me as a designer to be able to self manage and at times make decisions. I learned a lot from that but also wish I could do more proper user research, product testing, and use design methodologies that could apply. Maybe next time.

Press

"The new lock also looks nicer and performs better than its predecessor, both of which are welcome improvements."

- The Verge

"And in a lot of ways, the Wi-Fi Smart Lock is setting a new standard that all smart locks will be compared to going forward."

- Gizmodo

"This is a great smart lock, with fast and easy installation and ergonomic, visually pleasing design and broad compatibility."

- TechCrunch

favicon

San Francisco | California 2020