Brokermint — Structuring a Scalable SaaS Platform Through UX and Design System Optimization

Explore how our UI/UX design transformed Brokermint's real estate platform, from systematizing components to enhancing user flows, contributing to its growth and integration into Inside Real Estate's BoldTrail ecosystem.

About

Brokermint is a comprehensive real estate back-office platform designed for agencies across the United States.

The solution streamlines agent workflows by integrating transaction management, reporting, accounting, and e-sign capabilities into one cohesive system. Our UI/UX approach focused on enhancing efficiency, clarity, and data accessibility for B2B SaaS users.

Key Facts

A snapshot of our long-term collaboration and its impact on Brokermint's platform evolution.

5 Years +

Collaboration began in 2017. Over the years, we have contributed to multiple design and UX improvements.

20+ Modules

Ten new modules were designed, validated, and launched based on user's demand.

Design System

The design system was organised and made consistent. This ensured scalability and ease of future updates.

Recognition

In 2024, Brokermint was rebranded (as BoldTrail BackOffice) as part of Inside Real Estate’s BoldTrail portfolio, joining legacy products like BoomTown, kvCORE, etc.

Challenges

The platform lacked a consistent visual and interaction framework, leading to fragmented UI patterns and reduced scalability across modules.

Design files and component libraries were not systematized, making collaboration and iteration across teams time-consuming and error-prone.

The growing user base required the creation of new, user-driven modules while simultaneously improving and maintaining existing platform components.

Results

From elegant design to measurable growth — results that speak for themselves.

Unified Design System Established

A scalable design system was created based on the existing platform structure. Visual consistency was achieved through optimized typography and a streamlined color palette — reducing color usage by 35% and standardizing text styles to around 12 core variants for clarity and maintainability.

Component Library Development

Built a flexible library of reusable UI components, covering both standard HTML elements and complex, domain-specific components tailored to the platform’s real estate workflows.

Ongoing UX Research and Product Growth

Collaborated closely with the founder and user community to translate business requirements into intuitive user experiences. Over five years of continuous improvement, the platform evolved into a mature, high-performing product with strong adoption and positive user feedback.

First step

How did we achieve a consistent design system across Brokermint?

Brokermint’s platform was built on Bootstrap but had multiple deviations from the framework, resulting in inconsistent components and a fragmented visual hierarchy. Fonts, colors, and UI elements lacked structure, and the brand risked losing consistency across the platform.

We started by auditing all platform colors, organizing them into a table, and identifying near-duplicate shades. Similar grays and redundant colors were consolidated into a unified palette, reducing the total number of colors to around 30. All colors were validated for accessibility, contrast, and readability, ensuring a universal system suitable for Brokermint’s white-label setup.

A similar process was applied to typography. We analyzed all existing fonts, merged similar styles, and established a clear hierarchy to improve readability and maintain a consistent UI. The final system reduced font variations to 15 styles across the platform, supporting both clarity and scalability.

Second step

How did we build and organize reusable UI components for scalability?

We systematized all basic components in Figma, creating a clear structure for future design and development needs. This allowed seamless collaboration with the development team, ensuring a consistent component system on the platform.

All basic components were designed with scalability in mind. Features such as slots for extra icons, mobile-responsive sizes, and alternative variations enabled a flexible system that supports platform expansion with a minimal number of core components.

More complex components and UI elements were also reorganized and rebuilt in both the design files and the platform. Consistent patterns were applied for paddings, spacing, font sizes, colors, and nested components, improving visual harmony and usability.

A clear and structured component system is crucial for future growth, allowing teams to reuse designs, code, and user behavior patterns to create new features efficiently, consistently, and cleanly.

Third step

How did we use UX research to validate and improve the platform experience?

We conducted UX research through multiple channels to gather actionable insights. Feedback was collected from a Facebook community group, allowing us to identify pain points and form hypotheses for platform improvements. Direct communication with stakeholders and major customers further helped us understand user needs, business logic, and prioritize features that would add the most value.

Using this knowledge, we designed user flows, interactive prototypes, and low-fidelity mockups. Ideas were then validated with target users and stakeholders to ensure usability and alignment with business goals. Once validated, these concepts were implemented as polished UI interfaces, leveraging the newly established design system and reusable component library.

Fourth step

How did we design, test, and launch new modules effectively?

Each module on Brokermint tells its own story, but all share the same focus on thoroughness and dedication from the team. The process included creating clickable demo prototypes, detailed documentation, and collaborative sessions via Zoom to align on functionality and design.

Every development phase was followed by Design QA and usability testing to ensure no small detail reached the end user unchecked.

