My Process and Key Learnings in Designing Save On Brokerage Website from 0 to 1
INTRODUCTION TO PROJECT
Save On Brokerage is an innovative platform that simplifies the home buying and selling process by eliminating high commission fees, offering a more cost-effective solution for users. It connects buyers and sellers through an interactive trading event, providing professional advice, comprehensive services, and tools to help sellers maximize their profit while ensuring a smooth and affordable transaction.
The goal of the Save On Brokerage platform is to create a seamless, user-friendly experience for buyers and sellers in the real estate market, focusing on simplifying the home transaction process while keeping it cost-effective. The project aims to empower users with intuitive tools that enhance decision-making, maximize profit, and ensure smooth interactions throughout their buying or selling journey.
Key Focus Areas:
User-Centric Design: The platform is built with the user in mind, providing a simple, intuitive interface that guides users effortlessly through each step of the buying or selling process. Clear navigation, easy-to-understand tools, and helpful prompts ensure users can make confident decisions without feeling overwhelmed.
Interactive Trading Event: The unique interactive trading event feature was designed to engage users in real-time, allowing buyers and sellers to connect directly in a dynamic and effective manner. This approach enhances user engagement while promoting efficient transactions and maximizing profits.
Responsive and Accessible UI: The platform's design ensures that users can access the services seamlessly across all devices, from desktops to mobile. A responsive design was implemented to provide optimal viewing experiences, ensuring that users can interact with the platform anytime, anywhere, with ease.
To manage the complexity of the components and keep the focus on the MVP, I adopted an iterative design and development process. Consequently, I divided the project and structured it across six distinct phases.
DISCOVERY & USER RESEARCH
What did the discovery phase include?
1. Overview of the Discovery Phase
1. Business & Stakeholder Alignment:
• Conducting in-depth stakeholder interviews with the client (the real estate broker) to understand their vision, key performance indicators (KPIs), pain points in the traditional brokerage model, and long-term goals.
• Clarifying what “affordable” means for the platform and discussing metrics such as user acquisition, conversion rate (property deals made), and customer satisfaction.
2. Market & Competitive Analysis:
• Reviewing the current landscape of real estate platforms (such as Zillow, NoBroker, and Redfin) to identify gaps and opportunities.
• Analyzing trends in commission-free real estate transactions and understanding how similar platforms address transparency, trust, and ease-of-use.
3. User Research Objectives:
• Defining target user groups—primarily buyers, sellers, and platform administrators—and establishing the primary user journeys.
• Establishing research questions to validate assumptions, such as “What are the frustrations with traditional brokerage fees?” and “Which features would encourage a buyer or seller to trust a commission-free platform?”
2.Conducted User Research
To truly understand user needs and validate market assumptions, a combination of qualitative and quantitative research methods was employed:
STEPPING INTO THEIR SHOES
Leveraging my research, I identified two distinct user persona that capture the unique challenges faced by the real estate market. This approach allowed me to detail the specific problems each segment encounters and foster a deeper understanding and empathy, ensuring addresses their needs effectively.
NARROWED DOWN TO ONE DIRECTION
STRATEGY & IDEATION
With insights in place, we focused on key challenges and used a “How can we” approach to brainstorm solutions that enhance the Save on Brokerage experience. Our goal is to simplify transactions, build trust, and maximize user value.
We map out the typical steps that users take from initial research to finalizing a deal to identify touchpoints and opportunities for improvement. For instance:
INFORMATION ARCHITECTURE & WIREFRAMING
To ensure a seamless and intuitive user experience, we structured the navigation to prioritize clarity, accessibility, and ease of use.
LOW-FI WIREFRAME
With fundamental concepts we sketched out some low fi-wireframes that helped us identify key elements.
Converted Low to Mid Fidelity
UI DESIGN & PROTOTYPING
Creating Style Guide & Design System
After discussing with the stakeholders and analyzing competitor platforms, I settled on a color scheme and typography that would evoke trust and reliability.
I created a frequently used components that includes Accordions Header Menu, Footer, Button.
Crafted High-Fidelity Prototypes
I mapped out and designed the essential screens in high-fidelity.
Using Figma, I transformed these high-fidelity screens into interactive prototypes.
FINAL UI VISUAL DESIGN
TESTING AND ITERATION
After reviewing and getting the user feedback I changed few elements and color schemes for home page.
To assess the impact of my design improvements, I conducted several rounds of user testing and iterated based on the qualitative insights gathered. I refined the home page by standardizing the color scheme to ensure consistency with the brand identity and removed unwanted, distracting hues. Additionally, I revamped the navigation menu to enhance clarity and ease of use while eliminating unnecessary information that previously cluttered the interface. These targeted changes resulted in a cleaner, more intuitive user experience that aligned with both user expectations and best design practices.
HANDOFF TO DEVELOPMENT
I polished all UI screens and compiled a comprehensive style guide that includes typography, color codes, iconography rules, and component behaviors. During the session, I walked developers through the interactive prototypes, answered questions, and discussed potential challenges. This proactive communication helped bridge any gaps between design and implementation, ensuring a smooth transition to the development phase.
KEY LEARNINGS & TAKEAWAY
Throughout this process, I learned the importance of designing components correctly from the beginning rather than retrofitting them later this approach not only minimizes extensive revisions but also streamlines the overall workflow. I also discovered the immense value of engaging continuously with stakeholders to provide optimal solutions rather than simply adhering to their initial ideas. For instance, when the client proposed using a hamburger menu to reveal additional pages that had not yet been defined, I suggested removing it to maintain a clean, focused interface, and I recommended avoiding distracting elements like gradient backgrounds that didn’t align with the brand’s identity. Overall, this experience reinforced that consistent stakeholder communication and proactive feedback exchange are key to achieving a user-centric and efficient design.
