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
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. 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 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.
Our team identified several issues that hindered user engagement, particularly around visual hierarchy.
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.
Collaborate: Users can invite and add other team members, facilitating teamwork and task management.
Filtering: Enterprise users have the ability to filter and sort users and grant varying levels of access within the platform.
ACCESSIBILITY
Designing for Greater 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.