Matrix of interview questions.
Selino V
UI Design + Development
Helping People Stay Safe with Wearable Tech
Designing Kisi Unlock for Apple Watch
Product
Kisi Unlock allows a user to Remotely unlock any door from anywhere.
Problem
Users often find themselves fumbling for a mobile device when their hands are full at a door.
Smart Watch owners instinctively look to their wearable first, then to their phone to unlock doors which causes confusion and delayed unlocks.
Project
Transfer the Kisi Unlock functionality to the Apple Watch experience while removing friction from the unlocking process.
Research
Interviews
At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem.
Coincidentally 😉, I worked in a shared office space that uses Kisi to manage access. This gave me access to a small pool of volunteers that all rely on the Kisi mobile app on a daily basis to enter the building. A very small portion of those users also have an Apple Watch or another wrist based wearable which was expected.
The short list of 6 questions was crafted to find the perceived benefits and pain points within the mobile app.
Quantitative Results
I gathered metrics on how many doors are accessed, how often they're unlocked, and how long each unlock takes for each participant.
Test questions were thoughtfully worded and delivered to optimize for accurate data. Asking "how fast can you open the door" invites them to speed up. Asking "Can you show me how you unlock the door?" is more likely to illicit their usual behavior.
12/1
Unlocks Per Day
12.14"
Time to Open
Failures
Pain Point
I hadn't considered the danger aspect of locked doors.
Qualitative Results
Conversational discovery with participants yielded lots of information we hadn't previously considered.
For many users, the workday starts with the Kisi app.
While juggling briefcases, purses, coffee, and keys, they’d pull out their phone to launch the app, unlock their door, and step into the long day ahead.
Users may be in potentially dangerous positions unlocking their door, especially very early in the morning or late at night, and the time it takes to launch Kisi from a smartphone does not always provide the inconspicuous experience many users need.
Ideate
Sketch Notes
Designing Kisi for Apple Watch began with reflecting on the user experience, and what the convenience of Kisi Unlock already offers. What could bringing the app to Apple Watch provide for them? Could it save them time? Could it keep them safer? Could it even be kind of fun?
Wireframes
Using the Human Interface Guidelines as a starting point I began to assemble some rough sketches. There's a screen for each major action scaled to WatchOS.
Test
Testing Round 1
I've found that testing wireframes on tools like invisionsapp and usertesting can yield skewed results. The test subjects are often misaligned when the context of the UI is missing. People use a mobile app differently on mobile than they do on a laptop screen that's simulating a phone… during a remote video chat. Yes, the remote testing route can be convenient but there can be a lot of noise contaminating the tests to get clean feedback. Testing mobile and wearable tech in context can be key to getting accurate results.
Using Framer, I launched a test using a high fidelity prototype within an Apple Watch context.
Feedback
Clicking to open the door was just as effective as the mobile app
Swiping too change doors was intuitive
Switching locations worked but… the standard WatchOS list component gave all the locations equal visual weight. They all looked the same to most people until they concentrated. Friction was being created. The screen was failing.
Iterate
Test 2
I decided to explore the use of color to accelerate visual cognition on the location list. If users could associate a color with a location they would not have to read the text. This called for a color update to the unlock screens and a retest.
Feedback
The color coding dramatically reduced friction on the location list.
A user suggested that the large color swatches also provided a visual cue without looking a the interface at all. When she saw purple reflecting on the surfaces around her she knew she had the correct location.
The light also provided some appreciated illumination.
Deliver
Framer is great for high fidelity prototyping.
Success
Kisi users, especially those with smartwatches, prioritize efficiency and style. he final design serves both needs. Kisi is so straightforward that experienced users could unlock their door without even looking at their watch, a feat nearly impossible with the mobile app.
The animated transitions in Framer made a huge impression with the testers. A few thought they were using an iOS application.
The color coding of the locations would be a new feature to implement into the mobile and desktop apps in order to feed the WatchOS so I delivered the version without the color coding in addition. This was expected.
Will update this document when I get some new metric data to report. I'm keen to see how many seconds is shaved off of the unlock. 🤞🏾
Lesson Learned
The handoff of the prototype files for coding was not as successful as I had hoped. Going from Framer to code promised to be seamless… as long as the developer had bought into the entire Framer ecosystem. This includes the FramerJS lib along with JS as a base. There was no Framer to Swift/iOS bridge. This didn't render any work moot but it was a oversight on my part.