SentriKey (Mobile)
Product Design
SentriKey (SKRE) is an subscription based app for agents, brokers, and admins in the real estate market to edit their listings, showings, and SentriLock lockboxes.
Project Overview
In this project my personal role was conducting interviews, mocking prototypes, adding a mobile variant to our design system, introducing design tokens, and presenting to stakeholders.
SentriKey Mobile
Project Duration:
2 Year
The Problem:
The company worked on a legacy system that was very outdated. This caused users to send feedback stating that the system did not feel uniform causing many pain points.
Goals:
-Reduce clicks per flow
-Introduce Design Tokens
-Improve copy messaging
-Consistent design via updated design system
-Large scale customer communication on app updates
-Forgot password optimization
The Numbers:
-60% click reduction for onboarding (15 clicks -> 9 clicks)
-35% increase in user journey success rates
-30% less miss-clicks
-.6 increase from 3.5/5 survey app rating
Before
After
Discovery Phase
Research Utilized
Usability Studies- In person qualitative sessions where we watch and record the users habits, body language, and behaviors.
Surveys- Used analytics software called Pendo to push surveys for a quantitative approach covering features they'd like, dislike, etc.
A/B Testing- In person qualitative sessions where we test the above statements to determine significance.
Customer Outreach- In person "Surveys", live studies.
What did we find? (Pain points)
-Onboarding was a long winded process that took 15-17 clicks before a user could actually interact with our lockbox (#1 priority).
-A lot of key features were nested in the application, user journeys were complex and long winded.
-Buttons were so small in certain instances they were barely clickable for users that needed more accessibility than what their OS systems could provide.
-Many user journeys did not allow user to fully return home, instead users had to press the back arrow 4-8 times to return to a screen with home navigation.
-Forgot password was a clunky process that made users leave the application to a non-reactive desktop site causing a poor experience.
-The current flow to allow users to access our lockboxes did not allow for certain user bases to choose between multiple bluetooth signals
-Mobile application did not allow users to update notifications on their device, instead users had to access via web application (which is not mobile inclusive).
Personas
With the nuance of the real estate industry, creating a wide range of personas was a key point to consider since users could range from 18-65. The fun thing about this sector is that it really applies to a broad spectrum of individuals. With the research made to find our demographic the personas below provide a sense of our user base. (These will be the same personas as the previous case study as it is the same demographic)
Product Mapping Tool
A general workflow or path that our users need to go through to achieve a certain goal. This can include unlocking a lockbox, assigning a lockbox to an agent, assigning a lockbox to a listing, or even entering a listing. This file is a bit large due to the scale of the product so this can be talked about in detail if needed.
Onboarding Sample
Prototype & Visualization Phase
Process
As we gathered our goals/objectives from our discovery session, we started creating an exploratory document of high fidelity wireframes to get the creative juices flowing (due to our companies process and workflow it was more manageable to skip lofi wireframes as our design system housed a lot of easy to reach assets). This exploratory approach allowed us to flush out multiple ideas and approaches to the same problem and allowed us to speak on pros and cons of each frame to our PM and stakeholders to get a better sense of how they could fulfill our business needs. After frames were approved we divided them from the initiative and branched into features and user stories to refine with the development team.
Design System & Tokens
We had a large focus on uniformity on this project now that we had a working & growing design system. The next step was to introduce design tokens and make sure that communication was easily digestible between designer & developers.
Frames & Prototypes
A quick glimpse of some of the base features, if you have time to look at the Figma at the bottom it shows a bit more in depth of how the frames react to each other.
Testing Phase
This phase is two parts, one is the design QA, while the other half is "beta" testing. During the multiple months of sprints we worked hand in hand with our developers to make sure that the vision and uniformity was filled especially since this was our first initiative that utilized design tokens. After each release we utilized this time to bite small chunks of usability testing with our testflight builds, and set up a small user base (a real estate association in this case) to be beta testers to utilize our product for a few months to see if we needed to make any adjustments before releasing to the public. Results of testing had a positive outlook on new & updated features and a majority of our previous friction points were solved but had a few minor bugs along the way.
Going Forward
Takeaways
Impact:
-Having a high focus on reducing friction allowed our users to spend less time in the application, and more time creating a perfect interaction with their customers.
-Increase in positive company image from higher ratings, and capabilities shown through surveys and trade shows.