SupportRE helps real estate agents with their marketing tactics and analytics. They provide a whole host of tools and support systems that help real estate agents monitor, track, and deploy marketing systems according to their needs and preferences. Though they offer incredible services, the landing page doesn’t accurately depict what they can offer to customers. I find that successful landing pages have key elements that allow for higher conversion rates. I worked within a team to help redesign a landing page that converts.


My Role

I was the UI designer within a small team with 2 engineers and 1 content strategist. As the only designer in a really small team, I had to make sure that the process did not only result in a visually pleasing product, but into something that makes sense and provides customers a means to quick conversion. I led the design and research phase, and presented major deliverables in March 2017.

Defining the Problem

From home inspections to signing the deal, real estate agents have a lot of ground to cover in their day-to-day schedules. To do it themselves, while growing their business, can become strugglesome. Marketing and managing content is just another thing that real estate agents have to be extremely mindful of. SupportRE provides their solutions to this problem and wants to give agents a look into what they can offer through their premier services with the goal of partnering with these agents and grow businesses. What this ultimately means it that the way SupportRE presents itself should reflect that intent. The landing page is often the front face of presentation for potential agents, especially for agents who haven’t heard of SupportRE through recommendations or word-of-mouth. The ultimate problem is that SupportRE’s landing page does not optimize the content in their landing page to enhance the conversion rate.

TMI or In Need of a Makeover?

One of the glaring problems that I saw in their old landing page was an imbalance of the amount of content and how it was organized. A structure that presented facts is completely different from a structure that uses facts to tell a story. I acknowledged that there is a problem in content organization, and I spearheaded a means to “restructure” content and “reframe” the facade.

Important Discoveries

I studied and researched patterns/trends and consumer preferences to understand what needs to be implemented into the landing page design. This framed the planning and ideation phases. So after having gone through and designed instrumental user personas, I listed out the key trends that would improve the landing page.

SupportRE User Personas

Very Important Attributes

Being able to present what SupportRE specializes in, cares for, and accomplishes is essential to helping consumers, the real estate agents, understand what SupportRE does. This should include a list of programs, benefits, and a sense of understanding (or empathy), which explains to the visitor what SupportRE brings to the table and why. By painting the full picture, visiting agents can have a greater understanding of the possibilities of working with SupportRE.

Tidy Visuals

Though this is self-explanatory, having tidy visuals, a clean layout, makes everything easier for the consumer. Being able to lessen distractions and create a clear path will strengthen the chances of gaining the consumer's attention. Even with a clean layout, the landing page cannot just be a pretty gallery, but a well-composed story that presents SupportRE in the best light.

Call to Actions

With all that being said, there must be a reaction or a call to action, rather, after being presented with all this information. The current land page already implements and tries to execute this key attribute. However, I found that there are some ways to highlight, accentuate, and clarify the call to actions and what SupportRE is offering.

Where We Started

When we first began analyzing the current page, the team was notified that it had recently gone through a UI "facelift," but none of the content structure had changed. What this helped us realize is that the page needed more than just UI help, it really needed a "restructuring" in terms of content and storytelling. 


As a team, we envisioned that SupportRE's landing page would tell a story in a way that it paints a picture of what a partnership will look like. The breakdown of the landing page should logically bring a potential client through segments of persuasion that should climax with making a clear decision.


1. Increase average page visitation time and conversion rate.

2. Establish greater sense of client empathy.

3. Clearly expose what SupportRE is capable of and illustrate how an actual partnership will benefit the client. 


Wireframe of Existing Landing Page

First Take

Taking a first crack at creating a wireframe, I added extra emphasis on making sure potential clients knew exactly what SupportRE is bringing to the table. After running into feedback that pertained to not really knowing what SupportRE specifically does, I made big moves to accentuate the features and services section. 

For instance, I included the company video pitch to the hero. With this move, I envisioned that the clients can immediately find out what SupportRE does through an eye-catching and interactive medium. Secondly, I expanded the services to list out each feature with an image and description. My mindset was to make the services as clear and understandable as possible to ensure that the client has no misunderstanding of how SupportRE can expand their business. 

Another decision I made was to exclude statistics that bolster credibility. Instead, I grouped client reviews and past clients together. I came to making this decision because previous interviews with clients revealed that they would like to see and envision personal success based around the successes of others. 


Wireframe of First Draft

Second Pitch

After running tests with other team members and potential visitors, I saw many flaws in the wireframe of the first draft. The second wireframe is what the team is currently sticking with.

One major alarm from the first draft was removing the statistics that establishes credibility. I realized that it should be paired with the section that also establishes empathy. This section explains how and why the company started and clarifies their purpose: to assist and partner with existing businesses. By pairing this section with statistics that establishes credibility, clients will better understand that SupportRE is actually making big efforts and succeeding in accomplishing their mission statement.

The next changes I have made were to shorten the services and programs section, while highlighting a section that paints a better picture what partnership would look like. I made sure that the story section would go before the services section. This allows the client to envision what success could possibly look like, and be followed up with seeing the exact services that SupportRE can offer to get them to sucess.

Furthermore, I made sure to not make any changes to having a double-layered section of creating social proof. By showing reviews and lists of businesses that found success, clients feel confident that they can be a part of that success story. Through understanding and cultivating that confidence, we placed the major CTA right after to convey the fact that these clients can get started right away. 


High-Fidelity Mockup


Results and Reflection

With 4 months of drafting, 3 months of testing and iterating, the team came to this high-fidelity mockup of the final result. We found the experience to be rewarding and humbling. I found that I did not know as much as I thought I knew about designing an effective landing page. I quickly found that my assumptions were wrong, but I also learned how to bounce back and reframe assumptions, apply new findings, and, most importantly, listen.

Measuring Feedback

We used kissmetric's resources as a way to evaluate the our new design's page visit count, visit duration, and conversion rates. 


1. Respect the process. No need to rush in and think that impacts will be made within the first cycle.

2. Always try to validate assumptions. Waltzing into the process with blind assumptions will lead to unexpected results.

3. List out your goals with specificity. It helps to set concrete goals without any lingering sense of ambiguity. This helps to make the path as clear as possible.

Thank you for reading!