karinadesign

UX / UI designer

Clear2Close

An app for residential real estate

Facilitate the transaction from offer accepted to the closing

Background

In a home purchase or sale, the stage between an accepted offer and the closing is very precarious. Emotions run high. Many details and tasks must be agreed upon and completed in a timely manner. The deal can fall apart quickly and unnecessarily. Even a simple miscommunication may mean the loss of the sale.

The stakes:

FOR OWNER: Financial hardship
FOR PURCHASER: The heartbreak of losing the “home of their dreams” or major inconvenience
FOR BROKER: the loss of hard earned commission

Purchasing or selling a home is an intimate experience which triggers primitive feelings. How can we support the parties so that this process becomes less fragile, less stressful and more enjoyable?

My Role: Ideate, UI/UX
Design Tools: Figma and Photoshop

User Map, Site Map, Competitive Audit, Wireframes, Low Fidelity Mockups, UI Design, High Fidelity Mockups and Prototypes

Inspired by my time at COMPASS Real Estate

High Fidelity Prototype

My Design Process

Problem

We are creating a new app to facilitate closing residential real estate deals. We need to find out if the main user experience, collaborating with other parties in the transaction is easy for users to complete.

We will measure effectiveness by the number of long term users and the percentage of deals that close successfully.

Solution

An app for all parties involved in the transaction; purchasers, sellers, attorneys and lenders. The goal is to get everyone on the app together and reach the closing as a team. Streamlining communication and information sharing: culminating in better outcomes and less stress along the way.

Tools

Figma
Adobe Creative Suite

Team

1 UX designer

My Role

UX design
UX research

Timeline

Overall: 8+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks

Understanding the Users & Goals

Goals
Functions
Description
Target Users

Research, interview, brainstorm
I utilized the following methods to begin:

Interviews
User Stories and If/then Statements
Competitive Audit
User Map
Site Map

Interviews

During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. I prepared an interview script with 5 open-ended questions (2 included below), focusing on our target audiences’ values, motivations, and daily routines. In 4 days, I recruited and interviewed 3 users remotely. We referenced the user interview findings throughout the design process.

What were the main insights from the interviews?
How did you use your findings?
I interviewed 3 different Real Estate Brokers.
question 1: "What are the common issues that you encounter between offer accepted and closing - that jeopardize the deal?
question 2: "Would you be interested in using an app like CL2?"
Takeaways:
1. Broker 1: Interested in trying the app but only on desktop. She has trouble seeing on a small screen. There are many others like her. Takeaway: Developing a desktop version would be beneficial for many users especially because the population of users spans many generations. .
2. Broker 2: "I sometimes use the confusion or delays to the benefit of my clients in negotiations but when I am not using that technique, I would use an app like this." Takeaway: give ability of broker to control which parties are invited to participate in app and when.
3. Broker 3: "My mortgage broker tries to get everyone to download" a similar app but "nobody wants to." While studying the app she is referring to I noticed that that it has many different sections and offerings. Even I felt a little overwhelmed when opening it. Maybe others feel the same. Takeaway: As a result of this information, I simplified CL2 app more. I left out some features so that it would be more accessible to agents - especially those that are not savvy with technology.

User Story: Sue

As a busy broker with a family

I want to have an app that will make my job easier

so that I can close deals with less confusion and animosity between the parties

If/Then Statement: Sue

If Sue downloads the CL2 app

then she can organize, navigate and close all deals in a timely and efficient manner while providing an excellent experience for my clients and colleagues

User Research: Competitive Audit Report

I performed a Competitive Audit Report, where I compared the mobile apps that are publicly available for brokers to simplify their workflow.

The 3 Competitors

Some gaps identified include:

No app where all parties to the transaction are invited
Limited accessibility features
When app has too many features - can be confusing to use and drop off rate substantial

Some opportunities identified:

Streamline app
Collaborative culture
Accessibility features
Get both sides of transaction on
Include chat forum to avoid lengthy and confusing email chains

User Map & Site Map

User Map
Site Map

Starting the Design

Wireframes homepage

Wireframes

Using Figma, I translated my first sketches into low-fidelity wireframes.

Keeping in mind the goals which are to reduce stress and confusion and save time along with the interview results [that too much functionality causes users to drop off]: I created a very basic homepage with only four choices and minimal distractions.

I used white space and simple obvious and familiar image patterns (hamburger menu, a cross with four buttons), the app creates an atmosphere of calm collaboration.

I mapped out the flow between the wireframes and then made it into a working prototype.

Wireframes Flow to Wireframes Prototype

Starting the UI design

While I did have multiple iterations of the design, I kept the iterations within certain guidelines.

I chose professional, calming and widely popular color blue.
As much use of icons as possible while labeling icons for accessibiity
High contrast colors checked on WC3 for accessibility standards
Use of white space and familiar screen UI for ease of use and calm atmosphere

Refining the Design

Keeping the goals in mind, I iterated multiple versions.

During the course of building this app, I completed the course How To Design for Accessibility: for UX Designers (WCAG 2.2). I chose to redesign the UI based on what I learned.

UI Iterations. Priorities: ease of use, avoid overwhelm, clear user path, accessibility

Improvements in Accessibility and ease of use: color contrast, icons (size, contrast), white space

Final High Fidelity Iterations

View High Fidelity Prototype

Next Steps

01

Continue refining UI
Add micro animations to engage the user and make functionality more clear

02

Start to build out working app in WebFlow
Broker can decide who from the party to include
Redesign of form fields for deal sheet - less on each screen to improve ease of use

03

Conduct more user testing to identify additional pain points for users

Learnings

While I have many additional ideas for this app, my priority to make it as simple as possible while keeping user goals in mind.

For now I've put aside the ideas for additional games, meditations, sounds and incentives for the sake of simplicity of use. But in next steps are to to build them in slowly over time with Usability Testing.

Thank you for reading my case study!

Want to collaborate? Feel free to contact me!

karina.design.ny@gmail.com

...or let's connect on LinkedIn.