Echo

Product Design

Front-End

ROLE

Product & UX Designer

TIMELINE

2 weeks

TEAM

Individual Work

TECH STACK

React.js, Node.js, TypeScript, CSS, Python

CONTEXT

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.

GOALS

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;
Support designer-led decision-making while using automation and AI to assist with repetitive or interpretive tasks.

OUTCOMES

Built a hybrid plan/facade drawing tool with a simple geometry engine;
Incorporated data-driven attribution systems for responsive analysis;
Engineered plan automation and facade section automation workflows using agentic AI.

CONCEPT

Echo is an early-stage architectural drawing environment for rapidly iterating across both plans and facades. It treats them as editable drawings that can carry intelligent layouts, program or assembly data, natural language constraints, dimensional feedback, and exportable project information.

Application architecture concept

UX RESEARCH

Qualitative user experience research was conducted by interviewing healthcare planners and facade designers. This yielded an understanding of existing bottlenecks, pain points, and opportunities for optimization and design acceleration.

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.

The functionality and user interface was preserved between the planning and facade designing workflows as much as possible, so that transitioning between the two felt seamless.

DESIGN

The interface was designed to feel familiar to existing users of CAD/drawing applications.

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 prototype 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.