Portfolio Explorer
A web-based 3D mapping app to drive smart urban design and interactive project delivery.
My Role
UX Designer
Duration
12 Weeks
Tools
Figma, Mapbox, Rhino 3D, Illustrator
Team
Digital Innovation Lab, Perkins & Will
Context
📋 Overview
Perkins & Will, a leading global architectural design firm, features a diverse portfolio of international projects and clients. Established in 2017, its Digital Innovation Lab functions as a startup lab within the broader Architecture, Engineering, and Construction (AEC) firm. The lab is dedicated to developing innovative digital tools that optimize design workflows and elevate client engagement, with a particular emphasis on geospatial applications and spatial intelligence solutions.
👩💻 Stakeholders
As the sole designer on a dynamic six-person team, I was responsible for all UX/UI design aspects, collaborating closely with product managers and developers on a daily basis. I reported directly to the global digital practice leader of the Dar Group (parent company of Perkins & Will). This high-profile project was also commissioned by urban design leaders across multiple offices.
Problem
⚡️ The Challenge
How might we create a streamlined platform that integrates data insights directly into geospatial contexts, enabling collaborative workflows between planners, designers and clients?
Fragmented data-driven design process
The current challenge involves a fragmented, data-driven workflow where planners and designers work in parallel but not collaboratively. Data insights generated by planners must be manually incorporated into geospatial contexts by designers. Additionally, while powerful tools exist to optimize this process, they are often expensive and require expert knowledge to operate effectively, making them inaccessible for many projects with limited budgets.
Design Process
🧑🏻🤝🧑🏿 Define User Groups, Needs and Workflows
Administrators: Architects, Planners, Designers
Viewers: Project clients, City officials, Local residents
For Admins, their primary goals are to intuitively create project-specific data visualizations and spatial analyses and simplify complex workflows. For Viewers, their needs focus on quickly understanding specific spatial contexts and easily sharing their feedback.
📚 User Research & Usability Study
In addition to daily stand-ups with the product team to discuss design progress, I held bi-weekly meetings with urban design principals from the Boston and Atlanta offices. These sessions allowed us to track progress, integrate new requests, and customize solutions to meet specific client needs.
For certain features, I conducted moderated A/B testing to identify the preferred design options. Following these tests, I synthesized the results and presented them to the product team, facilitating solidified design choices. These finalized designs were then handed over to the developers for implementation. This thorough process not only refined my design skills but also bolstered my strategic thinking and communication abilities, positioning me to lead and innovate effectively in high-pressure situations.
DESIGN
Layout
Admin’s interface layout
Viewer’s interface layout
From user research, I discovered that Admins, who are design professionals familiar with 2D and 3D editing applications, benefit from a familiar interface layout. To facilitate an easy transition, I designed our interface to reflect these known elements.
On the other hand, our Viewers vary widely in age and digital experience. To accommodate their needs, especially for those using tablets, I implemented a simplified navigation bar with larger buttons at the bottom of the screen, making it more intuitive for them to navigate.
DESIGN
Panel Structure
Geospatial data visualization in our app leverages information from three distinct data sources, typically involving numerous buildings and a complex array of data layers for urban design projects. Our primary challenge was to design a data panel that simplifies the way users understand, manipulate, and visually style these layers for 3D visualization.
To address this, I developed three design concepts: Hierarchical Structure, Flat Structure with Tooltip, and Flat Structure with Toggle. Each design was evaluated through A/B testing conducted with four urban planning and design professionals. These 30-minute usability testing sessions focused on assessing the practicality and user-friendliness of each option.
In finalizing the panel, we prioritized visual clarity in the layer components by employing distinctive colors and custom icons. This approach categorizes layers effectively, making it easier for users to quickly identify and interact with the data necessary for their projects.
DESIGN
UI Components
I also collaborated with the development team to enhance our design system, initiating a UI components library in Storybook for our geospatial products. This approach prevents repetitive work and simplifies maintenance. Starting with the Ant Design system, I adapted its look and functionality to fit our product identity, adjusted components to meet specific needs, and added annotations to clarify behaviors, error cases, and design changes, streamlining the development process.
DESIGN
Prototype
Immediate Data Import
Import data directly from the internal project library.
Intuitive Spatial Data Visualization and Analytics
Effortlessly analyze and visualize spatial data.
Seamless Project Sharing
Share projects with clients smoothly and efficiently.
Viewing Experience
Access and interact with the project from any browser for optimal user convenience.
IMPLEMENTATION
Final Product
Outcome
🤝Project Accelerator
The application significantly boosted the Boston urban design team's success, helping them win two projects in four months and generating $650k in revenue. Clients were particularly impressed with the interactive design reports provided through the app.
During quarterly presentations to the digital solution lead, the application garnered interest from Dar Group leadership in developing practice-specific modules. As a result, several modules are now roadmapped for future development, including those focused on campus planning, healthcare projects, and asset management.
