Madison Green

UX/UI Designer

The Real Estate Company

Fostering Trust Through Transparency

Overview

The home-buying process suffers greatly from a lack of transparency. The Real Estate Company aims to combat this in the form of a transformative web-based real estate project management platform. This innovation bridges information gaps between agents, vendors, and buyers, allotting more informed decisions for buyers and higher trust overall.

Client Needs

TRC approached us during their product beta stage with a request to improve their customer-facing website. They wanted a redesign and multiple feature additions for the residential buyer side of the site to enhance the user interface and establish a delightful user experience. They desired a website that was both visually appealing and functional.

The Solution

As the lead product designer, I managed a team of four UX and interface designers to establish an MVP for the residential consumer-facing side of this startup client’s product. I collaborated closely with TRC’s software engineers and stakeholders, identifying opportunities for refinement and establishing design standards to set their brand up for success.

Role

Product Designer and team lead on a team of five, including:

4 product designers
1 PM

Scope

Duration: 6 Weeks

Industry: Real Estate (B2B2C)

Process

Discovery

Ideation

Design

Dev Handoff

Reflection

Tools

Figma

Slack

Zoom

Jira

Otter.ai

01. Discovery

Product Walkthrough

The project kicked off with a walkthrough of the client's existing assets. The existing product mockup was very low fidelity, but the client's initial concepts seemed clear. We established that the transaction flows would need to be redesigned, and the scheduler portal, dashboard, and landing pages would all be new features. Our PM established a timeline, and I got to work in Jira delegating tasks.

Competitive Analysis

I wanted to understand the landscape for similar B2B/B2B2C products in the real estate sector. TRC was starting with very minimal assets; I wanted to identify what their competitors' go-to-market messaging was like, what the UI trends were for the industry, and—most importantly—I aimed to identify opportunities for bridging any gaps in the market by outlining competitor strengths and weaknesses.

We largely noted that most of the competitor sites featured a smooth onboarding process, simple navigation, and rigid privacy standards. The end user focus differed from website to website though the target user was notably rarely multiple personas like the buyer, seller, and real estate vendors, whereas TRC aimed to target all three persona types.

02. Ideation

User Stories (V1) & Future Roadblocks Ahead

I'll spoil the project's primary pain point(s) here. The stakeholder and lead developer overseeing this project shifted their goals quite a bit throughout, leading to multiple design sprints to clarify and simplify both the UX and UI elements of the product. With that in mind, we utilized user stories to map out the desired functionality at the project's onset. At this point, I took ownership "Scheduler" portion of the design.

Sitemap (V1)

Despite the TRC team having a beta version of the website, we were essentially designing from the ground up. There were multiple feature additions, and the existing screens needed to be redesigned. We developed a sitemap to gain a more holistic, comprehensive overview of the entire site. This changed as the project's priorities shifted, but largely informed the foundation of the design even as it changed.

User Flows (V1)

At the outset, our scheduler aimed to be a comprehensive calendar and appointment portal, responding to client needs by enabling users to:

Personalize availability settings
Seamlessly sync with Google Calendar
Effortlessly create and manage appointments

The core concept centered around empowering users with tailored availability settings and easy access to crucial data—vendor lists, tasks, and upcoming events—all seamlessly integrated within the scheduler interface.

We wanted seamless knowledge sharing from the consumer to the vendor team, so everyone was aligned on availability and where the consumer was in their purchasing process.

Our working file

Wireframes

Based on client feedback, I wanted to ensure that the flow of the design allowed for the complexity of the processes to feel simple. For the scheduler, I integrated the following components into the wireframe:

An intuitive calendar view
Streamlined Google account syncing
Widgets in the calendar side panel, offering swift access to key features (vendors, upcoming events, tasks, etc.) as envisioned in the initial flows
Availability settings, complete with features to navigate scheduling conflicts.

03. Design

UI Inspiration

I began the UI stage by finding inspiration for my portion of the product. Bouncing off the competitors used in our competitor analysis, I searched sites like Mobbin to gain insight into common colors, button sizing, spacing, etc. featured in similar existing products. We wanted the product to align with TRC's brand identity (cool, fresh, and powerful) while also keeping an air of intuitiveness for the user.

Style Guide (V1)

We began the design phase by transforming our wireframe style elements into a functional style guide. The fonts were already decided by the client, though I ensured they were highly legible for accessibility reasons before moving forward with them.

