TwnSqr

Designing a more collaborative real estate platform

TwnSqr is a real estate disposition platform designed for investors to sell properties and connect with other investors across the country. Our project aimed to enhance TwnSqr's user experience by optimizing and refining the platform's user flows. TwnSqr is a new company so there are many avenues that we were able to explore.
Deliverables included: A new design system + shipped and launched prototypes for mobile, tablet, and web.
CONTRIBUTORS
Sean Bossardet
Marcos Heiz
Patrick Zhou
TOOLS
Figma
Miro
MY ROLE
UX Designer
Visual Design
Product Strategy
Information Architecture

Understanding the Product

My team and I began the project by mapping out the information architecture of the TwnSqr application. This allowed us to gain a deeper understanding of the product's infrastructure, features, hierarchy, as well as user experience. This helped us to better identify user chokepoints. Check out the whole map here.

In this section of the map, we noted the different flows and features that affect the user's navigation with sorting through large lists.


UX AUDIT

The Problems

To make the product more user-friendly, we conducted a thorough assessment of its current design. Our audit uncovered several usability issues, which helped us kickstart the process of brainstorming potential solutions.

Our audit thoroughly examined all main screens and touchpoints, where we documented issues, assessed their impact on the user experience, and assigned each an 'impact' rating to prioritize fixes.

One of the key issues we identified with the application was the lack of a clear information hierarchy. Buttons were styled with various colors that had no consistent meaning, making navigation confusing. Typography also lacked a structured hierarchy, and there were inconsistencies in spacing throughout the design. Additionally, there was no unified color system, leading to a disjointed and visually cluttered user experience.

Our team identified several issues that hindered user engagement, particularly around visual hierarchy.

Synthesizing

Key Insights

Users require effective marketing tools to connect with other professionals in the real estate industry to reach more buyers.
Users desire control over their own buyer's list by choosing which parties to list their properties to.
A system is needed for businesses with multiple users to collaborate under an enterprise account.

How might we...

"Create a more efficient real estate platform that enourages our users to be more collaborative? "

Design

Reconsidering UI for a Better User Experiences

After analyzing the inconsistent visual design elements, we identified the absence of a cohesive design system as the root cause. To address this, we developed a comprehensive style guide with reusable components and applied it across the whole application, ensuring a unified visual experience.

New Core Features

Data Organization

We added new interactions and features to help users manage columns and rows, such as the ability to add, edit, and remove users from lists.

Selecting contacts: Users can select multiple contacts simultaneously for efficient categorization.

Creating new lists: Users can create smaller, more focused lists from larger lists.

Enterprise Account

We also introduced a new feature called the Enterprise account, which allows large groups or businesses to manage their accounts under one umbrella.

Further Considerations

Designing for Accessibility and Inclusivity

An example screen showing accessibility standards tests that I ran for the whole application.

A key priority in my design process was to ensure accessibility for all users. One of our major user groups are people in their late fifties, I advocated to make sure that things would be easy to read for them. I applied the Web Content Accessibility Guidelines (WCAG), with particular attention to color contrast ratios, touch target sizes, and screen readability. For color, I chose high-contrast combinations that meet AA and AAA standards, enhancing visibility for users with low vision or color blindness. Touch targets were enlarged and spaced appropriately, minimizing accidental clicks and enhancing usability on touch devices.