ECHO
PRODUCT DESIGN
AI
FRONT-END
Two-week prototype, conducted during a summer internship at HDR
Tech stack: React.js, Node.js, Konva, TypeScript, CSS, Python, Vite, VSCode, Agentic AI
Thank you for visiting! This portfolio features immersive desktop layouts. Please view on a laptop or desktop monitor in fullscreen for the best experience.
Scroll to see work
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 23" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 18.5 19 L 37 0" fill="rgba(255, 255, 255, 0)" height="19px" id="ypBAU5_zx" stroke-dasharray="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-width="1.5" stroke="rgb(0, 0, 0)" transform="translate(2 2)" width="37px"/></svg>)
THE BRIEF
Early-stage architectural design often requires designers to move quickly between intuition, geometry, data, constraints, and performance considerations. However, much of this work is typically distributed across separate tools, spreadsheets, manual drafting workflows, and disconnected analysis processes. This can slow down iteration, especially when design decisions need to remain flexible while still responding to technical requirements and project information.
Therefore, the goal of this project was to develop a more integrated design environment that helps designers work fluidly between creative exploration and computational support. The goals of this project were to:
Create a faster and more flexible workflow for early-stage architectural design exploration;
Connect design geometry with project data, constraints, and computational feedback in a more unified environment;
Reduce the amount of manual coordination required between drawings, spreadsheets, and performance-related information;
Support designer-led decision-making while using automation and AI to assist with repetitive or interpretive tasks.
CONCEPT
ECHO is an early-stage architectural drawing environment for rapidly iterating across two design aspects: plans and facades. It treats both plan layouts and facade studies as editable drawings that can carry architectural units, intelligent layouts, program or assembly data, natural language constraints, dimensional feedback, and exportable project information.
As a plan drawing tool, it lets users sketch, edit, and export spatial layouts with program assignments, dimensional controls, adjacency feedback, and constraint-aware placement support.
As a facade drawing tool, it lets users lay out facade sections, assign assembly layers and materials, review performance metrics, and export facade geometry alongside the rest of the project.
The workflow acceleration layer builds on the plan/facade drawing foundation. Local backend routes, layout algorithms, and Anthropic-powered LLM calls help parse constraints, process spreadsheets, generate adjacency intelligence, and propose facade assemblies from external design inputs.
Application architecture concept
UX RESEARCH
The project began through a mostly qualitative user experience research process, where healthcare planners and facade designers were interviewed to gain an understanding of where existing bottlenecks, pain points, and opportunities for optimization and design acceleration lay.
"
As an architect, I want to swap facade materials and generate dashboards so that decisions are backed by quantifiable metrics.
"
As a healthcare planner, I want the system to auto-apply adjacency rules so that I reduce mistakes and design faster.
Based on their responses, a user flow diagram was developed to consolidate their requests into streamlined workflows. The key was to ensure that functionality and UI was preserved between the planning and facade designing workflows as much as possible, so that transitioning between the two felt seamless.
User flow and app capability diagram
USER INTERFACE
Wireframing
FUNCTIONALITY
Explore the difference between plan and facade modes.
Plan
Facade
Explore core features and automations that allow users to have control over object attribution, accelerated planning, and real-time analysis and optimization.
Plan
Facade
Program
Constraints
Prediction
POSTSCRIPT
This project functioned as a quick investigation for a larger-scale integrated planning application. Given this, there was a limited timeframe to produce a conceptual framework around the application and build out a working prototype that incorporated key elements from planning workflows. The prototype received positive feedback from healthcare planners and facade designers, most notably with the real-time data-driven feedback and architectural program integration from Excel.
