Lead design that unlocked the power of the consumers device

Definition

iOS & Android App that manages and unlocks the Master Lock eLock.

Challenges

An untested UI kit was provided, but not optimized for an app. There were over 200 wireframes for relatively simple interactions. The app needed to sync to a physical product. Specs were needed for iOS & Android. The app needed to be localized in four languages.

Approach

I identified templatable screens to avoid over designing. We tested the app with lock prototypes and vigorously QA’d the app in all languages. I spent forty hours on specs for both platforms.

Lessons Learned

I gained a deeper understanding of what development needs for iOS vs. Android apps. Specs go faster with defined units, grids, and codes.

Deliverables

All iOS comps

All iOS & Android assets

Interaction model animation

Unlock Interaction

There are three different ways to unlock your lock in the app and one of them is a full screen view. With a simple swipe on the phone the user can unlock the physical lock in front of them. 

Deliverables included interaction comps that included different states like unreachable, unlocked, and lockermode (inactive mode) and an animation in After Effects to tie them together.

 

Lock details interaction

When lock details were exposed, the user had access to view/change their manual code, view/change guests on the lock, and view the history of the lock's activity. All the while they could still interact with their lock in a condensed header.

SPecification Documentation

The Master Lock spec doc included 60 pages of scrutinized measurements of the iOS and Android app comps. Standard grids and nick names made measurements, colors, and type easier to point out. 

I worked with development to make sure that this information is exactly what they needed down to the units of measurement. This document was used as the gold standard for specification documentation at ÄKTA.