A  shared web platform that helps us gain quick data-driven insights among space design

From Whom?

Designer:
- Balancing many pieces of information: humans are rather bad at processing high-dimensional data. With the increased ease of computational power, it seems both intuitive and imperative to build tools to help us navigate the complex data landscape of the design process.

- Duplicate work for multiple solution: The workflow often requires listing a large number of solutions to guess the user's preferences and letting the customer choose from them, which is a tedious and time-consuming process.
‍
Client:
- Evidence-Based Design Design Making: Design decisions for design projects often require customer participation, but due to the lack of objective data support, customers are often at a loss.

My Contribution

Software Development and Feature Enhacenment

Implement implementation of new features according to requirements to optimize the rendering of 3D assets on the web, user upload, and viewing of solution user experience

User Experience Design of New Features

Design software interface and overall workflow and user experience of new features

Developer Guideline Making

Create developer UML archives to visualize the current software architecture and solutions for future maintenance and development by other programmers

View the Application
Souce Code unavailable according to NDA
Key Features.
Scout, developed by KPF Urban Interface, is a shared web platform that helps our global firm gain quick, data-driven insights, present to clients, and engage with the community.
One.
Data Visualization under 3D Content
Clinet A seeks data that is intuitive and spatially integrated, moving beyond flat data tables. This approach enables quicker, more intuitive insights, making the data easier to understand and act upon.
Two.
Adjustable Parameter Panel
Once Client A communicates their priority indicators to the designer, the designer uploads the solution to Scout. The client can then adjust various design parameters to explore alternative solutions and gain deeper insights.
Three.
3D Solutions File JSON File Import
After receiving the initial feedback from Client A, the designer B refined the design and uploaded a 3D configuration file with multiple options to Scout.
Four.
Solution Comparison
Customer D thinks that the result of this generation is not as satisfactory as the last one, and hopes to go back to the last generation result to continue the discussion with the designer.
Five.
Solution Filtering
Customer D thinks that the result of this generation is not as satisfactory as the last one, and hopes to go back to the last generation result to continue the discussion with the designer.
Six.
Solution Collection and Re-Loading
Customer D thinks that the result of this generation is not as satisfactory as the last one, and hopes to go back to the last generation result to continue the discussion with the designer.
Key Features Enhacement
Enhaced the user experience by adding features
Faciliate to certain project
New Feature One
■
How can we enable users to efficiently access and view solutions from a vast pool of options?
Scout's data integrates with 3D objects, requiring seamless synchronization between the 3D view and the filtering process, rendering traditional data tables unsuitable. Additionally, users frequently need to compare multiple solutions, so the filtering system must support a range of filters across multiple indicators
  • Implement all previous template features to future of housing development project in Hawai’i
  • Reduc the 3D Object mesh grid to enhace the performance and render geometry color with different surfaces
  • Adding addtional metric - Views to Ocean
  • Add transit point and clustering point in 3D scene
Transit and cluster point mark
  • Transit points are visualized to remind users where the volume changes begin.
  • Visualize the clustering center area of ​​the block
  • Display the count of filter solutions
3D object grid mesh rendering with data
  • Downsampling and interpolating the mesh grid JSON file of labeled data to reduce the number of meshes required for rendering data colors
  • The palette is read and mapped from the setting json file
Intuitive solution filter
New Feature Two
■
How can we enable users to efficiently access and view solutions from a vast pool of options?
Scout's data integrates with 3D objects, requiring seamless synchronization between the 3D view and the filtering process, rendering traditional data tables unsuitable. Additionally, users frequently need to compare multiple solutions, so the filtering system must support a range of filters across multiple indicators
  • Interative Data Visualization Chart - Ensure that users can focus on a specific solution without losing sight of its context within the overall solution set
  • Multiple models 3D preview - Real-time visualization of 3D solutions that satisfy multiple indicators, while also addressing users' additional requirements such as aesthetics.
