PRIVATE CONTENT

Builder Portal: Calendar View

Ryan J. Daley

UX Designer

Builder Portal: Calendar View

Available for work

Builder Portal: Calendar View

Builder Portal: Calendar View

Client:

CenterPoint Energy

Duration:

1+ years

UX Design

UX Design

UX Design

UI Design

UI Design

UI Design

User Research

User Research

User Research

550%
550%
550%

Faster Onboarding Time

Faster Onboarding Time

Faster Onboarding Time

Faster Onboarding Time

33%
33%
33%

Less Issues Reported

Less Issues Reported

Less Issues Reported

Less Issues Reported

4+
4+
4+

Different Views Added

Different Views Added

Different Views Added

Different Views Added

Details

Details

Details

Details

Problem Statement:

The company was having issues visualizing the scheduled request releases and need-by dates.

Goal:

Create a calendar view that can sync to SAP and help internal users view data at a glance

Target Audience:

Builders who need a new line or new meter & intenral employees to monitor these actions.

Initital Interview

Type:

Internal Employee

Context:

Discussing tools for managing their work schedules.

Role:

Scheduling Coordinator

Initital Interview

Type:

Internal Employee

Context:

Discussing tools for managing their work schedules.

Role:

Scheduling Coordinator

Initital Interview

Type:

Internal Employee

Context:

Discussing tools for managing their work schedules.

Role:

Scheduling Coordinator

Initital Interview

Type:

Internal Employee

Context:

Discussing tools for managing their work schedules.

Role:

Scheduling Coordinator

Competitive Analysis

Competitive Analysis

Competitive Analysis

Competitive Analysis

9M

Customers

Customers

1M

CenterPoint Energy

FPL

SDGE

PGE

PSEG

Duke

PG&E

Southern Company

$2B

Revenue

$25B

Key Takeaways

Key Takeaways

Key Takeaways

Key Takeaways

Managing Requests

Organize requests: A different list between applications and active projects. (Maybe we can figure out how to change the status or pin projects?). A pinning system to keep important projects at the top, similar to email.

Appointments: One of the portals has a section for appointments, maybe we can have a way to show this on a calendar system to keep appointments in perspective for a multi request account? Could be useful from the Dispatch side Interactive calendar view

Group jobs by Sub-category Residential Commercial Etc.

Calendar view of requests: Ability to view requests as a list or calendar

General UX/UI Improvements

Navigation: A hamburger menu to keep additional files and helpful resources in one place.

Responsive: Better support for tablets and mobile

Initial UX Wireframe

🛠️ Key Features

  • Dual-view layout: Users can toggle between a left-aligned agenda and a traditional calendar view

  • Event detail pane: When an event is selected, details such as time, attendees, and notes are displayed contextually

  • Calendar filters: Color-coded indicators highlight different types of events across the month

  • Interactive UI: Navigation buttons, tabs, and hover states allow quick access to relevant information


🧪 Design Improvements

  • Created a wireframe version to test layout clarity early

  • Integrated stakeholder feedback to reduce visual clutter and emphasize important information

  • Prioritized accessibility by ensuring high contrast and clearly labeled components


🗣️ Feedback Highlights

“Love the way the detail panel updates in real time — helps avoid clicking back and forth.”

“We really appreciate being able to see who’s invited at a glance. Super helpful for rescheduling.”

📝 “Could we add quick event actions like edit/delete right from the tile? That would be a future win.”

Initial UX Wireframe

🛠️ Key Features

  • Dual-view layout: Users can toggle between a left-aligned agenda and a traditional calendar view

  • Event detail pane: When an event is selected, details such as time, attendees, and notes are displayed contextually

  • Calendar filters: Color-coded indicators highlight different types of events across the month

  • Interactive UI: Navigation buttons, tabs, and hover states allow quick access to relevant information


🧪 Design Improvements

  • Created a wireframe version to test layout clarity early

  • Integrated stakeholder feedback to reduce visual clutter and emphasize important information

  • Prioritized accessibility by ensuring high contrast and clearly labeled components


🗣️ Feedback Highlights

“Love the way the detail panel updates in real time — helps avoid clicking back and forth.”

“We really appreciate being able to see who’s invited at a glance. Super helpful for rescheduling.”

📝 “Could we add quick event actions like edit/delete right from the tile? That would be a future win.”

