Masonry Design System

---

Context Setting

Our primary users were cross-functional product teams — designers, engineers, product managers, and stakeholders who needed a reliable, scalable foundation for building consistent, high-quality user experiences. Their work spanned multiple products, platforms, and user touchpoints.

---

Broken Foundations

At Condo Control, the expectations for product quality are uniquely high—and understandably so. The platform serves condo residents, board members, property managers, and security staff across hundreds of communities. These users depend on the platform daily, whether it's accessing building notices, booking amenities, managing payments, or coordinating maintenance.

When I joined, the product was in a precarious state. UI fragmentation had reached critical levels, with multiple conflicting styles and duplicated components scattered throughout the codebase. The reliance on outdated technologies like ASP.NET combined with layers of Bootstrap components with conflicting versioning, resulted in fragile, unresponsive layouts. Mobile experiences regularly broke or were flat out unusable, frustrating users, and piling on support teams with avoidable complaints.

And candidly, I felt the same frustration. As both a designer and engineer, I could see how disconnected foundations eroded confidence—not just for users, but across every internal team.

This UI sprawl had tangible impacts across our organization:

• Engineering: Spent disproportionate time patching UI inconsistencies instead of building valuable features
• Design: Struggled with a lack of clear standards and endless design debates
• Sales: Faced constant embarrassment as demos regularly failed during critical client presentations
• Marketing: Forced to stage idealized, fake screenshots to mask inconsistencies
• Customers: Frequently reported confusion and frustration with the disjointed experience

The final straw was the company-wide rebrand, which heightened expectations without addressing the foundational UI chaos.

I knew patching symptoms wouldn't solve this. We had to rebuild from the ground up—but first, I needed teams aligned around the real pain points.

---

Immersive Discovery

Before touching Figma or code, I prioritized understanding the pain points deeply and from multiple perspectives. I conducted comprehensive stakeholder interviews and audits to uncover the real gaps:

What We Heard

• Sales: "We can't confidently show clients the live product without embarrassing failures."
• Marketing: "Our brand refresh needs to actually reflect in the product, not just our materials."
• Engineers: "There's no common source of truth—we're wasting valuable cycles reinventing the same components."
• PMs: "Speed is vital, but not at the cost of constantly fixing UI issues that should be solved once."
• Leadership: "The product experience must reflect the new brand clearly and reliably across all touchpoints."

Product Audit

To systematically identify every UI inconsistency and technical debt, I conducted a thorough audit across all product touchpoints. This audit revealed the true scope of our challenges and provided the foundation for Masonry's strategic priorities:

Key Audit Findings:

This research crystallized my focus: we needed a shared, scalable design foundation that would restore trust, speed, and reliability across all teams.

With that clarity, I started building and testing where it mattered most.

---

Building Masonry

Inspired by the simple strength of actual masonry, I envisioned a design system that would quietly hold the product together, providing stability without imposing rigidity.

Visual Design Foundations

Technical Implementation

Of course, even the best system only works if teams adopt it so we made it our goal to embed Masonry where it mattered most.

---

Adoption & Rollout

Masonry's adoption hinged on demonstrating tangible value in high-visibility, high-impact product areas first:

By partnering closely with engineers, product managers, QA, and branding teams, I addressed real-world challenges directly within their workflows. Regularly showcasing dramatic "before and after" improvements proved critical in earning trust and buy-in across the organization.

---

Measurable Outcomes

The effectiveness of Masonry became clear through measurable outcomes that directly addressed our original challenges:

---

What We Learned

Where We're Headed

The first version of Masonry closed obvious gaps and established a solid foundation. But plenty of work is still ahead — the harder stuff, the pieces that take longer to get right:

• Advanced Component Patterns: Building more sophisticated components for complex user interactions.
• Performance Optimization: Ensuring the system scales without impacting application performance.
• Accessibility Enhancements: Deepening accessibility compliance across all components.
• Analytics Integration: Systematically analyzing component usage to identify optimization opportunities.

We're keeping the scope focused and practical. Just what helps teams build better products faster, with confidence in design quality and consistency.

---

Reflections

The true measure of Masonry's success lies not in its visibility but in how effortlessly it fades into the background, allowing teams to concentrate on meaningful, innovative work rather than persistent firefighting.

Teams now:

• Prototype and design confidently, knowing production code aligns precisely with their vision.
• Ship faster, with reduced stress and improved efficiency.
• Collaborate seamlessly, with clearly defined, practical standards.

Ultimately, Masonry demonstrates that a great design system empowers people, aligns teams, and profoundly transforms both product quality and organizational culture.