Smart Entry Mobile App

Mobile app companion for an iOT smart door

Optum logo
Background

Enabling remote access for Smart Entry users

With my team at frog, I partnered with a client in the home goods space to create a proprietary “Smart Entry” system for Home Owners. I led the design of a functional mid-fidelity mobile app controller, which I was later responsible for evolving into a high-fidelity mobile prototype. I also contributed to establishing and documenting interaction design patterns with the physical door, led 3 user research initiatives, and facilitated multiple remote workshops to gather product requirements and establish a feature roadmap.

My Role

Mobile Design Lead

Client & Context

Fortune 500 home goods company, client of frog design

Deliverable

High-fidelity mobile app prototype, iOT smart entryway prototype, information architecture, and user interaction diagrams

Additional Team

  • Mitch Murphy

    Design Director
  • Jason Jian

    Visual Designer
  • Ryan Starling

    Design Director
  • Whit Jardine

    Product Manager
  • Joe Gonzalez

    Industrial Designer
  • Videl Smith

    Design Technologist
  • Jasmine Busch

    Director of Program Management
  • David Hezlap

    Assoc. Director, Solutions Architecture
  • Kaz Saegusa

    Assoc. Director, Design Technology
  • Fran Wang

    Assoc. Director, Mechanical Engineering
  • Shining Li

    Sr. Strategist
Background

Bundling modular iOT features into a single product offering

Our client reached out to frog with the goal of creating the first all-inclusive “Smart Entry” system. This brief was established because of market pressure from a competitor, Masonite, who recently release a Smart Door in partnership with Ring and Yale. Our client sought to create their own Smart Entry system that didn’t feel modular and could be offered as an all-in-one proprietary product.

Collage of smart home camera, doorbell, and lock
Owning multiple, modular exterior smart-home products like security lights, doorbells, and locks clutter the visual first impression of the owner’s home
User Stories

Aligning the necessary features for MVP with the project timeline

I first needed to establish a set of user stories to guide my interaction flows. I collaborated with the design and product team at frog to run a series of discovery activities with our client and documented some high-priority user requirements.

Collage of Smart Home products
In a user story ideation workshop with the client, I collaborated with design and product to facilitate voting on MVP user stories across five different priority categories
Door Mode Diagramming

Illustrating user stories with limitless synchronous product feedback

After establishing user stories, I first believed that translating the user stories into storyboards would the best way to visualize requirements. Given the amount of variability in sensor inputs and feedback the door needed to produce, I realized that storyboarding was not an appropriate way of communicating both the story of usage and the product interactions simultaneously.

I changed tactics to instead create two complementary documents. The first was a journey map showing how users flow between different proximity zones around the door over time.

The second was a lexicon of Door Modes and Door Events, highlighting the expected inputs and feedback from the Smart Entry during use. By bundling the 11 component signals into modes and states, I could communicate easily with the prototyping team what feedback should be expected from each component of the door at a given time.

Door Modes document
Door modes A state of the Smart Entry as defined by one or more person’s proximity to the door (i.e. Exterior Proximity Standby: somebody is waiting outside the door)
Door Events Document
Door Events A finite state of activity with the door (i.e. Doorbell Ring: the doorbell on the exterior of the door was pushed, chime will end after a few seconds and return to previous state)
User Journey map
Using rows as proximity zones from the door, and columns to show time woven through modes and events, each story can be communicated as a stitching of various modes
Mid-Fidelity Design

Prototyping the main remote control interactions for the door

The primary interaction design deliverable was to create a remote control for accessing the door. Instinctively, I created a layout that closely emulated the control panel on the door.

Side by side of mid-fidelity screen and door control panel
I combined the interactive components on the exterior (top left) and interior (bottom left) of the Smart Entry’s control panel to create a mid-fidelity mobile prototype (right)
Information Architecture

Mapping out the holistic experience

To understand the necessary functions outside of the main interactions, I created an Information Architecture to outline future flows for user set-up, adding and editing users, activity logging, and notification settings. I also used this document with our product team to highlight which user flows would be MVP and which would be added to a backlog for handoff or future work.

Image of information architecture diagram
Complete information architecture diagram. Gray boxes indicate user stories that we designed for within 2-week sprints
Validation Research

Testing usability across a broad range of home owners