Initial UX Wireframe

🛠️ Key Features

  • Dual-view layout: Users can toggle between a left-aligned agenda and a traditional calendar view

  • Event detail pane: When an event is selected, details such as time, attendees, and notes are displayed contextually

  • Calendar filters: Color-coded indicators highlight different types of events across the month

  • Interactive UI: Navigation buttons, tabs, and hover states allow quick access to relevant information


🧪 Design Improvements

  • Created a wireframe version to test layout clarity early

  • Integrated stakeholder feedback to reduce visual clutter and emphasize important information

  • Prioritized accessibility by ensuring high contrast and clearly labeled components


🗣️ Feedback Highlights

“Love the way the detail panel updates in real time — helps avoid clicking back and forth.”

“We really appreciate being able to see who’s invited at a glance. Super helpful for rescheduling.”

📝 “Could we add quick event actions like edit/delete right from the tile? That would be a future win.”

Initial UX Wireframe

🛠️ Key Features

  • Dual-view layout: Users can toggle between a left-aligned agenda and a traditional calendar view

  • Event detail pane: When an event is selected, details such as time, attendees, and notes are displayed contextually

  • Calendar filters: Color-coded indicators highlight different types of events across the month

  • Interactive UI: Navigation buttons, tabs, and hover states allow quick access to relevant information


🧪 Design Improvements

  • Created a wireframe version to test layout clarity early

  • Integrated stakeholder feedback to reduce visual clutter and emphasize important information

  • Prioritized accessibility by ensuring high contrast and clearly labeled components


🗣️ Feedback Highlights

“Love the way the detail panel updates in real time — helps avoid clicking back and forth.”

“We really appreciate being able to see who’s invited at a glance. Super helpful for rescheduling.”

📝 “Could we add quick event actions like edit/delete right from the tile? That would be a future win.”

Day View

🧠 Purpose

Designed for dispatchers, coordinators, and on-site leads who need precise visibility into the day’s workload. This view is ideal for making real-time adjustments, last-minute scheduling, and confirming time-sensitive appointments.

💡 UI Features

  • Hourly time slots from early morning to late evening

  • Color-coded event blocks for job types (e.g., inspection, install, maintenance)

  • Drag-and-drop interaction (planned for future roadmap) for fast rescheduling

  • Compact invitee tags and location info inside each event tile

  • Sticky timeline indicator to track current time of day


🗣️ Feedback & Comments

📞 Dispatcher:

“This helps me avoid overlaps in the field and catch missed time blocks fast.”


🔧 Technician Lead:

“Love that I can see job durations. Before, I didn’t know if a task was 30 minutes or 3 hours.”


🧪 UX Reviewer:

“Consider adding a mini date switcher at the top so users don’t have to click back to the full calendar to navigate.”


💬 Stakeholder (Product Owner):

“This is crucial for reactive scheduling — being able to monitor live changes makes our workflow more flexible.”

Day View

🧠 Purpose

Designed for dispatchers, coordinators, and on-site leads who need precise visibility into the day’s workload. This view is ideal for making real-time adjustments, last-minute scheduling, and confirming time-sensitive appointments.

💡 UI Features

  • Hourly time slots from early morning to late evening

  • Color-coded event blocks for job types (e.g., inspection, install, maintenance)

  • Drag-and-drop interaction (planned for future roadmap) for fast rescheduling

  • Compact invitee tags and location info inside each event tile

  • Sticky timeline indicator to track current time of day


🗣️ Feedback & Comments

📞 Dispatcher:

“This helps me avoid overlaps in the field and catch missed time blocks fast.”


🔧 Technician Lead:

“Love that I can see job durations. Before, I didn’t know if a task was 30 minutes or 3 hours.”


🧪 UX Reviewer:

“Consider adding a mini date switcher at the top so users don’t have to click back to the full calendar to navigate.”


💬 Stakeholder (Product Owner):

“This is crucial for reactive scheduling — being able to monitor live changes makes our workflow more flexible.”

Day View

🧠 Purpose

Designed for dispatchers, coordinators, and on-site leads who need precise visibility into the day’s workload. This view is ideal for making real-time adjustments, last-minute scheduling, and confirming time-sensitive appointments.

