01 / PRODUCT DESIGN
01 / PRODUCT DESIGN
ConstructED
ConstructED
ConstructED
Making complex construction information easier for communities to understand and navigate.
Making complex construction information easier for communities to understand and navigate.
ROLE
ROLE
UX/UI Design
UX/UI Design
TIMELINE
TIMELINE
10 weeks
10 weeks
TOOLS
TOOLS
Figma, Figma Make, ChatGPT, Claude
Figma, Figma Make, ChatGPT, Claude
Status
Status
Interactive prototype
Interactive prototype
02 / CONTEXT
02 / CONTEXT
Understanding the problem space
Understanding the problem space
Construction projects affect communities, but information about locations, timelines, equipment, and activity can be difficult to find and interpret. Residents frequently lack direct visibility into why disruptions happen or what public improvements are coming next.
Construction projects affect communities, but information about locations, timelines, equipment, and activity can be difficult to find and interpret. Residents frequently lack direct visibility into why disruptions happen or what public improvements are coming next.
How might we make construction information easier to discover and understand without overwhelming users?
How might we make construction information easier to discover and understand without overwhelming users?
03 / Design priorities
03 / Design priorities
01
01
LOCATION MATTERS
LOCATION MATTERS
Prioritize nearby projects so people can start with construction relevant to their location.
Prioritize nearby projects so people can start with construction relevant to their location.
02
02
TRANSLATE DATA
TRANSLATE DATA
Use plain-language labels and clear hierarchy to organize project dates, status, and impact.
Use plain-language labels and clear hierarchy to organize project dates, status, and impact.
03
03
CLEAR DISCOVERY
CLEAR DISCOVERY
Connect nearby discovery, maps, project details, and equipment learning through clear navigation.
Connect nearby discovery, maps, project details, and equipment learning through clear navigation.
04 / PRODUCT STRUCTURE
04 / PRODUCT STRUCTURE
Structuring the product experience
Structuring the product experience
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
Core areas
Home | Map | Learn | Kid Zone | Profile
Main project path
Home or Map > Project Details > Timeline or Equipment
Core areas
Home | Map | Learn | Kid Zone | Profile
Main project path
Home or Map > Project Details > Timeline or Equipment
I organized ConstructED around a clear path from discovering nearby construction to understanding individual projects, locations, and educational content.
I organized ConstructED around a clear path from discovering nearby construction to understanding individual projects, locations, and educational content.
05 / DESIGN DECISION
05 / DESIGN DECISION
Making nearby projects the starting point
Making nearby projects the starting point
Problem
Problem
Users struggle to find relevant local projects quickly.
Users struggle to find relevant local projects quickly.
Decision
Decision
Prioritize a location-first home screen with immediate nearby results.
Prioritize a location-first home screen with immediate nearby results.
Rationale
Rationale
Relevance is tied to proximity; users want to see what affects their commute immediately.
Relevance is tied to proximity; users want to see what affects their commute immediately.
Result
Result
The home screen brings nearby projects into the initial view.
The home screen brings nearby projects into the initial view.
06 / DESIGN DECISION
06 / DESIGN DECISION
Turning project data into understandable information
Turning project data into understandable information
Problem
Problem
Technical construction data is dense and hard to read.
Technical construction data is dense and hard to read.
Decision
Decision
Use clear hierarchy, progressive disclosure, and plain language.
Use clear hierarchy, progressive disclosure, and plain language.
Rationale
Rationale
Users should understand the 'why' before diving into the 'how'.
Users should understand the ‘why’ before diving into the ‘how’.
Result
Result
Project details group status, dates, and impact under a clearer hierarchy.
Project details group status, dates, and impact under a clearer hierarchy.
07 / DESIGN DECISION
07 / DESIGN DECISION
Connecting projects to place
Connecting projects to place
Problem
Problem
Users need to see projects in their spatial context.
Users need to see projects in their spatial context.
Decision
Decision
Integrate map views with educational content and equipment details.
Integrate map views with educational content and equipment details.
Rationale
Rationale
Spatial context helps residents understand project scale and impact.
Spatial context helps residents understand project scale and impact.
Result
Result
The Map and Project Details screens connect locations with individual project information.
The Map and Project Details screens connect locations with individual project information.
08 / ACCESSIBILITY
08 / ACCESSIBILITY
Accessibility considerations
Accessibility considerations
READABILITY
READABILITY
The interface uses a clear heading hierarchy, grouped project details, and short labels to organize dense information.
The interface uses a clear heading hierarchy, grouped project details, and short labels to organize dense information.
CONTRAST
CONTRAST
Status badges and selected controls combine color with text labels to communicate their meaning.
Status badges and selected controls combine color with text labels to communicate their meaning.
NAVIGATION
NAVIGATION
Persistent bottom navigation and visible back controls connect the main areas of the prototype.
Persistent bottom navigation and visible back controls connect the main areas of the prototype.
INTERACTION
INTERACTION
Repeated button, card, and tab patterns provide consistent interaction points across the prototype.
Repeated button, card, and tab patterns provide consistent interaction points across the prototype.
ConstructED
Near 90210
2
What's being built
near you
Active projects, road closures, and how construction works — all in one place.
3 Active
2 Upcoming
1 Closure
Happening now
Active near you
Open map
[PROJECT IMAGE: IN PROGRESS]
In Progress
Project 1
Downtown Road Improvement Project
Monterey Rd & 1st St, Your community
Road resurfacing, ADA upgrades, and improved pedestrian crosswalks.
42%
View project details
[PROJECT IMAGE: ACTIVE]
Active
Project 2
Water Main Replacement
Eigleberry St & 5th St
Underground water main and valve replacement along Eigleberry.
28%
Learn
Construction smarts
Explore all
[EXCAVATOR]
Featured Machine
Excavator
Learn how excavators move mountains of dirt with precision.
Explore machine
Kid Zone
Construction Challenge!
Earn points, badges & more.
Alerts
Heads up nearby
View all
Traffic Impact Update
2h ago
Monterey Rd will have single lane closures from 7:00 AM – 4:00 PM this week.
View alert details
1
Home
Map
Learn
Kids
Profile
1
2
ConstructED
SAVED PROJECT UPDATES
Downtown Road Improvement Project
ACTIVE
Overview
Timeline
Equipment
Road resurfacing, structural sidewalk repairs, ADA upgrades, and improved pedestrian high-visibility crosswalks around Monterey.
Key Details
Location
Monterey Rd & 1st St
Start Date
Oct 12, 2025
Est. Completion
Dec 20, 2025
Impact Area
High (Expect Lane Closures)
Monterey Rd Zone
Nearby Alerts (2)
Single Lane Detour
Monterey Rd down to single lane 7am-4pm.
Water Main Shutoff
Scheduled 2-hour pressure drop on Tuesday.
Home
Map
Learn
Kid Zone
Profile
3
4
Home
Home
Map
Map
Learn
Learn
Kid Zone
Kid Zone
Profile
Profile
HOME - WIREFRAME
HOME - WIREFRAME
HOME - HIGH-FIDELITY
HOME - HIGH-FIDELITY
PROJECT DETAIL - HIGH-FIDELITY
PROJECT DETAIL - HIGH-FIDELITY
3
Labeled states
Labeled states
Status and selected controls use text labels and visual styling to distinguish their meaning.
Status and selected controls use text labels and visual styling to distinguish their meaning.
4
Consistent controls
Consistent controls
Buttons and tabs use repeated shapes and placement across the interface.
Buttons and tabs use repeated shapes and placement across the interface.
1
Readable hierarchy
Readable hierarchy
Large display title paired with smaller supporting copy establishes a clear visual order. Users scan the bold heading first, then read the descriptor.
Large display title paired with smaller supporting copy establishes a clear visual order. Users scan the bold heading first, then read the descriptor.
2
Section grouping
Section grouping
Labeled header ("Active near you") + contained card list creates a scannable content block. Consistent spacing separates this group from adjacent sections.
Labeled header (“Active near you”) + contained card list creates a scannable content block. Consistent spacing separates this group from adjacent sections.
ConstructED
Near 90210
2
What's being built
near you
Active projects, road closures, and how construction works — all in one place.
3 Active
2 Upcoming
1 Closure
Happening now
Active near you
Open map
[PROJECT IMAGE: IN PROGRESS]
In Progress
Project 1
Downtown Road Improvement Project
Monterey Rd & 1st St, Your community
Road resurfacing, ADA upgrades, and improved pedestrian crosswalks.
42%
View project details
[PROJECT IMAGE: ACTIVE]
Active
Project 2
Water Main Replacement
Eigleberry St & 5th St
Underground water main and valve replacement along Eigleberry.
28%
Learn
Construction smarts
Explore all
[EXCAVATOR]
Featured Machine
Excavator
Learn how excavators move mountains of dirt with precision.
Explore machine
Kid Zone
Construction Challenge!
Earn points, badges & more.
Alerts
Heads up nearby
View all
Traffic Impact Update
2h ago
Monterey Rd will have single lane closures from 7:00 AM – 4:00 PM this week.
View alert details
1
Home
Map
Learn
Kids
Profile
1
2
ConstructED
SAVED PROJECT UPDATES
Downtown Road Improvement Project
ACTIVE
Overview
Timeline
Equipment
Road resurfacing, structural sidewalk repairs, ADA upgrades, and improved pedestrian high-visibility crosswalks around Monterey.
Key Details
Location
Monterey Rd & 1st St
Start Date
Oct 12, 2025
Est. Completion
Dec 20, 2025
Impact Area
High (Expect Lane Closures)
Monterey Rd Zone
Nearby Alerts (2)
Single Lane Detour
Monterey Rd down to single lane 7am-4pm.
Water Main Shutoff
Scheduled 2-hour pressure drop on Tuesday.
Home
Map
Learn
Kid Zone
Profile
3
4
Home
Map
Learn
Kid Zone
Profile
HOME - WIREFRAME
HOME - HIGH-FIDELITY
PROJECT DETAIL - HIGH-FIDELITY
3
Labeled states
Status and selected controls use text labels and visual styling to distinguish their meaning.
4
Consistent controls
Buttons and tabs use repeated shapes and placement across the interface.
1
Readable hierarchy
Large display title paired with smaller supporting copy establishes a clear visual order. Users scan the bold heading first, then read the descriptor.
2
Section grouping
Labeled header (“Active near you”) + contained card list creates a scannable content block. Consistent spacing separates this group from adjacent sections.
09 / FINAL PRODUCT
09 / FINAL PRODUCT
A clearer path from discovery to understanding
A clearer path from discovery to understanding
01 / DISCOVER
01 / DISCOVER
Learning and account screens: explore equipment, access Kid Zone activities, and manage saved projects and preferences.
Learning and account screens: explore equipment, access Kid Zone activities, and manage saved projects and preferences.
02 / UNDERSTAND
02 / UNDERSTAND
Project Details and Timeline: review project status, dates, and impact.
Project Details and Timeline: review project status, dates, and impact.
03 / EXPLORE
03 / EXPLORE
Machine Explorer and Kid Zone: explore equipment and construction learning content.
Machine Explorer and Kid Zone: explore equipment and construction learning content.
10 / OUTCOME
10 / OUTCOME
An interactive prototype connecting construction
information and learning.
An interactive prototype connecting construction information and learning.
ConstructED is an interactive prototype that connects nearby
project discovery, maps, project details, and equipment
learning. The final interface organizes construction information
into clearer screens and connected flows.
ConstructED is an interactive prototype that connects nearby project discovery, maps, project details, and equipment learning. The final interface organizes construction information into clearer screens and connected flows.
11 / REFLECTION
11 / REFLECTION
Organizing information before refining the interface.
This project reinforced the value of organizing information before refining the interface. Connecting discovery, project details, and learning content helped me define a clearer product structure.
This project reinforced the value of organizing information before refining the interface. Connecting discovery, project details, and learning content helped me define a clearer product structure.
12 / NEXT
12 / NEXT
Next Case Study
Next Case Study
Open Source San Jose
Open Source San Jose
A clearer path from mission to participation
A homepage redesign focused on clearer hierarchy, scannable content, and visible ways to get involved.
A homepage redesign focused on clearer hierarchy, scannable content, and visible ways to get involved.
View Case Study →
View Case Study →