TwitterCopy linkArrowStretchUn StretchclutchlinkedindribbblebehancefacebookinstagramPlusMinus
ExtraDuty

ExtraDuty: Merging three systems into one app

We helped ExtraDuty Solutions to seamlessly merge three standalone systems into one feature-rich mobile app. Designed specifically for law enforcement officers, the app enables seamless schedule management, job applications, and communication with agencies β€” all in one place. The functionality of the app is wrapped up into an intuitive, flexible design that suits all types of users.

TEAM

4 Members

STARTED IN

2024

FINISHED IN

4 months

Country

USA

Industry

Public safety

Custom Business Applications
Dedicated Team
Design System
Management
Mobile Applications
Product Discovery
Redesign
UX Audit
UX/UI design
Extra-Duty-main

OVERVIEW

About
the business

ExtraDuty Solutions is a leading provider of on-duty & off-duty administration services for law enforcement agencies across the United States. Founded in 2014, the company manages interactions with clients, job scheduling, officer payroll, and client invoicing.

With a focus on compliance, financial risk mitigation, and transparency, ExtraDuty Solutions enables agencies to reassign clerical work, save costs, and streamline communications. Their mission is to enhance operational efficiency, allowing law enforcement agencies to focus on critical tasks.

We cooperated with ExtraDuty Solutions to help them conduct an audit of their three go-to solutions for law enforcement officers and merge them into a mobile-first application that can be easily accessed anytime and anywhere.

OVERVIEW

Project tasks

  • Conduct an audit of the 3 platforms ExtraDuty, OnDuty, and Responder to identify usability challenges and gaps. Assess the consistency of design elements, user flows, and interactions across various devices.
  • Create a new, integrated solution combining the functionalities of ExtraDuty, OnDuty, and Responder into a single, cohesive platform.

  • Enhance usability by designing an intuitive interface helping to reduce the learning curve for new users and improve the overall user experience.

  • Ensure a mobile-first approach by building a responsive, touch-friendly design optimized for smartphones and tablets, accessible and easy to use on the go.

  • Ensure flexible user experience. Cater to both conservative and modern users by allowing customization and adaptability within the platform.

  • Develop a comprehensive design system using atomic design principles and tokenization to ensure scalability and consistency.

OVERVIEW

Project team

β€’ 2 UX/UI designers
β€’ Business Analyst
β€’ Project Manager

1.5

months for
audit & discovery

2.5

months for
design

ExtraDuty-Mobile

ExtraDuty. Mobile

PROJECT JOURNEY

Research & Product discovery

The research phase was crucial for understanding the needs of law enforcement officers and support staff. It helped us to identify key pain points, particularly in the "search for a job" and "request time off" features. We also utilized AI tools like ChatGPT to analyze competitors and refine our problem statement. This allowed us to gather insights quickly and focus on priority areas efficiently.

Research Objectives

Our main goals were to gain a deep understanding of user behavior, uncover pain points, and identify market trends related to off-duty and overtime job management. Here is what we did:

  • Identified user pain points and understood the key challenges law enforcement officers face when managing on-duty and off-duty jobs, especially focusing on job search and time-off requests.

  • Analyzed existing workflows to identify inefficiencies in job application, scheduling, and time-off requests, aiming to streamline and optimize these processes.

  • Ensured that the platform design addressed officer needs by validating pain points and user requirements through interviews, stakeholder interviews, and competitor analysis.

  • Conducted a thorough competitor analysis to uncover industry best practices and potential areas for innovation within job scheduling and management for law enforcement.

  • Prioritized the "search for a job", β€œapplying for job” sections, β€œscalable calendar” and the "request a time off" flows to ensure these critical areas meet user expectations and improve overall platform usability.
84-icon

Stakeholder Interviews

Our main goals were to clarify redesign priorities and define the platform’s focus to align with the client’s objectives and user expectations. We aimed to understand user personas and their needs, identifying specific challenges they face.Β 