💡 UI Features

  • Hourly time slots from early morning to late evening

  • Color-coded event blocks for job types (e.g., inspection, install, maintenance)

  • Drag-and-drop interaction (planned for future roadmap) for fast rescheduling

  • Compact invitee tags and location info inside each event tile

  • Sticky timeline indicator to track current time of day


🗣️ Feedback & Comments

📞 Dispatcher:

“This helps me avoid overlaps in the field and catch missed time blocks fast.”


🔧 Technician Lead:

“Love that I can see job durations. Before, I didn’t know if a task was 30 minutes or 3 hours.”


🧪 UX Reviewer:

“Consider adding a mini date switcher at the top so users don’t have to click back to the full calendar to navigate.”


💬 Stakeholder (Product Owner):

“This is crucial for reactive scheduling — being able to monitor live changes makes our workflow more flexible.”

Day View

🧠 Purpose

Designed for dispatchers, coordinators, and on-site leads who need precise visibility into the day’s workload. This view is ideal for making real-time adjustments, last-minute scheduling, and confirming time-sensitive appointments.

💡 UI Features

  • Hourly time slots from early morning to late evening

  • Color-coded event blocks for job types (e.g., inspection, install, maintenance)

  • Drag-and-drop interaction (planned for future roadmap) for fast rescheduling

  • Compact invitee tags and location info inside each event tile

  • Sticky timeline indicator to track current time of day


🗣️ Feedback & Comments

📞 Dispatcher:

“This helps me avoid overlaps in the field and catch missed time blocks fast.”


🔧 Technician Lead:

“Love that I can see job durations. Before, I didn’t know if a task was 30 minutes or 3 hours.”


🧪 UX Reviewer:

“Consider adding a mini date switcher at the top so users don’t have to click back to the full calendar to navigate.”


💬 Stakeholder (Product Owner):

“This is crucial for reactive scheduling — being able to monitor live changes makes our workflow more flexible.”

Week View

This view focuses on daily time slots and provides a detailed breakdown of tasks or events across a 7-day window.

🧠 Purpose

Ideal for scheduling field work, balancing technician workloads, and identifying availability at a granular level.

🗣️ Feedback

👩‍💼 Scheduler:

“This is my go-to view — I can see where there are gaps or double-bookings instantly.”


👷‍♂️ Field Supervisor:

“Appreciate how I can quickly scan who’s where, especially when we have a tight install schedule.”


🧪 UX Reviewer:

“Consider locking the day headers when scrolling for easier cross-day comparisons.”

Week View

This view focuses on daily time slots and provides a detailed breakdown of tasks or events across a 7-day window.

🧠 Purpose

Ideal for scheduling field work, balancing technician workloads, and identifying availability at a granular level.

🗣️ Feedback

👩‍💼 Scheduler:

“This is my go-to view — I can see where there are gaps or double-bookings instantly.”


👷‍♂️ Field Supervisor:

“Appreciate how I can quickly scan who’s where, especially when we have a tight install schedule.”


🧪 UX Reviewer:

“Consider locking the day headers when scrolling for easier cross-day comparisons.”

Week View

This view focuses on daily time slots and provides a detailed breakdown of tasks or events across a 7-day window.

🧠 Purpose

Ideal for scheduling field work, balancing technician workloads, and identifying availability at a granular level.

🗣️ Feedback

👩‍💼 Scheduler:

“This is my go-to view — I can see where there are gaps or double-bookings instantly.”


👷‍♂️ Field Supervisor:

“Appreciate how I can quickly scan who’s where, especially when we have a tight install schedule.”


🧪 UX Reviewer:

“Consider locking the day headers when scrolling for easier cross-day comparisons.”

Week View

This view focuses on daily time slots and provides a detailed breakdown of tasks or events across a 7-day window.

🧠 Purpose

Ideal for scheduling field work, balancing technician workloads, and identifying availability at a granular level.

🗣️ Feedback

👩‍💼 Scheduler:

“This is my go-to view — I can see where there are gaps or double-bookings instantly.”


👷‍♂️ Field Supervisor:

“Appreciate how I can quickly scan who’s where, especially when we have a tight install schedule.”


🧪 UX Reviewer:

“Consider locking the day headers when scrolling for easier cross-day comparisons.”

Month View

Offers a broader perspective to visualize project pacing, deadlines, and team-wide availability over a full month.

