COntactAboutWOrksIntro
UX Design

Real Estate Content Management Platform

Below are a series of UX projects conducted for the content management system (CMS) of a website builder and marketing tool for a digital marketing real-estate company. This website builder and marketing tool was specifically designed to fulfill the needs of real estate agents and their brokerages. From housing marketing material to enabling agents to build their own content, this platform allows clients to utilize a variety of real-estate themed tools.
Timeline:
Sept. 2021 - May 2022
See Live Project

Background

I was brought onto a product team for the purposes of building and updating the aforementioned content management system as well as additional features of the entire company product. My role was to design intuitive workflows that matched the needs of the company’s client-base. Since the previous content management system was built over an extended period of time at intermittent intervals, the product was due for an upgrade. All of the mini projects below were part of this initiative to enhance the existing system’s CMS. Each project varies in size, specification, and length of time; however, all were designed with the purpose of making real estate agents’ lives easier by adapting to their needs in the current market. 

‍

Form Editor Redesign

At the time of this project, the CMS was at the beginning of undergoing its massive renovation. One area in particular that required UX direction was the platform's form editor. While it looked good visually, my biggest concern was that it was too inconsistent with the other CMS editors. The biggest inconsistency was the process of adding fields to a form. 

The problems with this were:

  • Users would have to hover over negative space between existing fields in order to activate the + field modal. 
  • The hover state of the + field modal  was visually jarring as users mouse over existing fields
  • The + field modal constrained  adding fields to only above or below existing fields before being able to move them laterally
Form Editor: Previous Design Installment

‍

Form Editor: Redesign

‍

In order to create a more seamless experience, I reintroduced the toolbar to the right-hand side of the editor. In addition to maintaining consistency with the other page editors, this shift also enabled me to magnify the field options for better optics. I also incorporated blue hover states to indicate lateral movement so that users can add multiple fields to the same level.

See In Figma

‍

Page Editor Solution

Because the CMS heavily revolved around adding new content in the form of pages, it was imperative to ensure that the process in place was not only intuitive, but logical and consistent with other principal flows. Adding a Page guided users through the process of choosing a template, creating a page, editing page settings, and finally publishing a page. However, the previous design installment displayed friction while creating a page by requiring users to toggle between a two-pronged sidebar. This setup separated page layouts into one tab and blocks into another. The Layouts tab housed the ability to change individual Block style and show or hide components within those Blocks. The Blocks tab enabled users to edit specific components within Block styles such as media, accent text, heading color, font size, etc. 

‍

Two- Pronged Side Navigation

‍

The issue with this structure is that it forces users to have to navigate back and forth between tabs in order to be able to edit elements within a Block. It also prevents users from being able to edit Layout settings while customizing Block information. As a way to avoid this click-barrier, I designed a one-tab solution to take its place.

Side Navigation Solution

‍

The design below merges both tabs into one main toolbar. This consolidation allows users to edit Block style and its objects in one place. The show/hide toggle for each object is replaced with a dropdown menu that allows for full customization and still maintains the ability to show or hide each individual object. Additionally, when a user has selected an object to edit, a hover screen populates over the selected object area in the actual page as a visual guide. 

See In Figma

‍

Landing Pages

My next mini project focuses on the use of landing pages. For context, part of the larger company product includes the ability to generate landing page links, also known as magic pages, for any page within the platform. This aspect of the product allows users to drive traffic to a landing page with only a few clicks. Because this feature had been in place for so long, the product team agreed that it would be beneficial to assess the feature and probe for any friction, pain points, or new problem areas. 

As the team UX designer, I was responsible for conducting research and understanding the current use cases. Because landing pages are a type of analytical tool, I drafted an interview guide that focused on two parts: the how, why, and when clients use landing pages, and what type of data they are looking to track. I then set up virtual interviews with multiple clients. 

The following are some of the core questions I asked during the interviews:

  • How often do you create landing pages a month?
  • Can you tell me about the last one you created? 
  • What application did you use to create it? Was it through this platform or a different one?
  • Can you tell me about your experience using it? 
  • How long did it take you to create your page? 
  • And the last time you created a landing page, did you require registration?
  • Do you have a preference on requiring registration or not? Can you tell me why? 
  • If  you do require registration, do you like to use your own form or the presets that are already in place?
  •  What's the number one metric you'd use to determine how well a landing page performs?
  • Are there other metrics that you use? How do you use them?
  • Can you tell me  the last time you checked your landing page analytics? 
  • How did you use these takeaways or insights?

‍

Magic Page User Flow

‍

What I discovered was that clients were using landing pages for an unintended use case. In summary, most agents use landing pages as a marketing tool for listings. However, what I did not expect was for so many agents to use landing pages as a sign-in for open house registration. Rather than provide a card or physical piece of paper, I found that it is common for agents to require prospective buyers to register on their landing page so that they are signed up for email updates and also linked to the open house they visited.

In regard to landing page metrics, I found that most agents do not spend a lot of time tracking the data linked to their pages. It became clear that most of them are not only too busy with other parts of their work, but have more success using other strategies than data analysis to support their business.

As such, it only made sense to create a flow that catered to this use case. In addition to the existing process of generating a page with a few clicks, I designed an option for agents to be able to customize their landing pages.

See In Figma

‍

Launching the New CMS

Before launching the new CMS, we needed to test it from a usability standpoint. Our goals for implementing this improved version were:

Usability