We emphasized a mobile-first solution, creating a touch-friendly, responsive platform for users on the go. Officers were identified as the primary user persona, needing efficient job application capabilities. Additionally, we recognized the importance of catering to users who prefer simplicity as well as those seeking customization.

extraduty-Interview-mapping

ExtraDuty. Interview mapping

84-icon

Competitor Analysis

The competitor analysis aimed to assess industry standards, identify best practices, and uncover opportunities for differentiation in the law enforcement scheduling and job management space. Using AI tools, we efficiently searched the competitive landscape, gathering insights from various platforms.

We compared different approaches, analyzed user interfaces and workflows, and watched video presentations of competitor platforms on YouTube. Additionally, we tested demo versions of some of the products to evaluate usability and functionality firsthand.

These efforts highlighted key features and functionalities that enhance user experience, such as intuitive job search filters, flexible scheduling tools, and streamlined time-off request processes. We identified opportunities to integrate these best practices into the ExtraDuty Solutions platform, providing a competitive edge and significantly improving overall usability.

84-icon

User Journey Mapping

User journeys were mapped for each persona to visualize how they interact with the platform at different stages. This mapping revealed critical touchpointsβ€”such as job search, schedule management, and notification handlingβ€”where users faced difficulties. We used these insights to streamline interactions and make the platform more intuitive.

84-icon

Object-Oriented UX

We began by identifying the core objects within the platform, such as jobs, schedules, and notifications, and defining their attributes and relationships.

Since this platform's functionality already existed across three separate platforms, we conducted a deep dive into each one to understand how they worked and how they managed data. This involved thoroughly examining how data was organized, the connections between different data units, and the interactions within the existing backend systems. Our goal was to ensure consistency, predictability, and seamless interaction for users by integrating these disparate systems into a unified, efficient platform.

PROJECT JOURNEY

Key Challenges

Our research identified several key challenges we needed to address in the new platform:

  • The Officers want to review and manage their work schedules, adapt them to various circumstances, and evaluate suitable off-duty requests. They aim to maintain clarity across different job calendars. Additionally, they need efficient methods to manage schedules, stay informed about new job opportunities that match their skills, and quickly access information about these positions. It's essential for them to understand eligibility rules to remain competitive in their assignments. They are concerned about missing opportunities for additional work and want to avoid confusion regarding payments and the overlap between on-duty and off-duty calendars.

  • The Security Department Administrator is responsible for payroll preparation, administering off-duty opportunities for officers, reviewing new customer registrations, managing on-duty schedules and requests, tracking attendance, distributing overtime, and ensuring minimum staffing compliance.

  • The Security Department Supervisor is requesting officers to work, manage payments, and request officers to work. They need to keep track of transactions and to monitor work requests.

PROJECT JOURNEY

Key insights

While developing the ExtraDuty Solutions platform we focused on understanding law enforcement officers' needs to create a user-friendly, mobile-first solution.

This section highlights the key insights, features, and design decisions that shaped the final product, ensuring it met user needs and delivered a seamless experience across devices.

User Insights

During the research phase we gathered significant stakeholders insights that directly informed our design choices. From the perspective of law enforcement officers, the audit of the three platformsβ€”ExtraDuty, OnDuty, and the Responder mobile appβ€”revealed several key insights that directly impacted their user experience:

1-one-large

Job Search Frustrations

Officers struggled to efficiently search for and apply for off-duty and overtime jobs. The lack of intuitive filtering options and hidden features made finding relevant jobs more difficult and time-consuming.

2-two-large

Scheduling Overlaps

Officers often encountered scheduling conflicts between their on-duty and off-duty shifts, which were not clearly flagged or easy to manage. The current systems did not provide sufficient tools for visualizing or resolving conflicts.

3-three-large

Mobile Usability Issues

Officers primarily interact with the system via mobile devices while on the move, yet the mobile experience was cluttered and challenging. Core features were hidden, navigation was inconsistent, and there was a lack of real-time status updates.

4-four-large

Limited Control and Flexibility

