Jobs4Blue Agent Portal
VCS HR
VCS HR is a workforce management platform that provides integrated payroll, time tracking, scheduling, and HR solutions to help organizations streamline operations, improve employee engagement, and reduce costs.
Target clients: Public service agencies (police departments, township municipalities, fire departments, hospitals, universities, and more), and large companies.
The Jobs4Blue Agent Portal is an internal platform for managing extra-duty job requests connecting enterprise clients with off-duty police officers (ex: Verizon hiring traffic control officers for construction work on a highway).
Target user: VCS HR's internal employees, who manage job scheduling.
Function: This product replaces fragmented tools with a streamlined system for handling requests, communication, assignments, and status tracking. Designed to support high-volume workflows, it improves clarity, reduces friction, and enables agents to efficiently manage jobs from submission through completion.
Timeline
Dec 2025 - Feb 2026
UX/UI Design
Julie DiMemmo
Project Manager
David L.
Developers
Nick T.
Talha S.
My Role
I led the end-to-end redesign of the Jobs4Blue Agent Portal, transforming fragmented workflows into a centralized system for managing extra-duty job scheduling.
The project included redesigning core workflows and introducing new system capabilities to support faster decision-making and high-volume operations. UI was also drastically improved, as I created and implemented a design system.
9
Workflows Redesigned
31% increase
Task Completion Rate
243
Enterprise Clients
34
Agents Supported
4
Cross-Functional Teams Aligned
Problem
01
Each job includes multiple layers of information, with a density that is challenging to absorb.
Heuristic Violations:
Aesthetic & minimalist design,
Recognition rather than recall
02
Agents process large numbers of job requests within a single shift.
Heuristic Violations:
Flexibility & efficiency of use,
User control & freedom
03
Exposing too much information at once slows down workflows.
Heuristic Violations:
Aesthetic & minimalist design,
Visibility of system status
Solution
01
The interface needed to surface this information clearly without overwhelming users.
02
The system needed to support quick scanning and rapid decision-making.
03
The design needed to prioritize the most actionable information.
Design Goals
01
Enable confident decision making
Emphasize clarity, priority, and system feedback through structured layouts, status updates, and intuitive visual cues.
02
Design for flows, not screens
Rethink workflows as continuous flows rather than disconnected pages.
03
Consistent UI & scalable information architecture
Organize information into modular, reusable patterns, such as standardized components and layered data views. Screens must be organized in a way to simplify each workflow. Intuitive navigation is crucial.
Scope: This was not a single workflow improvement—it was a full product transformation.
I redesigned and expanded multiple connected workflows, transforming fragmented processes into a cohesive scheduling system.
Onboarding and job intake workflows
Job scheduling and officer assignment
Communication and coordination flows
Job tracking and status management
Core information architecture
New features to support missing functionality
Workflow Ecosystem Map
Highlight Reel
Information Architecture - Before & After
Login Screen - Before & After
Research
I reviewed internal workflows, spoke with stakeholders, and analyzed existing scheduling and operations management tools.
A key insight: many systems suffer from poor information hierarchy, making it difficult to identify what requires action. Improving clarity—especially around job status—became a primary focus.
Another key finding was the importance of centralized job views. Agents need full job context (customer, department, scheduling, updates) in one place without excessive navigation or scrolling.
Design Audit Findings
01
Vital information isn't obvious
Rapid recognition is crucial when scanning dense data. The current design didn't accent details such as status and deadlines.
02
Workflows are lengthy, complicated, and scattered across multiple screens
Agents waste unnecessary time navigating across multiple screens to complete a single workflow, and being shown irrelevant information.
03
Visual design is dated and disorganized
With no design system in place, the visual design was inconsistent, lacked visual hierarchy, and made decision-making overwhelming and time consuming.
Insights
Establishing a Modern, Trustworthy Interface
Problem
The existing interface felt dated, impacting perceived product credibility.
Solution
Introduced a modern, visually cohesive design system
Applied consistent typography, spacing, and layout patterns
Elevated overall look and feel to build trust and product legitimacy
Example
Login Screen
Streamlining Data Entry with Clean Forms
Problem
Form design was unstructured, cluttered, and cognitively taxing.
Solution
Designed clean, structured forms using familiar UX patterns
Improved field grouping and labeling for clarity
Increased scannability and accessibility to speed up input
Example
Creating a New Agency (Police Department)
Reducing Workflow Disruption with Modal-Based Interactions
Problem
Users were frequently redirected away from their current context to complete simple tasks.
Solution
Introduced modal-based data entry for lightweight actions
Kept users within the primary workflow context
Reduced task interruption and improved efficiency
Example
Adding a New Agent (internal J4B employee)
Enhancing Information Retrieval with Search & Filters
Problem
Users struggled to locate specific information within dense data views.
Solution
Implemented robust search functionality
Added filtering options to refine results
Enabled faster access to relevant data
Example
Setup Agency (Police Department)
Guiding Users with Progressive Disclosure
Problem
Overwhelming amounts of information (both relevant and irrelevant) made workflows harder to follow.
Solution
Structured interfaces to reveal information step-by-step
Prioritized relevant content based on user actions
Reduced cognitive load and improved task flow
Example
Manage Security (for managing agent access)
Collaboration
The project involved close collaboration with developers and internal stakeholders.
We aligned on data structure, status behavior, and how to present large datasets effectively. This ensured the design supported real operational needs while remaining technically feasible. We also defined acceptance criteria for implementation, and I iterated based on feedback.
Key Decisions & Tradeoffs
Tradeoff: Visual intensity vs usability
Color-coded rows were visually bold but significantly improved efficiency.
Constraint: Existing system architecture
Had to align with backend data structures, limiting certain interactions.
Decision: Progressive disclosure
Balanced complexity by showing key info first, details on demand.
Results
Improved job visibility
Status indicators and structured layouts make job states immediately clear.
More efficient workflows
Agents can review, schedule, and track jobs within a more streamlined interface.
Reduced navigation complexity
Centralized job information reduces the need to switch between multiple screens.
Better support for high-volume work
Scannable tables and filtering tools enable efficient management of large job volumes.
Learnings
AI is king!
Utilizing AI tools during the design process has cut my design to handoff timeline in half. Integrating tools such as Claude Code, ChatGPT 5.0, Notion AI, and Magic Dashboards has streamlined tasks that I used to do by hand. Some examples include: synthesizing research findings, secondary research/inspiration search, light UI ideation, ensuring verbiage is clear and concise, and more. Of course, all output must be analyzed and revised based on core UX/UI practices, but utilizing these tools saved me an immense amount of time with "busy work".
How to present complex systems with dense data
A particular challenge for me was navigating how to display large amounts of data in a way that didn't overwhelm or confuse the user. Following fundamental UX practices and understanding human behavior allowed me to make design decisions such as using the F-pattern. It is a common, fast, and efficient user scanning behavior on text-heavy websites: they read across the top line, move down to scan a shorter second line, and then continue by scanning vertically along the left side. This helped me strategically present information to lead users through the workflows.
Stakeholder education is crucial
UX/UI Design was new to the J4B team, so it was imperative that I give the context for why I made certain design decisions. The goal was helping the agent complete their tasks with ease, and spot relevant information for their respective workflow. This necessitated simplicity, visual hierarchy, and workflow guidance (ex: progressive disclosure) to eliminate overwhelm and clutter.
Early user feedback reduced rework and improved final usability
Speaking directly with the agents throughout the design process enabled me to streamline my design process to cater to their unique needs. It was vital to get a deep understanding of their pain points and friction when using both the legacy product and my redesigned work. Because of this early feedback, iteration was immediate and simple.
Looking Ahead
As Jobs4Blue grows, the Agent Portal will continue evolving to support more advanced operational needs.
Opportunities include:
Improved officer availability management
Expanded analytics for job performance and staffing trends
Enhanced communication tools between agents and departments
Automation of common scheduling tasks
By prioritizing clarity, efficiency, and scalability, the Agent Portal provides a strong foundation for supporting the platform’s growing operational demands.
