/ Transformative Workforce Management App

Situation

As a part of an enterprise app suite for a utilities client, an app for supporting the tasks of hundreds of reps doing work in the field needed to be created. This initiative sought to replace an aged legacy Windows-based system.The legacy system was inefficient and clunky in field operations, with the outdated interface being archaic, and resulting in additional time tacked on to every field call to input data, often resulting in inaccuracies. Siloed systems gave Field Service Representatives (FSRs) limited access to critical customer data, resulting in less informed decision-making.

The Business Challenge

As a part of an enterprise app suite for utilities, an app for supporting the tasks of hundreds of reps doing work in the field needed to be created. This initiative sought to replace an aged legacy windows-based system with an innovative iPad app, delivering a user-friendly interface with end to end work order capability directly at their fingertips.

• Update and modernize the app experience for FSRs in the field
• Build a tool for automated streamlined scheduling
• Provide more access to customer data to FSRs in the field
• Be able to better track metrics around field operations

The development of a new iPad app aimed to modernize workflows, implement smarter scheduling, and provide real-time access to essential data—enhancing data-capture accuracy, reducing call times, and achieving operational excellence, all within a few taps. Coming into the project, the client had already established a set of initial requirements and some rough design direction.

The Audience

Field service representatives (FSRs) executing work in the field and FSR supervisors

Target clients:

• Water Providers
• Natural Gas Providers
• Electricty Providers

My Role

• Creative direction
• Sprint planning
• Ad-hoc research
• Hands-on UX
• Interaction design
• Rapid prototyping
• Stakeholder management
• Hiring, on-boarding, and resource management

My Approach:

Build trust with the team

As a new team member, I worked closely with stakeholders to build trust coming into the project, the client had already established a set of initial requirements and some rough design direction. This was a complex project with an aggressive timeline requiring me to quickly understand the ins and outs of the utility business and the business needs driving the requirements for the app. To build trust with my various stakeholders, I took every opportunity to collaborate very closely with them — meeting regularly, initiating ad hoc interviews, asking essential questions, and riding along in the field with the reps directly to gather data about their day-to-day working process and overall motivations, as well as frequently vetting my design work with them. Through my diligent approach to understanding the business needs, and listening to my stakeholders concerns, I quickly gained their trust, and became their go-to resource for helping them solve UX problems.

Gather insights, wherever the opportunity arose

A formal research study for the project was not feasible due to time and resource constraints. However, I took a proactive approach by conducting ad-hoc research directly with the field service representatives (FSRs). Through ride-alongs, impromptu interviews, and informal feedback sessions, I gained valuable insights into their daily workflows, challenges, and preferences. These interactions provided a hands-on understanding of the reps’ needs and allowed me to tailor the design more effectively to their real-world tasks. This direct, iterative engagement ensured that the solution was grounded in the actual experiences of those who would use it most.

Streamline field work with smart, intuitive visual design

In considering the design for the app, my approach was driven by four core principles aimed at optimizing usability, leveraging AI, and presenting information in a way that reps could immediately understand and act upon.

First, I focused on making the UI do as much work for the rep as possible. With the integration of AI, I sought to reduce some of the burden placed on the user by automating routine tasks and intelligently surfacing key information and choices. AI-powered suggestions and predictive functionalities were woven into the interface, offering reps actions and data tailored to their specific work orders, all while maintaining their control over final decisions. This allowed the system to act as a true assistant, minimizing repetitive actions and streamlining workflows.

Secondly, I prioritized the visual representation of key real-world objects. Field reps deal with complex, tangible assets like meters, premises, and other equipment in their daily work. To enhance usability, I designed a visual language that reflected these real-world elements, ensuring that reps could immediately recognize and understand the tasks at hand. By bridging the gap between the digital interface and physical environment, the resulting UI was intuitive and familiar.

Thirdly, I aimed to create an interface that was as approachable as a consumer app without being overly embellished. This meant using design to express powerful functionality in elegant and simple ways, making the app easy to navigate and visually engaging without adding unnecessary complexity. Drawing inspiration from popular consumer applications and often social media-esque conventions, I focused on delivering a familiar and welcoming experience that empowered reps to accomplish their tasks.

Lastly, the visual expression of data played a crucial role in my design approach. Given the vast amount of data becoming available to FSRs—from meter readings to customer history—it was important to present this information in a digestible, meaningful way allowing reps to grasp insights at a glance, make informed decisions quickly, and act on data-driven insights in the field.