The platform lacked flexibility in terms of scheduling and job management. Officers were unable to easily adjust their off-duty availability or customize their dashboard to suit their immediate needs, limiting their control over their work schedules.

These pain points directly influenced the redesign, ensuring that the new platform was tailored to the officers' needs, offering better job search tools, conflict-free scheduling, and a more intuitive, mobile-friendly experience.

Unique Value Proposition

ExtraDuty Solutions sets itself apart by providing a unified platform that combines the functionalities of three separate systemsβ€”ExtraDuty, OnDuty, and the Responder mobile appβ€”into one cohesive solution. The platform is designed to enhance job management for law enforcement officers, offering a responsive mobile-first experience, and empowering schedulers and administrative staff with better tools for scheduling, approvals, and invoicing. Its seamless integration with both on-duty and off-duty workflows ensures that officers can manage their work efficiently, while departments retain control and transparency.

Design Iterations

Throughout the project, we followed a structured, iterative design process. We started by creating wireframes for the most critical parts of the platform, focusing on the job search interface, scheduling, and key workflows.

Once the wireframes were solidified, we developed a design concept to establish the visual direction of the platform. After confirming the concept, we moved on to refining the remaining wireframes and finalizing the design details.

Once the wireframes and design concept were finalized, we proceeded to create a comprehensive design system. This ensured consistency across all elements and allowed for future scalability. Each step in this process helped refine the design to better meet user needs while maintaining flexibility for future growth.

Accessibility and Inclusivity

We adhered to accessibility standards to ensure that the platform is easy to use for a wide range of users, including those with visual impairments. Our mobile-first design promotes inclusivity for officers who primarily use smartphones. Additionally, we offered both dark and light modes to help users adapt to different lighting conditions, such as when using the platform in a dark car.

ExtraDuty-mobile-1

ExtraDuty. Mobile

PROJECT JOURNEY

Suggested solution & redesign

Customizable Dashboard

The dashboard in ExtraDuty is designed to be a central hub where all usersβ€”officers, schedulers, and administrative staffβ€”can quickly access the most relevant and personalized information in real time. The interface is built with modular widgets that users can adjust according to their needs, offering flexibility and efficiency in managing schedules, job opportunities, notifications, and payments.

60-icon

Schedule Overview

Displays upcoming on-duty and off-duty events, including time slots and any conflicts. Users can see a quick summary of the day’s schedule, and the interface provides a detailed look at events planned for the current day or upcoming dates.

60-icon

Job Opportunities

The app displays the number of available off-duty jobs and overtime opportunities. Each category has a widget with real-time numbers, allowing officers to easily access job openings. A map feature shows nearby opportunities based on location.

60-icon

Time Card

It tracks on-duty time, allowing users to log hours and manage their work shifts directly. This feature is particularly useful for officers to stay on top of their working hours and ensure all time is accurately recorded.

60_icon_4

Payments

The feature lists recent or pending payments, showing amounts and corresponding job assignments. This helps officers and administrative staff track payment statuses and ensure everything is accounted for.

ExtraDuty-Customizable-Dashboard

ExtraDuty. Customizable Dashboard

Job Search & Filtering

The job search functionality in ExtraDuty is designed to provide officers with an efficient, intuitive tool for finding relevant off-duty and overtime jobs. The platform offers a robust set of filters and sorting options to help users quickly navigate through a large number of available opportunities while also allowing them to save preferences for future searches.

60-icon

Comprehensive Filters

Users can filter job listings by job details, date & time, location, compensation, application type, contractor, and more. Each filter is clearly defined, making it easy for officers to narrow down their searches.

60-icon

Location-Based Opportunities

The job search includes a map view that displays job opportunities based on the officer’s current location, allowing for quick access to nearby jobs. This feature helps officers find work that fits their geographical preferences.

60-icon

Recommendations

The platform offers personalized job recommendations based on the officer’s previous listings and application history. This ensures that officers are presented with relevant opportunities tailored to their job preferences.

60-icon

Compensation & Job Details

Job listings prominently display key information such as compensation, job type, contractor, and the number of people required. This ensures officers can quickly assess whether a job meets their needs before applying.