🧠 Purpose

Great for planning larger initiatives, upcoming maintenance cycles, or tracking key project milestones.

🗣️ Feedback

👨‍🔧 Ops Lead:

“The color-coded events are super helpful. At a glance, I know which type of job it is.”


📊 PMO Analyst:

“Would be great to add an export or print view so we can drop this into our monthly reports.”


🧑‍💻 Developer:

“We should optimize load time when multiple events are stacked for a single day.”

Month View

Offers a broader perspective to visualize project pacing, deadlines, and team-wide availability over a full month.

🧠 Purpose

Great for planning larger initiatives, upcoming maintenance cycles, or tracking key project milestones.

🗣️ Feedback

👨‍🔧 Ops Lead:

“The color-coded events are super helpful. At a glance, I know which type of job it is.”


📊 PMO Analyst:

“Would be great to add an export or print view so we can drop this into our monthly reports.”


🧑‍💻 Developer:

“We should optimize load time when multiple events are stacked for a single day.”

Month View

Offers a broader perspective to visualize project pacing, deadlines, and team-wide availability over a full month.

🧠 Purpose

Great for planning larger initiatives, upcoming maintenance cycles, or tracking key project milestones.

🗣️ Feedback

👨‍🔧 Ops Lead:

“The color-coded events are super helpful. At a glance, I know which type of job it is.”


📊 PMO Analyst:

“Would be great to add an export or print view so we can drop this into our monthly reports.”


🧑‍💻 Developer:

“We should optimize load time when multiple events are stacked for a single day.”

Month View

Offers a broader perspective to visualize project pacing, deadlines, and team-wide availability over a full month.

🧠 Purpose

Great for planning larger initiatives, upcoming maintenance cycles, or tracking key project milestones.

🗣️ Feedback

👨‍🔧 Ops Lead:

“The color-coded events are super helpful. At a glance, I know which type of job it is.”


📊 PMO Analyst:

“Would be great to add an export or print view so we can drop this into our monthly reports.”


🧑‍💻 Developer:

“We should optimize load time when multiple events are stacked for a single day.”

Year View

A high-level overview designed to spot long-term trends, team capacity, and strategic planning milestones.

🧠 Purpose

Perfect for leadership and planning teams to identify seasonal workloads, staffing needs, or forecast resource gaps.

🗣️ Feedback

🧓 Director of Operations:

“This is great for executive review — we can see how booked we are across quarters.”


💼 HR Manager:

“Helpful for vacation planning and capacity forecasting across regions.”


🛠️ Stakeholder:

“Can we add filters by department or team for more focused views at this level?”

Year View

A high-level overview designed to spot long-term trends, team capacity, and strategic planning milestones.

🧠 Purpose

Perfect for leadership and planning teams to identify seasonal workloads, staffing needs, or forecast resource gaps.

🗣️ Feedback

🧓 Director of Operations:

“This is great for executive review — we can see how booked we are across quarters.”


💼 HR Manager:

“Helpful for vacation planning and capacity forecasting across regions.”


🛠️ Stakeholder:

“Can we add filters by department or team for more focused views at this level?”

Year View

A high-level overview designed to spot long-term trends, team capacity, and strategic planning milestones.

🧠 Purpose

Perfect for leadership and planning teams to identify seasonal workloads, staffing needs, or forecast resource gaps.

🗣️ Feedback

🧓 Director of Operations:

“This is great for executive review — we can see how booked we are across quarters.”


💼 HR Manager:

“Helpful for vacation planning and capacity forecasting across regions.”


🛠️ Stakeholder:

“Can we add filters by department or team for more focused views at this level?”

Year View

A high-level overview designed to spot long-term trends, team capacity, and strategic planning milestones.

🧠 Purpose

Perfect for leadership and planning teams to identify seasonal workloads, staffing needs, or forecast resource gaps.

🗣️ Feedback

🧓 Director of Operations:

“This is great for executive review — we can see how booked we are across quarters.”


💼 HR Manager:

“Helpful for vacation planning and capacity forecasting across regions.”


🛠️ Stakeholder:

“Can we add filters by department or team for more focused views at this level?”

© 2025. All rights Reserved.

© 2025. All rights Reserved.

© 2025. All rights Reserved.

© 2025. All rights Reserved.