/ USACE Project Plans
A platform for urban project planning and work orders within a sector of the US Army Corps of Engineering (USACE).
OverviewContext
The USACE execute various construction projects that require urban planning prior to implementation. Their teams were using a range of various urban planning tools, data sheets, and long continuous email chains to document and communicate on projects. USACE wanted a more efficient way to visualize and share their urban project plans and work orders. This write up leaves out the design progress for work orders and focuses on the design process for urban project planning teams.
Impact
I worked as the sole UXUI Designer to create an interface that structured the product’s contents, functionality, and communication. Feedback that I received post launch was that the product’s design improved project visibility, reduced redundancies, and enhanced collaboration among projects and team members.
Platform Desktop web application
Product User interface design
Client geoConvergence, USACE
Contributions design systems / dev handoff / hi-fi mockups / information architecture / interaction design / iterative design / product flow / requirements gathering / user flows / user journey mapping / user personas / wireframing
Features + Highlights
The layout
This platform consists of two main features: an interactive map viewport and a side panel for controls and project navigation. This system gives the planning process a visual context between geographical data and informational inputs.
Side panel variants
Although the screen is primarily composed of the GUI map, the content and actions for the plans live in the left-hand panel. Variations of the panel provide users with a list view of planning projects as well as draw tools for placing items onto the map.
Design System Utilization
I built the interface’s components by referencing the Calcite design system. This approach allowed for rapid mockup creation while ensuring consistency and efficiency for the product’s quick launch.
Plan Visibility / Collaboration
The ability to share plans directly in the web application streamlines the review and viewing process among users. Access on a central platform ensures everyone is contributing with the most up-to-date version.
The ChallengeUrban planning projects involve the management of a high volume of data, extensive cross-team communication, and the utilization of diverse technological tools.
Team members were overwhelmed by scattered documentation across multiple systems and often struggled to understand specific details. This this hindered their ability to contribute effectively and ultimately lead to a lack of transparency and timeline delays.
Approach + User EmpathyWho’s involved? What’s their relationship with the data?
Initially, it was hard to visualize how actions and information should be accessed because dependencies were unclear and tough to follow. To gain some clarity, I decided to visualize communication during planning. Mapping the process and involvement revealed where visibility gaps could occur and where data should be accessed.
(a)
(b)
(a) team interactions for urban planning and (b) phases of information dependencies.Key DiscoveriesInsightsFeatures have “attributes” which are specification inputs needed to understand these features in detail
“Features” live in a plan and are engineering details like roads, objects, and landmarks
Construction crew aren't involved in planning but they need to reference directions for work orders and project managers don’t have a lot of visibility in this phase
The planning process is complex and involves a lot of dependencies and communication from multiple stakeholders
Planning Projects are hard to comprehend without a visual guide
Project owners want to access plans quickly with an option to dive deeper without disrupting data inputs.
Pain PointsData lives on multiple platforms which limits visibility and makes it difficult to get a comprehensive overview
Updates on new information are sometimes buried in mass communication threads or possibly not passed to everyone involved
Tracking dependencies and plan statuses can be confusing which causes delays in the over all planning timeline
Independent platforms are causing teams to be locked in silos, making it harder for stakeholders to contribute
Current mapping tool doesn't provide enough complexity to help depict relationships between data and landscape
Design RequirementsProposed solution
Address user pain points by creating a centralized place for data and project management. Platform should visualize data and integrate important aspects from essential tools.
-
Provide visibility and access related to a plan’s details to necessary stakeholders. Construction phases should live separately.
Have data live on a singular platform for universal updates on progress and consistent reporting for all stakeholders involved.
Enable sharing capability among stakeholders for increased project transparency.
Organize plan viewing to be efficient and searchable to reduce redundancies in the planning workflow.
-
Incorporate GIS software to enable more complex visualizations of spatial analysis and geographical mapping of project data.
Provide drawing tool functions to users for creating and editing plan’s visual details.
-
The platform will house essential data within a project plan such as a map visuals and various data inputs.
Projects should include a comprehensive overview of plans, as well as granular data related to features and attributes within a plan.
Plan information should be editable.
-
Design the web application to be familiar to the industry for easier user adoption.
Use a design system for visual consistency that also allows faster developer implementation.
Make sure the UI’s look and function is similar and compatible for the work orders and construction phase for smooth transitioning between the platforms as well as reduce dev implementation.
Design ProcessMapping the road ahead
I created this user flow diagram to visualize the journey of creating and editing a plan. Throughout my design process, it served as a guide to ensure I was creating sound progressions between screens and actions.
A user flow through the platform, beginning with plan creation and/or editing an existing plan.Visualizing flow and functionality with wireframes
I went through a process of exploring panel layouts to house plans. My steps involve roughly segmenting out sections and then listing content in those sections for layout exploration. After exploring, I choose one to focus on and add in more details that bring it closer to the real look.
The panel's progression from low to high fidelity mockups.Keeping it short, sweet and scalable
Initial feedback revealed that plans tend to contain numerous features, this would overload the design in an uncollapsed state. And even though they were a core aspect of plans, there was a time and place to reference them. I came up with different iterations on how to access features easily and quickly, to keeping data from being overwhelming.
A few iterations after feedback on the feedback section's scalability.Evolving into dynamic panels
Initial feedback of quick mockups revealed that plans could contain numerous features, that would overload the design in an uncollapsed state. I came up with some iterations on how to access features.
A few iterations after feedback on the feedback section's scalability.Following the panel designs, I implemented the variants within the GUI map layout, and readied the project for hand-off to development.
Screens + Deliverables-
No Active Plans
-
Creating a New Plan
-
Singular Plan View
-
Overview of Plans List
-
Hovering on a Plan
-
Menu Hover on a Plan
-
No Features
-
Creating a Feature
-
Menu Hover in a Feature
-
Expanded Features Overview
-
Attributes Modal within Features
-
Plan Sharing Modal
-
All Panel Variants
-
Components
SummaryMy design process for this platform involved understanding USACE's urban planning initiatives, their planning process, and stakeholder’s contributions. Check-in meetings with the client when I needed additional context in how they worked helped me prioritize user goals in my design. Clarifying the complexity of communication brought understanding to how users wanted to share information and this helped me create a flow for how data should be accessed by teams.
After the design was approved, I documented and passed my mockups and reference notes to development. I received post launch feedback on the client and user’s satisfaction with the application.
-
Starting out on this project, I didn’t have much background knowledge on USACE’s operations. Researching urban planning to familiarizing myself with aspects of the process helped me create an application met user needs.
Time was a big constraint, as my client had to deliver this product quickly and I had limited access to the direct users involved. To adjust for my gaps in the industry, I initiated check-in meetings with the client to clarify any gaps and essential details.
After launch I received positive feedback from geoConvergence and USACE on this design and we used a similar framework to create an additional platform for processing and documenting another channel of input (work orders). Urban project plans and work orders lived on separate platforms but were designed with a similar layout to keep the interface familiar for users who accessed both platforms as well as reduce development lead time.