ExtraDuty-Job Search-and-Filtering

ExtraDuty. Job Search & Filtering

Customizable Navigation

The ExtraDuty Solutions platform offers a flexible and customizable navigation system, allowing users to tailor their navigation preferences based on their personal needs and usage patterns. The platform provides both a side navigation bar and a bottom navigation bar, ensuring adaptability to various user workflows and devices (mobile or desktop).

60-icon

Navigation Bar Customization

The platform allows users to select between 3 and 5 items to display in the bottom navigation bar. By prioritizing the most-used sections, users can streamline their experience and make navigation faster.

60-icon

Drag-and-Drop Functionality

Users can drag-and-drop elements to reorder the navigation bar, having the flexibility to create a custom layout that fits their usage habits. This feature supports the modification of both the bottom and side navigation bars.

60-icon

Reset to Default Option

If users want to revert to the original navigation layout, they can easily reset the default configuration. This ensures flexibility while also providing a fail-safe if users prefer the default settings.

60-icon

Save Preferences

Once users customize their navigation settings, they can save their preferences to ensure that their chosen layout persists across sessions, providing a consistent and personalized experience every time they log in.

ExtraDuty-Customizable-Navigation

ExtraDuty. Customizable Navigation

Scalable Calendar

The scalable calendar in the ExtraDuty platform is a flexible and user-friendly tool designed to help officers, schedulers, and administrative staff manage their on-duty and off-duty schedules efficiently. The calendar offers multiple viewing options, allowing users to switch between different timeframes and layouts to suit their needs.

This adaptability ensures that users can manage both short-term and long-term schedules with ease, while also providing clear visual distinctions between on-duty, off-duty, overtime, and other events.

60-icon

Multiple Views

Users can toggle between daily, weekly, monthly, yearly, list, and timeline views of their schedule for flexible task management. The calendar allows zooming in for details or out for a broad overview, aiding in immediate and long-term planning.

60-icon

On-duty and Off-duty Indicators

Clear color-coding and labels distinguish between on-duty, off-duty, overtime, and other statuses like vacation or sick leave. This allows users to easily understand their commitments at a glance and avoid scheduling conflicts.

60-icon

Shift Planning and Time Off

Users can easily manage their shifts and request time off directly from the calendar. The system tracks pending requests, approved shifts, and time-off requests, helping users maintain an up-to-date schedule that reflects all changes.

60-icon

Timeline View

It provides a look at the schedule over multiple weeks, with sections showing verified/unverified shifts, earnings, job search availability, and overtime options. This view is useful for long-term planning, giving users an overview of all upcoming shifts.

ExtraDuty-Scalable-Calendar

ExtraDuty. Scalable Calendar

WEB BANKING

Design System

To ensure scalability, consistency, and efficiency in both design and development, we created a comprehensive design system to serve as the foundation of the new platform. To enhance flexibility and maintainability, we utilized tokenization.

Tokenization:

Tokenization involves creating design tokensβ€”basic visual attributes such as colors, typography, and spacingβ€”that can be referenced throughout the design system.

  • Color Tokens: We created a base color palette consisting of primary, secondary, neutral, and semantic colors, assigning each color a token that links directly to UI components throughout the platform. This tokenization allows for global updatesβ€”if the client wants to change the color palette, they only need to modify the lowest level of the color tokens, and all components across the platform will update automatically.
  • Typography Tokens: Typography tokens were defined for various text styles, such as headings, subheadings, body text, and labels. These tokens specify attributes like font family, size, weight, and line height. Similar to the color tokens, if the client wishes to change the font family or other typographic elements, they can make adjustments at the base level, and the changes will cascade across the platform. This guarantees uniformity and responsiveness, ensuring that text adjusts properly for different devices.
  • Numeric System: We developed a consistent numeric token system for parameters like spacing, padding, margins, and border radius. All design components are linked to this numeric system, ensuring consistent spacing and alignment across the platform. By modifying these numeric tokens at the base level, clients can make adjustments across the platform without having to update each component individually. This further enhances the scalability and flexibility of the design system.
  • Spacing and Grid Tokens: Standardized spacing units and grid layouts were created to ensure visual alignment and harmony across components and screen sizes.
