Goals

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
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:
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. .
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.
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

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.
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
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.