Ensure that the new CMS sets clients up for success by being easy to use, intuitive, and help them achieve their goals.

Flow

Implement the most effective and efficient design solutions for our users while creating a bug-free platform.

Experience

Launch a system that elevates the experience of users' existing work flows while providing resources for new ones.

‍

Conducting Usability Tests

To follow suit with one of the company’s primary initiatives of helping clients attract more listings, this usability test honed in on three key flows:

  • Creating Pages
  • Creating Listings
  • Creating Blog Posts

These three workflows accounted for the most substantial aspects of the CMS and were likely to be used the most. In order to test these key flows, users were asked to complete 47 tasks that were divided into five sections:

  • Editing Account settings
  • Creating a Page 
  • Creating one of each type of Listing 
  • Creating a Success Story
  • Creating a Blog post 

‍

Analyzing the data 

Each task was timed and any task number where users experienced friction was recorded as a UX design problem (UDP) with its corresponding task number.

‍

Each task with more than two occurrences was recorded as a UDP.

These tasks caused the most friction and established patterns as universal UX issues within the CMS.

Problematic UDPs

‍

‍

Problematic Areas

Below are a few examples of UDPs, or friction areas, that occurred during several usability tests.

Task

After creating a page, add a Hero section, a CTA section, and a FAQ section.

Problem

Users frequently found and added sections out of order. This is a minor issue, however the hierarchy of sections within Add Section should closely resemble that of the construction of a page. (I.E. Hero at the top, Overview, Text with Image, etc.) Similarly, Listing Hero not only confused users but should be a subcategory within Hero.

Solution

Reorder sections within Add Section and keep the language consistent.

User struggles to find FAQ block during task

‍

Task

Now add three repeater items to the FAQ section.

Problem

Users do not understand what a repeater item is and are unsure of its functionality. Another issue with adding multiple items is that the user may not be able to visually see the item being added if there are already multiple existing items. This causes users to question whether or not they were successful.

Solution

Replace technical language with user-friendly terminology or change structure of how users add bulleted items.

User struggles to add/change repeater items

‍

Task

Now create a new coming soon listing without giving away the address.

Problem

Users immediately navigated and clicked on subcategories below listing status rather than + New Listing in the upper-right hand corner.

Solution

Maintain consistency within page layouts, specifically within the header, so that users understand where to go when they need to create a new listing.

User doesn't navigate immediately to + New Listing

Areas for Improvement

Recording these areas of friction enabled me to identify patterns within user behavior and also map out areas for improvement. The main takeaways we needed to improve upon were:

Memorability

Users need to be able to navigate through the system more effectively and efficiently and can do so by relying on a consistent design framework.

Error Prevention and Recognition

Ensure that our system prevents users from navigating through the "wrong" flows and guides them accordingly.

System Language

Make sure that design features use clear and concise language that is consistent throughout the platform.

‍

The Addition of New Features 

Once the tests had been conducted, we deployed  the new CMS with a few select clients. This way we would be able to better control for any potential issues and also evaluate how the product performed outside of a test environment. While the overall product showed massive advancement, the ability to work closely with our user base shed insight into how we could better improve some of our features. 

‍

Agent Profile Pages

The first feature implemented was the ability for agents to create personal profile pages for both themselves and their team members. The previous CMS gave users the ability to customize their personal details in Account Settings; however, this information was in no way connected to pages within their site. As a result, I was tasked with creating personalized profile pages that clients could display anywhere on their site. Since profiles already lived within Account Settings, I created a subcategory to house the additional flow.

See In Figma

‍

Agent Profile Pages

‍

Manual Listings

Lastly, in launching our new platform we discovered a special use case that agents sometimes experience when creating a new listing. Most of the time, a property that comes onto the market is registered within a local MLS (multiple listings service) which is linked within the company’s CMS. However, on occasion, an agent will want to list a property that is coming soon or not yet reflected within the system. For these instances, it is important that agents have a way to do this. The following flows are variations of an existing listing flow and were A/B/C tested to determine which should be implemented within the CMS.

‍

A/B/C Testing

The three flows vary in their level of step-by-step guidance for users. Typically when a user creates a listing that is registered within the MLS, the property information automatically populates in their respective fields, making it easier for the user to customize other parts of the listing page. However in the absence of this, we needed to test the level of step-by-step guidance users deemed appropriate. 

Option A utilizes a complete step-by-step approach to create a manual listing. Each piece of information is acquired in a subsequent fashion until the user completes the process and is shown their page.

Option A: Manual Listing

‍

Option B guides users through a step-by-step sequence until they arrive at Add Sections, where they customize their page layout. Once the user has chosen their sections, their listing is created and they are able to modify or edit their page’s elements directly. 

Option B: Manual Listing

‍

Option C only prompts users to input an address before directly kicking them into the page editor. Once in the editor, the user has free range to edit their page directly. 

Option C: Manual Listing

‍

The main distinction between these three flows is when the user reaches the page editor. Option A employs a thorough approach before creating a listing while Option C allows the user to edit their information directly within the page editor. 

After conducting the A/B/C testing, Option B was identified as the most popular flow. Users preferred a happy-medium between thorough step-by-step instructions and minimal guidance. 

See In Figma
Back to Portfolio

More Works

View Work
Real Estate Content Management Platform
UX Design
View Work
Splitzees
UX Design
IntroWorksAboutContact
Follow
Powered by Webflow