In May of 2017 KW Team Leads, a real estate CRM SaaS company, had a shift of focus on redesigning both the interface and experience of their platform to better service their users. I was brought in as a lead UI/UX designer working directly with both the product manager & the CEO. I was responsible on conducting user research, interpreting analytics (Google Analytics, Crazy Egg, Site Control, etc), designing user flows, wireframes & mockups as well as delivering code-ready designs & assets to developers (HTML, CSS). I also created demo videos & manuals for the company’s help desk & training centre.
The Real Estate industry is a complex industry to begin with & I personally had no background on real estate and how realtors & brokers function. I knew that I had to quickly immense myself in this world in order for me to design the current platform towards. Keller Williams owns majority of the company’s shares and is the main promoter of the platform so I had to learn the way they approach this industry first. It took a lot of studying new materials but luckily Keller Williams provides a very robust manual for their people. I also had to sit down with an incredibly successful real estate broker that worked for the company asking question and just eating up all the information I can get regarding the industry.
Learning a complexly bad platform
When I first opened the current platform… it was just bad, there’s no better way to really say it. A lot of design inconsistencies, important features are hidden, and just no visual language. One of the worst part of how it was designed was something called “States” which means that you always had to switch “views” depending on what type of agent you are (Buyer, Seller, Aftercare, Lender, etc). This is one of the main reason users didn’t use the platform eagerly. One of the better things about the company however was their stellar training & user support whom I’ve partnered with and trained with all throughout the project.
My first phase for the project was for me to understand the company’s vision and direction. Since I was acquired there have been a lot of changes both on the management side and product side. A new vision based on research had to be established focusing primarily on our users and our product. This required me to work closely with our CEO & product manager to build a new product vision for the company as well as a detailed roadmap.
We’ve sent out user surveys through site control as well as conducted phone interviews with high-volume users. We also implemented heat mapping and Google analytics on all our platform’s pages to determine user flows, experience maps and pain points.
The phase required both face to face & phone conversations with users to understand their workflows, requirements as well as strategies to help improve other users way of using the platform.
I also went on to conduct further studies using our current competitors to gage what we can learn from their success, work on what we can make better, and innovate on what’s still needed by the users.
I also sat down with our support, training team & account managers to gather customer feedback and insights on common struggles, successes and requests. Since these team are the ones who interact with users on a day to day basis their insights were invaluable and primarily drove the experience that was on the final product.
The Approach: Product Vision + Roadmap
I put together a visual presentation of our research, product vision, roadmaps & action steps that was used by our CEO and was presented to our shareholders.
Sketching & Ideation
I spent a hours & hours sketching & white boarding concepts, processes and user flows. The Product Manager & myself sat down almost daily to bring the ideas we had to our our current product.
Our original plan was to improve on the current platform while building a new platform to migrate our users over that would be ready early next year. However, due to the strength of our new development team we decided to keep the current platform and focus all our resources on strengthening it’s frameworks.
After hours of meetings, countless iterations and mugs of coffee we finally came up with a product direction which we dubbed - "Stateless".
The focus of the Stateless experience was to move users from a “Stated” platform where they had to always switch interfaces, thus breaking the experience, into a one state platform where users can do everything they require all on one page.
We broke down the project scope into 3 sprints spanning 3 months.
Setting the design direction
I decided on using a design language that most of our users are already familiar with: Google’s Material Design.
We had to incorporate these language first on our web platform then started building towards a mobile responsive experience (more on this later)
Custom stylesheets for modals, buttons, tables etc., improved our design implementation both for myself and the developers
Iconography upgrade, I wanted to have consistent language for our product icons as well as using Google’s system icons for often used buttons.
Page by Page UI change
These are quick interface upgrades that I mocked up to show a more structured design language with a cleaner interface.
LAYING OUT A STORY: The Lead Management Page
The Platform’s Lead Management page is where our users spend almost 90% of their time. I wanted to create an experience that allows the user to fully customize how they use the system but at the same time have an available template that tells a story.
The Challenge v.2.0
I was challenge by the product manager to make sense of the data that we produce and lay it out on a table where it allows the user to gather information about their lead as quick as possible, understand what they've done with the client in the past, what they need to do next and have the tools to do it immediately.
Here's a sample of what the current platform used to have:
Here's the list of all the data that needed to be profiled, organized and laid out:
The Challenge v.2.1: "How do we search for all of these?"
The ability to search both easily and in advance form was crucial for lead management for users. Using the current platform we redesigned the way users search for clients using an "auto fill search bar" similar to Google's smart search feature.
We then moved on to creating an advanced filter system that allowed the user to customize their search and save it as a custom filter that they use and duplicate later on.
After the web platform was finalized I started working on making it mobile responsive. This was originally NOT in the product roadmap but upon further discussion with our front end developer and with the current framework that we have used it was totally possible to bring the platform (or at least parts of it) on a mobile device. This was a big bonus that we knew our user would really love and appreciate since majority of them are always on the go and have access to their smartphones.
I carefully crafted which parts of the complex platform we were to focus on as well as which ones to hide.
Detailed Design: Introducing Stateless
LET'S WORK TOGETHER!
If you'd like to talk about a project you want help with or need an advice about product design, just drop me a message at firstname.lastname@example.org I'm currently AVAILABLE for any design projects, designs consultation or website design.