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.
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.
%20copy%203.gif)
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.
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.
.gif)
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.
%20copy.gif)
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.
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.
%20copy%202.gif)
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.
Before launching the new CMS, we needed to test it from a usability standpoint. Our goals for implementing this improved version were:
Ensure that the new CMS sets clients up for success by being easy to use, intuitive, and help them achieve their goals.
Implement the most effective and efficient design solutions for our users while creating a bug-free platform.
Launch a system that elevates the experience of users' existing work flows while providing resources for new ones.
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:
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:
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.
Below are a few examples of UDPs, or friction areas, that occurred during several usability tests.
After creating a page, add a Hero section, a CTA section, and a FAQ section.
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.
Reorder sections within Add Section and keep the language consistent.
.gif)
Now add three repeater items to the FAQ section.
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.
Replace technical language with user-friendly terminology or change structure of how users add bulleted items.
.gif)
Now create a new coming soon listing without giving away the address.
Users immediately navigated and clicked on subcategories below listing status rather than + New Listing in the upper-right hand corner.
Maintain consistency within page layouts, specifically within the header, so that users understand where to go when they need to create a new listing.
%20copy.gif)
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:
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.
Ensure that our system prevents users from navigating through the "wrong" flows and guides them accordingly.
Make sure that design features use clear and concise language that is consistent throughout the platform.
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.
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.
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.
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 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 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.
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.