ExtraDuty-Design-system

ExtraDuty. Design system

Atomic Design System:

We adopted the atomic design methodology, which allowed us to build a system from the ground up, starting with the most basic UI elements and progressively combining them into more complex components. This approach ensured a consistent and systematic development of UI elements across the platform.

  • Atoms: We began by defining fundamental UI elements like buttons, input fields, icons, and color palettes. These elements are the core building blocks used throughout the platform.
  • Molecules: By combining atoms, we created moleculesβ€”simple groups of UI elements functioning together as a unit. Examples include search bars (combining input fields and buttons) and form fields (labels with input areas).
  • Organisms: Molecules were then assembled into organisms, which are more complex components that form distinct sections of the interface, such as navigation bars, headers, and footers.
  • Templates and Pages: Finally, organisms were used to build templates and pages, defining the overall layout and structure of various screens within the platform.

We created a centralized library, complete with usage guidelines and interactive prototypes, to ensure the proper implementation of components by both developers and designers. Tokenization approach allows for quick global updates, making it easy to adapt and scale the platform as it evolves. This comprehensive documentation streamlines the workflow and promotes consistency throughout the platform.

ExtraDuty-Modes

ExtraDuty. Modes

OVERVIEW

Before
& after

ExtraDuty-Before-we-start-working

ExtraDuty. Before we start working.

ExtraDuty-Our-redesign-dark-mode

ExtraDuty. Our redesign, dark mode.

ExtraDuty-Our-redesign-light-mode

ExtraDuty. Our redesign, light mode.

UI decisions that make sense

11 images

RESULTS

OUTCOME

We started ExtraDuty project with a comprehensive audit of three standalone solutions our client had. The audit helped us to identify usability issues, inconsistencies, and areas for improvement. Here is what we discovered:

  • The mobile app struggled with visibility of system status, user control, and aesthetic design. Navigation was confusing due to a lack of headings and context labels, while hidden filters and the absence of an undo function hindered user autonomy. Additionally, the cluttered interface and overwhelming notifications negatively impacted usability.
  • The ExtraDuty platform faced challenges with consistency, error prevention, and ease of use. Inconsistent design elements disrupted workflows, and the lack of input validation led to user errors. Important features were hidden, requiring users to remember navigation paths, which increased frustration.
  • The OnDuty Platform suffered from cluttered navigation, lack of guidance, and inefficient workflows. The absence of clear labels, tooltips, and search functionality made the platform difficult to navigate, slowing down task completion.

These issues highlighted the need for a more unified and user-centered approach to streamline navigation, ensure consistency, and improve usability across all platforms.

By integrating insights from the audit and merging all three platforms into one, we achieved the following outcomes:

  • Successfully created a backbone of a new, unified platform that combines the functionalities of three separate systems into one cohesive solution.
  • Delivered an intuitive and efficient platform tailored to the needs of officers, schedulers, and clients, enhancing productivity.
  • Achieved a responsive, touch-friendly design, providing a superior mobile experience crucial for officers in the field.
  • Provided flexibility for users to customize their experience, catering to both conservative and modern preferences.
  • Established a scalable design system that ensures consistency, simplifies updates, and supports future growth of the platform.
  • Received approval from the client, who is eager to implement the new platform to enhance their services.

The client is very satisfied with how the product turned out. Our collaboration continues and at the moment we keep working on ExtraDuty platform making it even more feature-rich and user-friendly.

Read More

Explore articles from Artkai - we have lots of stories to tell

Join us to do the best work of your life

Together we advance the human experience through design.

Artkai site

End-to-end development agency that builds and improves digital products for enterprises, making experiences human-centric. We are represented in the USA, UK, Sweden, and Switzerland, with headquarters in Poland.

Β© Copyright Artkai 2024. All rights reserved