With over 4.2 million users and $33 million annual revenue across all platforms, FRONTSTEPS is the #1 software platform for HOAs, Builders, Security & Patrol Experts, Realtors, and Homeowners. We deliver technologies that simplify how people build, connect, operate, and secure modern communities, with a diverse range of products and services. FRONTSTEPS was recently ranked in the top 100 Digital Companies in Colorado.
Objective
Create a unified service platform that combines SaaS versions of all of our products. Our new platform includes API integrations with strategic partnerships, connecting hardware-specific API and payments/accounting integrations.
My Specific Role as Product Designer
As the first in-house Product Designer at FRONTSTEPS, I am responsible for owning the user experience across the new product portfolio. I work closely with the Product team to define objectives and integrate UX strategy into the roadmap as well as guide the 20+ development team in design standards and principles.
The Challenge
Create an interface and user experience to support a subscription based platform known as "FRONTSTEPS Security." This platform is expected to reach parody with our legacy product, Dwelling Live and the Gate House App. Another important business need that impacts my design decisions is compatibility with its"sister" product, FRONTSTEPS Community. We recently inquired this product to complete our company portfolio by providing Condo High-Rise management. However, the unification of these two products does not apply for our MVP target. Therefore, users that have both, Community & Security, will need two important things: 1) an intuitive way to switch between the two interfaces 2) a closely mirrored experience to evoke brand consistency and user adaption between the two products.
Goals
Increase Retention
Improve tenant and HOA board relationships and attract more clients with excellent customer care and reliable, useful tools.
Engage Residents
Provide a mobile-first experience where residents can pay dues and connect with neighbors and community leaders.
Manage Efficiently
Streamline processes with centralized work order management, online payments, amenity bookings, and more.
My Strategy
Define and create FRONTSTEPS Design Principles & Style Guide/Framework
Create & implement a customized design workflow into the current agile sprint process
Establish a tactical ideation meeting to help improve the communication gap between product & development
Research & Planning for FRONTSTEPS Security
Usability Testing: Platform Navigation
Lo-fi Mobile Mocks to High-fi Prototype Screens
Style Guide & DesignPrinciples
FRONTSTEPS needs their own unique aesthetic and an efficient way to maintain/grow their product brand. So, I knew my first task was to create a living document that would act as a guide for anyone making design decisions. Having a consistent interface provides familiarity, strengthens the intuition of the user, and establishes the identity of the brand. In addition, consistency can save design/development time through the reuse of components or patterns, and enable a design system to scale and adapt with ease.
FRONTSTEPS Security has two strategic objectives:
1) Instill trust and confidence by providing useful and reliable tools
2) Increase customer adaption/engagement rates by driving the user to return and use the platform on daily basis.
I partnered with a small team of front-end developers and a technical lead to create these guidelines and strategize an execution plan.
The design principle that was my secert weapon:
"Fit for Purpose" is one of my best friends as the sole designer on this project. With some stakeholders only caring about how it looks, this principle was something I could always fall back on when I needed to define my design decisions. Educating the company on the differences between UX vs. UI was important factor when it came to understanding the time commitment and expectations of an "MVP." Fit for purpose is a vital design principle that guided us in the right direction when it came to prioritizing functionality over the “pretty stuff.” Our users rely on our products to complete serious day-to-day tasks and sometimes to do their jobs. The usage is not one of entertainment, but one that fosters a self help mindset by providing the user with an utility-oriented interface.
Implementing a Design System:
FRONTSTEPS Product & Engineering team has been functioning with only contract designers. So, it was important for me to educate the team on how design & UX would fit into the equation if I wanted the style guide and guidelines to be adopted successfully. As the only designer, I knew I could not execute on every design need for a project this big. But what I could do is streamline the UI design process by teaching and empowering the product owners to mockup their ideas using a Sketch template I created. This easy to use template included page layouts, guidelines, an easy way to drag and drop the style guide components. This allowed me to concentrate on the overall UX strategy and best practices while encouraging a design thinking mindset across the product team. I held several on-boarding meetings with Product and Development to get them accustomed to the new workflow.
Introducing a collaborative environment to establish the "how to"
Grooming ideas before they become hardened tickets
Like most young companies fighting to reach a deadline, their "MVP requirements" slowly grow smaller and smaller as road blocks are encountered. With a very small product team and lots of developers to feed, the need to create flushed out user stories is critical. But the developers/tech leads were not getting the early exposure they needed to give input on the execution. To accurately prioritize MVP feature requirements, the technical constraints, user needs, and business goals need to be taken into consideration to have an outcome driven sprint.
Sometimes as designers, our job is to get the right people in a room and facilitate an open, collaborative environment. (Which often times does not mean showcasing my designs first)
Download the entire Design & Engineering Meeting outline below:
User Research & Planning
To create a platform that meets our customer standards, I needed to first understand the current features, functionality, and experience they are accustomed to within DwellingLive, our legacy product. This product was built in the early 90s and carried a massive amount of tech debt. It was never built to scale to the size it is today. Queue the need for a new platform.
First, I preformed a heuristic evaluation to understand this complex, robust product, uncover problems and seek out potential MVP requirements.
Some key take aways:
I needed to maintain the functionality but improve the overall user experience and user interface.
Navigation and information architecture was not intuitive.
Specific user roles have different permissions based on the rules of a community and what modules they have purchased.
1. Utilizing Tech Support for Customer insight
Next, I listened in on phone calls with tech support to become more familiar with the features that different users value and the frustrations they encounter in context. Are these frustrations due to a technical constraint or can they be improved within the new platform? Additionally, how are these features actually being used versus their intended function?
This also helped me build a case for the prioritization of the MVP features to present to Product stakeholders.
Case 00548609: Adding Staff
Dealer user type’s “add staff” flow is cumbersome
Jenny from AMS is suggesting that dealer’s be able to assign communities to each staff member from one location. Currently, they have to login to each community they service and individually add all of their techs/admins. For example, if this dealer services 20 different communities and has 10 techs that need credentials, that’s 200 separate entries to add all dealer staff to each community they serve.
Improved Site Map for new Security Platform
2. Bringing Customer Success into the mix
Then, I paired with the Customer Success Manager to create an efficient new information architecture to simplify navigation for the new platform.
3. User Roles & Permissions
Finally, the product managers and I defined the permission & modules based on the business strategy. The authorization and identity servicer needed a way to distinguish the permissions of user roles within a module.
User Testing: Resident Navigation & Site Map
Tester A & B completed 6 out of 6 tasks, while tester C completed 4 out of 6 tasks successfully
To test our new navigation and site structure, I used Usertesting.com to recruit unique participants and instructed them to complete a series of tasks. I also included FRONTSTEPS Community in the testing prototype to validate the consistency between the two products.
Test Outline:
Imagine you are a resident of a community. The community gives you access to a self service portal so you can better manage your life and needs within the community.
How would you go about downloading your community's rules & regulations. How would you go about making a payment? You lost your key fob and need to request a new one. How would you go about that? How would you go about messaging your community manager? How would you go about booking a tennis court for a community event? Your friend is coming to stay with you for a couple days and you need a pass for him. How would you go about completing this task?
Key Take Aways & Observations:
Iterations
Creating lo-mid fidelity mobile wireframes & user flows
Resident Directory Flow
Dealer Hardware flow
High-fidelity prototype driving refined concepts
Current state driving development today, improving each day.
Want to know more about the specifics behind my design decisions?
Ask me about what I would have done differently regarding user roles and permissions to better meet user needs.
Ask me about the complex hardware flow I created for Dealers that setup and manage controllers, interfaces and readers for our communities!
Ask me about the other FRONTSTEPS products I have worked on