Codon

Enhancing data-driven workflows for healthcare planners

Product Design

•

UX Research

ROLE

Product & UX Designer

TIMELINE

4 weeks

TEAM

Matthew Goldsberry, Ian Thomas, Jiayue Ni, Patrick Rodriguez

TECH STACK

React.js, TypeScript, CSS, Python, Figma

CONTEXT

Planning and facade design workflows often separate project data across several tools.

This fragmentation creates repetitive coordination work and makes it difficult to keep graphical elements synchronized with changing project information. As projects evolve, designers need a more connected and flexible way to manage drawings and their underlying data.

GOALS

Design intuitive tools for creating and editing architectural drawings.
Connect canvas objects to structured, importable project data.
Maintain a consistent document model, interface, and collaboration workflow.
Enable reviewable AI-assisted drawing and dataset updates.

OUTCOMES

Built a comprehensive drawing application with layer, toolbar, and properties controls.
Established a normalized dataset and canonical document contracts.
Integrated advanced data functions such as imports, formulas, metadata, graphic-object attribution, and external software integration.
Implemented validated, approval-based agent changes using chained tool executions.

CASE STUDIES

We investigated several existing web applications for architectural design and planning to understand their features and structure. After a comprehensive review process, we identified successful features of each application, which we could integrate into our functionality.

UX RESEARCH

In addition to case studies, we conducted user research with multiple in-house designers to gather an understanding of their day-to-day workflows, practices, and software familiarity.

Planner 1

Planner 2

Facade

The common steps and functions became the foundation of what we built.

CONCEPT

Codon is a comprehensive drawing application that connects architectural graphics with structured, normalized datasets.

It provides a unified environment for creating drawings, managing project information, and safely applying data-driven or agent-assisted changes.

The application is a culmination of over a dozen prototypes for planning, facades, geometry engines, and more. Echo ↗ is one of these prototypes.

DESIGN

INFORMATION ARCHITECTURE

We planned out each tool and function of the application and its placement in the application to ensure clarity and intuition, grouping similar actions together.

FEATURE PANEL

TOOLBAR

PROPERTIES PANEL

MINIBAR

CONTEXT TOOLBAR

The feature panel is the primary project-management area, bringing together files, layers, connected data, reusable components, settings, and experimental features. It organizes the information and systems that support the drawing canvas.

USER INTERFACE

Using the case studies and information architecture, we developed an interface that was designed to feel familiar to existing users of CAD/drawing applications and optimized for intuitive use based on user insights.

FEATURES

Homepage with user's projects

Main canvas with layers, toolbars, and global properties

Data tab, with a canonical hybridization of hierarchical and linear data

Assets tab, with pre-loaded libraries from HDR's Bluebeam assets

Object properties panel and contextual toolbar for selected objects

Global settings menu

Split-screen view with multiple canvases/viewports

Embedded agent for automated multi-step project workflows

POSTSCRIPT

Some takeaways from the project:

Designing a complex application required breaking it down into manageable parts. We did many short sprints focusing on specific features to gain a thorough understanding of how to implement them in the final version.
Maintaining a clean data structure was essential. In order for users to be able to understand the core functions and to optimize performance, we ensured that our data model was customized specifically for our users' workflows.
The agentic automation was the final integration, not the first one. Without a comprehensive application and a canonical data format, the agent would not be successful.