Case Study
A modular theme design at Propertybase.
Abstract
Propertybase is a full-service real estate platform for brokerages and teams. It combines lead and property management tools with customizable websites for lead generation. In 2018, I lead the design and development of a modular theme system that resulted in a 7x improvement in overall onboarding time1, helping the company reach its goal for scalability and eventual acquisition.
Overview
Background
In 2018, Propertybase was completing its second acquisition and needed to deliver a squarepace style web builder that met client demands and improved customer onboarding time. The current onboarding process contained a serious bottleneck as each customer required the design and development teams to create a custom client facing website from scratch. I was tasked to help solve this alongside another team member, Ethan Welner. I was directly responsible for the visual design and frontend development.
Problem
The customer delivery deadline was rapidly approaching and it was clear that we did not have the time we needed to build a full scale web builder. We were challenged with having to streamline our product vision in order to create a feature that met core customer requirements and could be built in a shorter amount of time.
Objective
After various conversations, we identified the following objective: research, strategize, and design an MVP web builder that meets all essential client needs within a 5 month deadline.
Research
The Kickoff
Since we were on a tight deadline, we decided to begin the project by taking inventory of the data that was already at our disposal. We had a customer success team with detailed knowledge of customer pain points, as well as documented insights from our customer advisory board.
Working with customer success
Throughout our conversations with the customer success team, it became clear that it was possible to create a streamlined product experience that still met all of our customer needs. For example, we learned that:
- Most customers were not tech savvy enough to use a full featured web builder.
- Most customer would be excited to have a customizable web theme.
- Most customers just wanted the ability to change logos, fonts, and colors.
Insights from advisors
Insights from customer advisory board meetings revealed very similar sentiments. For example, we learned that:
- Most customers wanted to give their teams the ability to stand out with different fonts and custom logos.
- Most customers wanted something "ready to go out of the box" and found the a website builder too complex.
Strategize
As we consolidated the information from our customer success team conversations as well as meetings from the customer advisory board, we realized we didn't have to create a full scale web builder. Instead we decided it would be possible to create a customizable web theme provided it offered enough flexibility to customers and allowed them to differentiate themselves from others.
We created the following success criteria to guide our thinking:
Unified
- One customizable theme
- Modular components
Intuitive
- Simple navigation
- Always focused on privacy
Efficient
- Prebuilt theme setup options
- Prioritize accessibility
We also needed to determine the limits of customization, the affordances we would offer, as well as how we planned to speed up the development process. We created guidelines for this as well:
Components
- Fully responsive
- 3 "out of box" styles
- Uses design tokens
Layouts
- Mobile friendly
- Multiple layout styles
Additional Customization
- Header and body fonts
- Font colors and card colors
- Button styles
This led to the creation of a variety of design patterns that needed to be replicated in frontend code. As an example, we created the liquid card system which allows cards to respond without the use of media queries and which can also change layout orientation with a simple modifier class:
Design
Wireframes
Now that we laid out the foundation of our strategy, it was time begin creating our designs. We began creating various wireframes for each component as well as working on the frontend code in tandem. As an example, we started with the property search page which required the creation of the page layout, property card components, as well as navigation components:
Hi-fidelity
After we wrapped up the wireframes, we moved directly to hi-fidelity prototypes for the search page. We repeated this process with each component to be as efficient as possible throughout the project. Take a look at an example of the search page and it's components.
The final product
Things really started to take form in no time at all. We wrapped up the project on time and received great feedback from clients. Since clients were now able to launch a website out of the box, we saw nearly a 7x improvement in customer onboarding time1!
You can view the finished prototype below.