Even after launch, we continued to engage with platform users through the Facebook community group and the platform’s help center. As design partners, we ensured that every module remained consistent with the Figma design system, maintaining visual and functional integrity across the platform.

Fifth step

How do we ensure continuous improvements and long-term platform optimization?

Our work on Brokermint goes beyond initial launch; we continuously aim to enhance the platform, even for features that already meet high standards. While some production phases operate under tight deadlines, quality is never compromised.

Our optimization process includes ongoing systematization of newly created complex components, ensuring they remain scalable and consistent with the overall design system. Some modules require entirely new components, which are carefully designed, tested, and integrated.

Over five years of collaboration, we have developed numerous modules for Brokermint, each benefiting from this iterative, quality-focused approach.

Modules created

A selection of key modules designed and launched as part of Brokermint's platform evolution.

Data

Transaction reports

Enables users to manage extensive transaction data and extract key metrics. Features include flexible filters, customizable data displays, search and sort options, the ability to add custom fields, and saving views as personalized reports. This module allows agents to quickly generate actionable insights from complex datasets.

Finance

Accounting

Brokermint’s built-in accounting system replaces third-party solutions like QuickBooks and Xero, supporting the full real estate back-office workflow. Key features include charts of accounts, account ledgers, and automated transaction and commission calculations, providing agents and agencies with a seamless and reliable financial management tool.

Form Editor

Documents eSign

A powerful solution that enables seamless e-signature functionality within Brokermint. Users can create or upload documents, assign fields, set up complex markups, send documents for signatures in a defined order, track progress, and securely store all transaction documentation in one central location.

File Storage

Documents Library

A cloud-based file management system designed for real estate back-office needs. With a user-friendly, Finder-like interface, users can manage transaction documents, preview and edit files online, securely store them, and share with counterparties efficiently.

Conclusion

Long-term collaboration and continuous platform evolution.

Over five years of collaboration, our team delivered more than 15 unique functionalities for Brokermint, supporting its growth and evolution. While the product’s success was driven by bold ideas and business strategy, our UI/UX design work — from establishing a unified design system to creating scalable components and improving user flows — helped ensure a consistent, intuitive, and efficient platform experience. Brokermint was acquired by Inside Real Estate in 2023 and now operates under the BoldTrail portfolio, demonstrating how thoughtful design can complement product innovation and accelerate adoption.

"When we started collaborating in 2017, our platform was growing rapidly, but our design structure wasn’t keeping up."
We lacked a unified system, and every update added complexity. The team helped us bring order to that chaos — organizing a scalable design system, consolidating our components, and introducing visual consistency across the entire product. What impressed us most was their ability to translate real user feedback into meaningful UX improvements. Over the years, this partnership shaped Brokermint into a much more cohesive and intuitive platform. Their approach wasn’t just about design — it was about creating clarity and long-term value for our users.”
Yurii Storozhenko
CEO & Co-Founder of Brokermint

Frequently Asked Questions

Answers to common questions about our UI/UX approach in SaaS real estate back office platforms.

A unified design system ensures visual and functional consistency across Brokermint, allowing designers and developers to reuse components, speed up module creation, and reduce errors. This leads to faster development cycles and a more intuitive UI/UX for real estate agents and brokers.

Centralizing reusable UI components in Figma and on the platform helps maintain consistent branding, reduces redundant work, and allows rapid expansion of new modules. Brokermint’s flexible component system supports scalability while keeping interfaces clean and user-friendly.

By gathering feedback from users, stakeholders, and the community, Brokermint identified pain points and opportunities for improvement. Research-driven design ensured that new features aligned with user needs and business goals, improving usability and adoption.

Clickable demos and low-fidelity prototypes allowed Brokermint’s team to test ideas early with users and stakeholders. This reduced the risk of errors, refined workflows, and ensured that final UI interfaces were both functional and visually consistent.

Creating scalable modules, such as transaction reports, accounting, and e-signature tools, allows Brokermint to quickly expand functionality. Each module is built with consistent UI patterns and tested for usability, ensuring smooth integration into the platform.

Even after launch, ongoing systematization, usability testing, and user feedback help Brokermint evolve. Continuous improvement ensures that new components and modules remain consistent with the design system, keeping the platform efficient and intuitive for users.

While business strategy and product features drive growth, thoughtful UI/UX design ensures the platform is intuitive, efficient, and visually cohesive. For Brokermint, structured design systems, scalable components, and user-focused workflows contributed to strong adoption and long-term platform evolution.

READY TO ROCK?

Fill the form

Obligation-free contact form. We’re easy to reach and ready to get started whenever you are.

DON’T WAIT — ACT!

Our Contacts

Not a fan of forms? Visit our contacts page and choose the best way to reach us — or simply email us directly!