top of page
An app to mange IOT enabled locks and share keys
The problem
Users had difficulty in sharing keys and remotely ensuring that all access points were locked.
The goal
To build an easy to use home security app that offers locking/unlocking option and also the ability to share and manage keys.
My role
Being a solo project, I had to perform UX research, UX design, wireframing, prototyping and iterating designs.
Tools
Adobe XD
Adobe illustrator
Adobe photoshop
Jamboard
Preliminary survey
The initial user research conducted was to understand the needs of the users and what they would expect from such an app. Through the research it was found that users wanted to be able to use the app frequently, however would prefer minimum interaction to perform lock/unlock function.
The ability to share keys would be a secondary user flow. Existing apps and concepts were researched from popular platforms like behance to understand the expectations of current consumer market.
User pain points:
1
Assurance
Users couldn't easily ensure lock status remotely from their phone.
2
Security
Users had to often leave their keys behind or hide it nearby to share their keys with friends o family.
3
Convenience
One time access to certain parts of the house couldn't be granted in case of repairs/renovations.
4
Access log
There wasn't any way to view lock/unlock history with details of person accessing these locks.
Insights:
The user research conducted helped us identify various user groups with different needs within the app. Some people were interested in the remote lock/unlock option, others wanted a way to setup automated locking based on timer and events. Sharing of temporary time limited keys and its management is a feature that would be included which was suggested by some users.
Design Process
Paper wireframes
Tried various ideas for each screen and came up with different designs and each element was selected based on its usability.
Digital wireframes
We aimed for a familiar and easy to understand layout.
Based on the low fidelity mockups, we developed a low-fidelity prototype to test the functionality of the main user flow.
low fidelity design
Initial design choices
The components of the initial design were designed keeping minimalism and to appear 2 dimensional.
The card design of key and users also followed the minimal approach.
The card design of key and users also followed the minimal approach.
permanent key
temporary key
Usability study
The components and basic design were presented for usability study and the following findings were observed.
1
The switch cards didn’t
feel clickable and the
switch toggle wasn’t
evident.
2
Permanent key and
temporary key were not
visibly different from each
other.
high fidelity design
Iterating on basic design
Components were redesigned to include depth, color and icon to indicate state of lock and these elements were organized to be a part of the design system.
The card design of key and users also were redesigned to better distinguish and draw attention to temporary keys.
Mockups
All the insights from the user study was carefully analyzed and the insights formed were prioritized on the order of importance to design the high fidelity mockups.
Prototype
The high fidelity mockups were connected together to build a prototype for user testing.
Accessibility considerations
1
Sizing
All buttons have been designed with accessibility in mind. The button size is easy to click and button text is accurately mentioned to represent its function.
2
Color
UI elements such as call to action buttons and icons have been designed with contrasting colors as per Web Content Accessibility Guidelines (WCAG).
3
Minimal UI
Each page consists of minimal UI elements and has an easy to follow navigation scheme.
Final design
The design choices of the final design was the result of the brand vision and ensuring accessibility constraints are met. A second round of user testing was done to ensure that the app met user expectations and offered a clear and concise user experience.
The details of the usability study conducted is included in the case study.
Takeaways
Impact
From the beginning the app was aimed to be accessible, easy to understand and strictly followed user centered design. This is evident in the way the app turned out to be.
“I can definitely see myself regularly using the app, the easy to understand interface and straight forward interactions adds to the overall user experience.”
- (study participant)
What I learned
The project helped in understanding and designing to fulfil user needs. It helped me learn about the requirements and expectations of users that need a reliable home security solution.
Next steps
I hope to hand over this
project to development
along with the design
system to aid in product
development
The copy writing in the
app can be improved to
make it even more
understandable.
Additional features can be
designed without
affecting the minimal user
flow.
bottom of page