The client requested colors that resembled the "Lebron OG South Beaches" shoes and a recent Ferrari model. Prioritizing accessibility, our team collaborated to make sure each of the requested hues passed contrast. The primary goal was to create a design that enhanced the TRC brand while still being visually appealing and satisfying WCAG criterion.

Bump in the Road & Style Guide (V2)

Shortly after establishing the first iteration of the style guide, I met with the TRC developer and primary stakeholder to discuss the design of the high-fidelity mockups. They requested that we focus primarily on the MVP and dial back complex elements in the design. As a result, I streamlined the design of the scheduler flow and cut down on intricate elements in other team members' flows.

We only retained complex content in the dashboard, which I also took ownership of at this stage. Additionally, I worked with the client to remediate and design a color scheme that followed standardized design principles for color, specifically 60-30-10, while still incorporating the unique TRC brand. Ultimately, these adjustments helped us focus on delivering a high-quality MVP and positioned us well for any future design iterations.

User Experience V2

We went into our first high-fidelity sprint, essentially starting over from a design perspective. Due to time constraints in the project roadmap, we did not have the luxury of extending our deadline for additional wireframing. However, we did have enough flexibility to focus on tweaking our user flows and sitemap. I led the team in this revision sprint, and the resulting adjustments, along with the style guide we developed, gave us a solid foundation for more efficient and effective design work moving forward.

I left this sprint with the following user stories, sitemap, and user flows:

Updated the user stories to be more concise
Revised sitemap with less layers of functionality overall
Revised User Flows for the scheduler. Events are now requests & the availability no longer prioritizes Google calendar sync. This is now a goal for MVP 2.

Mid Fidelity

With the newly whittled-down scope, I focused solely on two flows:

The Scheduling Request flow
The Availability Setting flow

The goal of the flow was to connect the backend side of the app where the real estate agent and vendors will live, to the front end where the user will be. The user sets their availability to block time in the internal calendar of the web application. The vendor or agent can then request a time for an appointment via a scheduling ticket that they send to the user. The user can then approve or reject the ticket and request a new time. I kept the card styling for the scheduling tickets, due to the modularity and flexibility of the element, and initially had the flows intertwined into one screen.

High Fidelity (V2) — The End, for now.

I had a standing meeting with the primary stakeholder, and he asked for the ticketing functionality to be fleshed out more in a visual sense, but simplified functionality-wise. Throughout our third sprint, I collaborated extensively with their team's developer to ensure a product that was both effective for the end user goals and feasible from a coding perspective. The end product was an ideal blend of delightful, intuitive user experience and pleasant visual design, all while being doable for their dev.

Availability Setting Flow ↓

I prioritized creating more visual hierarchy within the availability flow. I added strokes around each day of the week. I also added a short description blurb to reduce the need for a landing page or additional "help" content, making it easier for users to understand and interact with the feature on initial use.

Scheduling Ticket Flow ↓

I prioritized providing more clarity and intuitiveness in the scheduling ticket flow. By leveraging the adaptable and versatile nature of card design, I was able to create a flow that was easy to navigate and only two simple steps for the user, reducing clicks and tying in the stakeholders desired functionality of the tickets.

04. Dev Handoff

Annotations

I provided the developer with detailed annotations, so I could ensure that design decisions, specifications, and requirements were communicated effectively. Developer annotations have helped me streamline the design-to-development process before, and given the amount of back and forth, ensuring that the developer had all of the information they needed to accurately implement my designs gave me peace of mind.

05. Reflection

Teamwork

This project was one of the most intensive things I've worked on as a designer to date. It was my first time having frequent client feedback that required complete revisions of content already made and agreed upon.

For what was technically a redesign, it was very involved and lots of changes were made before we hit the finish line. This project involved us as a team constantly evolving with the product through its many iterations, and keeping the project agile really pushed me as a leader.

Leadership

As the lead designer, I made it a priority to maximize efficient communication to successfully divide and conquer the workload while keeping our collaboration focused on the impact of the product and less on individual desires.

I sought to go beyond merely finishing the product; I wanted to enhance the intended functionality to ensure that users have a seamless, intuitive experience that was empathetic to their needs and the best possible product we could make within our scope. The goal for me was to have happy users that flowed through this highly complex process in a delightfully simple way.

Takeaways

This project provided me with valuable insights into handling complex stakeholder needs and the value of collaborating with developers early to ensure the success and ease of use of a design.

Overall, this project allowed me to refine my skills and underscored the importance of collaboration and flexibility.

My awesome design team ~

My goodbye to the team :')