Throughout the entirety of the project, I facilitated 3 research sessions, with 5-7 participants each. Two sessions were in-person and used the Smart Entry and mobile app prototype simultaneously. One session was conducted virtually to test the mobile app prototype in isolation. Each session was formatted with a semi-structured interview introduction, a usability test with 2-4 workflows, and a closing reflection interview.

Image of Smart Entry door standing in a workshop
Physical prototype of the Smart Entry door for user testing
Image of in-person testing
At the end of the user test, I guided users to conduct a rose-bud-thorn exercise to mark features on the Smart Entry that they could see themselves using (blue), would be interested in using with improvements (purple), or do not see themselves using (orange)
Synthesis

Identifying user needs and correcting false assumptions

For the semi-structured interview questions, we synthesized the information using an affinity map to cluster similar feedback to be translated into actionable insights.

For usability testing, we positioned notes on top of their respective user flows. This gave us a ‘heat map’ of problem areas that should be addressed before moving to higher-fidelity prototyping.

User Permissions

Redesigning the add new user flow to work for all residents

Through user testing, I gathered a lot of feedback around different types of users both inside and outside of the household. Specifically, users wanted to give kids and extended family curated access to only a few select features. These insights led me to change our existing labels from user-type driven language (Owner, Resident, Guest) to feature-driven presets that can be customized (Full Access, Lock/Unlock).

Image of mid-fidelity user types pointing to high-fidelity access types
When adding a user to your door, “Full Access” and “Lock/Unlock” options in-app (left) pre-fill a customizable permission form with specific features (right)
Activity and Notifications

Prioritizing what and how a homeowner needs information about their door

Given the number of input sensors on the Smart Entry, I thought a lot about how to avoid ‘notification fatigue’ from in-app notifications. I facilitated a workshop with members of frog and the client team to categorize all the different inputs and forms of feedback.

Matrix for prioritizing notifications
To create a taxonomy of all notifications, we individually discussed each sensor to speculate everything we believe the Smart Entry could communicate to a user

From this workshop, we created a document organizing how each could (or should) be delivered to a user. This informed how different notification types should be delivered (such as push notification, text, email summary), as well as an in-app activity feed.

Matrix for prioritizing notifications
Notifications are logged from least urgent (left) to most urgent (right). While leftmost notifications can be sent quietly as reports or emails, rightmost need to be addressed immediately and are sent as push notifications or texts
Matrix for prioritizing notifications
Urgent notifications, such as someone actively at your door, are sent as push notifications. Tapping the notification opens the control panel so a user can immediately interact with the guest. The activity event is also logged in the activity for later review.
High-Fidelity Prototyping

Polishing the user experience to complement industrial design

As I was working to improve key interaction patterns that we identified in user testing, I was also collaborating with a visual designer on the look and feel of the app. With the client’s openness to our recommendation on branding, we created a visual look that emulated the physical control panel on the Smart Entry, but introduced interactions that were purely digital to enhance the user experience.

Side-by-side of light and dark modes next to door controllers
We created concepts in light and dark mode to show that we could re-theme the app to complement different home design aesthetics
Side-by-side of light and dark modes next to door controllers
Noise & glossy textures with a geometric typeface mimic the industrial design of the door, while the neutral color palette with a single bold accent provides versatility for the client‘s marketing team to create a product brand
Reflection

Handing off deliverables and recommended next steps

At the conclusion of this project, our team handed off high-fidelity interaction flows to demonstrate seven workflows that we considered high-frequency use cases. If I were to continue this project, I would want to continue designing from our backlog of additional user epics (i.e. offboarding/moving, interacting with multiple doors, and multi-space management) that would have been exciting to pursue.

Additionally, I would plan to work closely with design technology to create a high-fidelity component library. This way we could implement the new look into the functional mobile prototype so we could test a more realistic experience with the Smart Entry prototype.

At the end of this project, we delivered a concept that the client team was very excited to implement. Overall, I’m very proud of this work and I learned a lot around designing for iOT products, conducting usability testing remote and in-person, and collaborating with product, visual design, and technology.

Additional Case Studies

Let’s work together

I’m currently available for full-time roles in product, UX, and interaction design. Please reach out to me at steve@steveorchosky.com to discuss projects, network, or just to say hello.