Overview
Property discovery · UX engineering
RUHL ai
From a building address to an informed inquiry.
- My role
- UX design & website development
- Tools
- Wix Studio, Next.js, Supabase, Vercel & Three.js
- Collaboration
- RUHL stakeholders set the revised visual and structural brief; I translated it into design and development.
- AI Involvement
- My process: ChatGPT for coding assistance.
Product brief: proposed AI-assisted building energy design.
My contribution
I designed and developed the landing page, building inquiry and particle interaction, and contributed search-related implementation. The work crossed UX direction, stakeholder-led revision and code.
The Wix archive is an incomplete exploration. Another employee subsequently rebuilt the broader RUHL AI website during my absence; this case study covers my work.
Problem
A building address needed a clear path to action.
The initial goal was to help people discover NYC buildings and access useful property information. The design challenge was keeping that building context intact as they moved toward an inquiry.
- FindIdentify the building
Start with an NYC address.
- UnderstandReview property context
Make the selected record visible.
- ContinueBuild the inquiry
Carry the property into the next step.
- A changing brief
- A new stakeholder direction required substantial redesign and redevelopment.
- Design meets implementation
- Search, forms and a custom WebGL interaction had to fit the website experience.
Decisions
Connect the entry point, the inquiry and the implementation.
The work evolved with the brief. Four decisions show how I moved between UX structure, stakeholder requirements and working code.
01/04Adapt the website direction
Rebuild the entry point around the revised brief.
I revisited the landing page and inquiry flow when the stakeholder introduced a different visual and structural direction. The archive shows the move from a brand-led announcement to a prominent building-address entry.
Earlier exploration
Revised exploration
My responsibility in the change I redesigned and redeveloped the Wix landing page and building inquiry. The revised visual and structural direction came from the stakeholder; it differed from my initial UX recommendation.
02/04Keep property context
Make the building part of the inquiry.
I brought NYC address search into the inquiry form. The recorded design connects a property-detail area, an Add action and an added-properties list so the inquiry can retain the selected building.
- Identify the property
- The recorded detail fields include name, address, BIN, BBL, borough, use type and floor area.
- Keep the next step explicit
- Add the property to the inquiry; a separate address field supports other cities.
The archive documents the interface; end-to-end submission and property-data accuracy remain unverified.
03/04Carry context across pages
Carry the selected building into the detailed result.
In my search-related Next.js work, I added public search and preview endpoints and building deep links. A selected building ID connects the compact preview to its detailed result, with explicit loading and not-found states.
Building handoff in the reviewed code
- SearchAddress query
Compact matching records
- PreviewSelected building ID
Defined public fields
- ContinueSame building result
Deep link retains identity
Keep responses focused
The public contract defines compact search and preview fields rather than exposing raw database rows.
Handle incomplete paths
Source tests cover short queries, no results, invalid IDs, unavailable previews and origin checks. Production acceptance results are unavailable.
Implementation evidence My July 2026 commits add the public API, deep-link support and loading feedback. The reviewed search accepts at least three characters and returns up to eight results.
04/04Build a focused brand interaction
Let the particles move while the words stay recognizable.
I developed the “AI - Enhanced MEP” particle treatment and embedded the separately hosted Three.js demo in a Wix HTML component. Pointer motion influences the particles; shape constraints keep the text recognizable.
AI - Enhanced MEP
Bind motion to the text
Canvas text is sampled into point positions. A text mask, spring forces and a leash constrain the moving particles around the letter shapes.
Bound the workload
The source caps particle speed and device pixel ratio. These controls limit the workload; no FPS improvement was measured.
Impact
From a changing brief to working design and code.
I completed the assigned website and search-related work. The evidence demonstrates design-to-code delivery and adaptation to a changing brief.
- Website & inquiry
- Landing-page redevelopment and a building inquiry with NYC address search in Wix Studio.
- Search implementation
- Authored public search/preview and deep-link changes, with defined response fields and error handling.
- Interactive detail
- A hosted Three.js particle treatment embedded in the archived prototype and available to explore.
What the evidence establishes
Archived screens document the website explorations; source and commit history support specific search and particle contributions. The Wix prototype remains incomplete, and the later employee rebuild is outside my ownership.
What remains unmeasured
No verified conversion, usability, performance or business-impact metrics are available. Product marketing about AI, compliance or energy savings is not evidence of implemented AI or measured engineering outcomes from this work.
What I learned
Make the relationship between user needs, stakeholder direction and implementation explicit. Working across design and code helped me turn changed requirements into concrete work while keeping decision ownership clear.