Solution:

The dashboard was tailored to address the needs of the rep

Needing particular information available on the main app screen, the dashboard was designed to prioritize the rep's needs for a quick view of key information that was important to them. Seeing the nature of the work in the card view, work priority, visualizing the overall route for the day spatially, scheduling functionality, accepting work orders, and accessing work order information were key, and these items were given visual priority and were designed to be highly accessible from the dashboard. Other secondary and tertiary functions were tucked a tap or two away.

The design leveraged visual analogs to signify key objects

Wherever possible we implemented the strategy of using visual analogs to represent key real world items in the app. Visuals were created for tasks involving meters, premises, etc., enabling a visual connection and affordance to help make the app more intuitive. To make deeper use of this strategy, we developed ways of visually applying status indicators and actions using color and pictographic symbols where applicable. This visual approach reduced reliance on text, allowing FSRs to work faster and with greater accuracy.

As the complexity use cases/edge cases increased, it was important that we make the experience as simple and intuitive as possible for the end user — leaning more on visual recognition and familiarity as opposed to simply text.

Work order cards were critical for rep decision making

The design of the work order cards played a pivotal role in enabling FSRs to efficiently manage their day, particularly when building their schedule. While AI assisted by partially assigning work orders, FSRs retained ultimate control over their schedule and needed at-a-glance insights to make informed decisions quickly and effectively.

FSRs needed a concise yet comprehensive overview of each work order to determine which tasks to prioritize. The cards were designed to convey essential information at a glance, including:

• Job priority: Priority levels were prominently displayed to help FSRs determine which jobs required immediate attention.
• Nature of the job: Clear icons and brief descriptions allowed FSRs to immediately understand the type of job, whether it was routine maintenance, repair, or an urgent service.
• Meter size and status: Visual indicators conveyed the size of the meter and its operational status, ensuring FSRs could prepare accordingly.
• Special requirements: Jobs that required additional resources, such as a two-man team, were highlighted with specific icons and symbols to ensure proper preparation.
• Premise services: Information on the services provided at the premise, such as electricity, gas, or water, was easily accessible on the card.
• Special alerts: Notifications such as hazards or unique circumstances were made highly visible, reducing the chance of overlooking critical details.
• Time window requirements: The cards included the required time window for each task, allowing for better scheduling and ensuring that FSRs met customer expectations.
• Location and travel time: To optimize route planning, travel time and distance were included on the card, helping FSRs make efficient scheduling decisions.

Designing cards that contained all this information in a single, readable format was challenging. Early iterations struggled with overcrowded layouts, reducing readability and visual appeal. Additionally, piecemeal requests from the field team for new features complicated the design process.

Recognizing the need for a holistic solution, we dedicated a sprint cycle to rethinking the card design from the ground up. This process focused on prioritizing clarity, and improving the overall visual hierarchy, resulting in a cleaner, more organized layout. Textures and shapes were introduced to support accessibility for color-blind users, ensuring that all FSRs could easily interpret the information.

Addressing accessibility: designing for color blindness

Given the high prevalence of color blindness among the FSR workforce, the design of the cards had to be inclusive and accessible. Instead of relying solely on color-coded information, we introduced:

• Textures and shapes: Different textures and geometric shapes were used to represent various job statuses, priority levels, and alerts. This allowed all users, regardless of color vision, to differentiate between important information.
• Clear iconography: The use of bold, easily distinguishable icons helped convey critical details without ambiguity.

The final design not only provided FSRs with the information they needed at a glance but also dramatically improved the efficiency and accuracy of their scheduling decisions. Feedback from the field team confirmed that the new card design was intuitive, reducing time spent on task organization and enhancing overall productivity.

A guided process was designed for executing work orders

The app provided an end-to-end experience for the rep — better managing their schedule with the power of AI, starting a work order, turn by turn directions to the job site, logging activity, and completing a work order. Once starting a work order, a step by step process was initiated, guiding the rep through completion of the work order. Many edge cases had to be considered for different customer and situational scenarios. AI on the back end was driving the identification of needs for preventative maintenance and customer and revenue issues, resulting in the creation of work orders assigned through this app. The overall design strategy was to present AI-powered suggestions and recommendations while allowing for ultimate user control.

