My role:
sole UI designer
My deliverables:
1 set of wireframes, 1 set of mockups
Goal:
Design a mobile application to monitor and control the company August's next generation smart lock ecosystem.
Constraints:
iPhone XS screen.
Assumptions:
User's will have data services when using the app.
User requirements:
● See whether the door is locked or unlocked
● See when the door is open versus closed
● See if and control whether lock is in auto-lock/unlock mode
● Instantaneously lock or unlock the door remotely
● View a live video feed from the device’s camera
● Grant secure access to family and friends (including temporary access)
● View a history of all activity
● Be notified when an event occurs (video detects someone, lock is tampered with, a user enters using either their passcode or bluetooth)
● See when the door is open versus closed
● See if and control whether lock is in auto-lock/unlock mode
● Instantaneously lock or unlock the door remotely
● View a live video feed from the device’s camera
● Grant secure access to family and friends (including temporary access)
● View a history of all activity
● Be notified when an event occurs (video detects someone, lock is tampered with, a user enters using either their passcode or bluetooth)
Paper sketching/planning
User characteristics:
I researched what the major needs and motivations of a user of the August home lock would be. I found that users are generally homeowners, above 30 years old, usually with families. A typical user would be concerned about (family) safety (door state) so that is the home page to cover a majority of app interactions. The history and current guests lists are scrollable in reverse chronological order to correspond with a user’s more likely need to see more recent items and take actions on them.
(https://www.brookings.edu/blog/the-avenue/2017/10/09/who-is-the-new-face-of-american-homeownership/ )
Mockups in Adobe XD:
Design rationale:
- Color Palette: This smart home lock is the future of home security and I chose a dark theme because dark colors/blues can be associated with advance technology.
- The brain processes images faster than it does text. Given that a user may be using this frequently and for quick actions, I made the home page icon heavy rather than text heavy.
Feedback from client:
User found the access icon to be creative but the names on the Access page were difficult to read due to their color.
The live indicator on the home screen looked more like an indicator that the user was getting live information, rather than a button to access a live camera.
Next steps:
Use a lighter text color for the black background to increase the contrast and improve legibility.
Reformat the live button to make its functionality clearer to users.
