Product: RUHL ai
The Beginning - From Idea to Product Direction
The RUHL platform emerged from a simple challenge: helping building owners understand complex sustainability regulations and take informed next steps — bridging regulatory data with RUHL’s practical engineering expertise.
The early concept was simple — a digital space where users could search buildings, understand emissions data, and connect with RUHL’s expertise. Initial work started on Wix to rapidly validate layouts, confirm search functionality and experiment with interaction flows. At this stage, the product was more of a structured prototype than a true platform.
However, as the vision evolved, it became clear that the project needed to grow beyond a static website. The goal shifted toward building a lead-generation and analytics platform capable of interpreting sustainability datasets and supporting future AI-driven insights.
The Problem - Turning Regulation Into Experience
Local Law 97 (LL97), part of NYC’s Climate Mobilization Act, sets emissions and energy compliance standards for buildings. While the data is publicly available, it often stays disconnected from building owners until fines or compliance pressure arise.
The opportunity wasn’t to interpret the data — it was to surface it at the right moment and connect it to clear next steps.
The platform focused on:
Bringing LL97 insights directly into a search-driven experience
Making sustainability status visible and actionable
Capturing structured builder inputs for guided support
Positioning RUHL’s engineering expertise as a proactive path toward compliance and risk reduction
Rather than designing standalone pages, the goal was to create a connected ecosystem that blended discovery, analytics, and onboarding into one guided journey.
Search Functionality
Search functionality for the NYC buildings:
Property data is fetched via API, allowing builders to verify building details before adding them to their profile.
Reports are currently generated through RUHL’s manual expertise, with future versions introducing AI-driven sustainability analysis.
A Turning Point - When the Platform Outgrew Wix
As development progressed, two major constraints emerged:
Leadership identified branding conflicts with competitor color systems, requiring visual direction changes.
Wix limited backend flexibility and long-term scalability.
This became a defining moment for the project. The platform transitioned from Wix into a code-driven environment inside VS Code, allowing deeper control over structure, accessibility, and interaction logic.
What started as a rapid prototype became a product foundation.
Designing From Scratch - A Designer Who Codes
Moving into a custom build meant rethinking the experience from the ground up. The overall site architecture was shaped through ongoing discussions with a stakeholder who proposed core layout directions, while I contributed design refinements where needed and rapidly translated those ideas into working interfaces. The Figma Phase was completely eradicated here to fasten up the process to accommodate the project in fast-pace environment of start-up.
My role focused on bridging product thinking and execution — quickly building front-end flows in VS Code through iterative vibe coding, allowing concepts to move from discussion to implementation without long design handoffs.
Key product areas included:
Search-driven building audit flows
Sustainability report dashboards
Builder intake forms and onboarding
Account systems and profile management
Knowledge sections and business case pages
Rather than treating these as isolated pages, the focus was on building a flexible foundation that could evolve into a future AI-assisted sustainability platform.
The Core Interaction - Search as the Entry Point
The heart of the platform became the building search experience connected to LL97 APIs. Users could search a building and retrieve data on energy usage, emissions, and compliance status.
Rather than presenting raw regulatory data, the interface framed search as a guided first step:
Discover building performance
Understand sustainability metrics (currently manual, later using Ai)
Transition into structured consultation flows (currently manual, later using Ai)
This transformed regulatory complexity into a product experience that felt actionable.
Designing While Building - UX Engineering in Practice
The development process followed an iterative “vibe coding” workflow where some of the design decisions were validated directly in code.
One example was the landing page hero animation. An early version built in Spline required a subscription, which conflicted with project constraints. Instead of removing the effect, I recreated it using a GPT-generated particle animation embedded through an iframe, preserving visual impact while maintaining independence from paid tools.
This pattern repeated across the product — balancing design intent with technical pragmatism.
Accessibility foundations were also implemented during development:
Keyboard-navigable forms
ARIA labeling for non-text controls
Alternative text for visual content
Rather than retrofitting accessibility later, it became part of the design language.
Particle Effect
Try to hover near the text below.
The Most Challenging Area - The Report Experience
The report page represented the most complex intersection of design and engineering.
It required:
Multi-layered sustainability diagrams created with Chart.js
Data-heavy tables structured for analytics workflows
Responsive behavior across desktop, tablet, and mobile screens
While desktop layouts worked smoothly, mobile adaptation revealed the tension between dense data and usable interfaces. This stage reshaped how information hierarchy and responsiveness were approached throughout the product.
What V1 Became
By the end of Version 1, the platform evolved into more than a website.
It became:
A lead-generation system tied to sustainability analytics
A search-driven discovery experience using LL97 data
A scalable front-end foundation ready for future AI integration
Future V2 plans include deeper accessibility improvements, contrast refinements, and advanced AI features to suggest sustainability fixes.
Reflections - Designing at the Intersection of Strategy and Code
This project reshaped my approach to product design. Building directly in the front end blurred the line between concept and implementation, allowing usability decisions to be tested in real time.
Key takeaways:
Strategic product thinking starts with understanding constraints — technical, financial, and organizational.
Accessibility becomes stronger when integrated during development, not layered afterward.
Designing systems, not pages, creates momentum for future innovation.
What began as a rapid Wix prototype ultimately became a foundational product platform — one designed to grow alongside evolving sustainability technologies.