The app’s work order process was designed to streamline complex tasks while empowering field service representatives (FSRs) with intuitive, guided workflows. The premise view was a key element of this, offering an interactive map that displayed the location of meters and other essential assets at the location. This view not only made it easier for FSRs to navigate but also enabled them to actively contribute to data accuracy by uploading images or updating premise information in real time, reducing reliance on outdated data.

In the meter view, we designed a visual analog that represented meters in a highly familiar way, giving the reps meter information and allowing FSRs to quickly capture data or perform meter-related tasks. This included seamless support for scenarios involving multiple or dual meters, and a streamlined process for adding or replacing meters. This design helped reps focus on the job at hand without getting bogged down by having to parse through monotonous prosaic interfaces.

The field activity section allowed reps to capture every action they performed in real time, creating a dynamic log and timeline that tracked progress across the work order. With the intergration of AI, the app could intelligently suggest actions based on the work order and specific location, speeding up repetitive data entry while ensuring the rep maintained full control. This smart assistance balanced efficiency with flexibility, enabling reps to override suggestions and make judgment calls as needed.

Once the order was complete, the finalize view allowed FSRs to input final notes, flag work orders for back-office review, or even generate follow-up tasks. AI was used to mine these final notes for tribal knowledge collection, building a continuous loop of learning that could enhance future processes and train the learning models.

Lastly, after the work order was submitted, a feedback mechanism was provided for reps, where they could rate the work order, provide insights on the quality of information, and review key performance metrics like time efficiency and task accuracy. This feature encouraged transparency and continuous improvement, creating an invaluable feedback cycle between the field, the organization, and the system.

The design of the app connected users to more information than ever

An innovative aspect to the overall business transformation happening was an unprecedented connection of data throughout the organization. Within this app, the rep had access to data about the customer, assets, usage, premise history, and a variety of other relevant data from other apps and sources at their fingertips. These integrations provided access to information and capability the reps did not have prior. These data integrations necessitated a number of data visualization screens to be thought through and designed.

Empowering reps with data access

By connecting various systems and centralizing data, the app allowed FSRs to work more efficiently and make informed decisions on the spot. Whether retrieving customer history, viewing service details, or accessing asset information, the app presented all this data at their fingertips, significantly enhancing their ability to resolve issues independently.

Key data types made accessible to reps included:

• Customer data: Access to current and historical service information, previous work orders, and service requests helped FSRs better understand the context of each job.
• Asset information: Reps could quickly retrieve meter specifications, location, status, and maintenance history, enabling more accurate assessments in the field.
• Premise details: Information about the services provided at each location—such as electricity, gas, or water—was readily available to ensure reps had a complete overview of the job.

Premise history timeline for deeper insights

To further empower FSRs, a premise history timeline was introduced, offering a chronological view of all activities related to a particular premise. This timeline displayed past work orders, maintenance tasks, service disruptions, and customer interactions in a visually digestible format. It provided a comprehensive picture of the premise’s history, helping FSRs understand recurring issues, previous fixes, and any long-term concerns with a given property.

This timeline became an invaluable tool for troubleshooting, as reps could quickly identify patterns or past problems that might inform their current task. Whether they were addressing a persistent issue or confirming that past repairs were completed successfully, the timeline ensured that FSRs were fully equipped with historical context.

Data visualization for easy interpretation

With the large volume of data available, ensuring it was presented in a clear and digestible format was crucial. Instead of overwhelming users with raw data, the app employed thoughtful data visualization techniques to present complex information intuitively.

• Visual hierarchies were established to prioritize key information, allowing reps to see the most critical data at a glance, such as job priority, meter status, and past service issues.
• Icons and color coding visually represented the status of tasks, alerts, and key metrics. Recognizing that many FSRs were colorblind, we expanded the design to include patterns and textures alongside color coding to convey important statuses without relying solely on color.
• Graphs and charts displayed usage history, work order timelines, and performance metrics, enabling reps to quickly spot trends or outliers in the data.
• Interactive elements allowed FSRs to drill down into more detailed data when necessary, without cluttering the main interface.

Connecting data for seamless decision-making

By designing for both high-level overviews and deeper data exploration, the app allowed FSRs to navigate effortlessly between summary views and detailed insights. This flexibility was essential when dealing with urgent tasks or complex maintenance requests that required fast decision-making. The premise history timeline, combined with real-time data access and intuitive visualizations, empowered FSRs to be more self-sufficient, reducing dependency on office staff and improving their efficiency and accuracy in the field.