Interactive parallel coordinates chart filtering
  • Parallel coordinates chart to visualize indicators of solutions
  • Drag to set up mutiple filter
  • Grey line - Filtered solution, Red Line: Target solutions.
  • Hover in model to view indicator of this solution
  • Display the count of filter solutions
Mutiple Target solutions 3D model previews
  • Display mutiple target solution 3D model in a grid gallery view
  • Click icon button to load a full screen 3D view
3D Model Checker
New Feature Three
■
How to prevent model structure errors to ensure correct display in the official project page？
In daily use, users sometimes find that the format of the exported JSON file is wrong, causing Scout to refuse to render. They need to debug in GH, but this is not easy. At the same time, they find that sometimes a large number of model files will cause web pages to freeze. These problems must be solved before creating the final shareable web link.
  • Mesh Visual Checking - allows users to upload a JSON file representing a 3D asset (even if it is broken) to check if the resulting mesh is good
  • Rendering Load Check - Check in real time whether the browser environment will cause a bad user experience due to the large amount of 3D models that need to be rendered
Model Checker (Internal Use case)
  • Allow users to upload JSON files and visualize whether the model has broken faces, incorrect representations, etc.
  • User can check the JSON files of the model and site separately to facilitate problem attribution
Uploading Content Experince Optimization
New Feature Four
■
How to integrate the uploaded models and analysis process into the daily work of designer
Even with the web upload function, it is still unrealistic to force designers to learn Grasshopper and export model configurations, and the intervention of computational designers is still needed. So we need to integrate these functions in the Rhino plug-in to cater to the designer's daily workflow.
  • Store GH analysis scripts in the cloud for local Rhino plug-in calls. Computational designers only need to maintain the GH scripts in the cloud
  • The NodeJS server stores the GH analysis script collection and acts as a Mid Level Server between the local Rhino plugin client and Rhino Compute Windows to process requests and return results
KPF Compute Rhino Plugin - Analysis Template Selection
  • Automatically obtain the latest analysis templates for designers to choose
  • Automatically synchronize analysis folders in S3 to store computational analysis results for 3D data visualization in the Scout Web app
KPF Compute Rhino Plugin - Unobstructed View Analysis
  • Desginer selected geometry to run the analysis with certain template(standard layers etc)
  • The analysis resuts can be mapping into Rhino Model with gradient color
Scout + KPF Compute Integration
  • NodeJS acts as a transit station between the local plug-in and the Rhino compute server, and also stores the collection of mappings between Grasshopper scripts and analysis templates in order to send requests so that Compute can run the correct GH Definition
Scout Node JS Server Restful API
  • Analysis Template(GH Scripts) stored in Node JS server
  • Four main tables in SQL Database
  • POST and GET Method to handle requesting analysis with certain template, getting analysis results, send analysis requesting to Rhino Compute Server, getting analysis results from Rhino Computer Server
Achievement
This tool was utilized to workwith Sidewalk Labs, the urban-innovation organization within Google’s parent company Alphabet, and Montreal-based experiential designers Daily tous les jours, to create an interactive prototype for community engagement: the Plan Your Neighbourhood exhibit launched as part of 307, the experimental workspace at Sidewalk Toronto.
One.
Natural language to spatial relationship Bubble diagrams Generation using LLM
Client’s needs are often descriptive, and it is difficult for them to convert such needs into relevance to the room layout. The basic knowledge of the big prediction model can initially achieve this and convert it into a bubble diagram, which is conducive to the initial consensus between customers and designers.
View the Application
click to check diagram
Three.
User Profile Settings
Client A thinks he has more specific requirements for the number and details of different rooms. He defines his user profile by setting their key requirements, thus generating bubble diagrams more accurately.
Key Solution.
The NeuralRoom, a 3D web app that Utilizing natural language processing (NLP) to and Graph Neural Network(GNN) to To improve the efficiency of 3D scene design iteration and discussion between designers and non-professional customers by Integration Large Language Model and graph theory