Redesigning Field Agent app for better usability

First version 2017. Second version redesigned in 2022

< Back to home

My Role:

Design system: creator and curator
Research: conducting interviews of the stakeholders, actual users of the MVP and understanding the pain points, translating the problems into tangible, actionable stories.
Solution: coordinated with BA team to understand new features, generate solution to tackle pain points and incorporate new requirements
Management: Team management, Timelines and effort estimation, feature prioritisation

PROBLEM STATEMENT

The field agents using the mobile app, linked to the location intelligence platform, had to use it while riding their vehicles to stay afloat in the cutthroat competition. With the increase in the size of mobile devices, this task was getting hard, making it more dangerous to use the app while driving. The problem statement was to make the mobile app quick and easy to use with one hand, while incorporating a few safety features.

ACHIEVED IMPACT

Improved one-handed use with bottom navigation and use of gestures.

Reduce the learning curve, potentially saving Multiple Days of effort in a 2 week training.

Predicting the next logical step and surfacing the CTA reduced the avg. time to action by 50%

Safer, as complex details surface only when no motion is detected.

Improved satisfaction and comprehension scores.

Improved aesthetics with standardization of front-end components and a design system

EXECUTION

Research

Interviewing the managers of the field agents to understand how field agents are trained.
Interviewing the field agents to understand their pain points
Understanding why the agents are using their phones in dangerous situations.

Change in User Profile

The app was designed to be used for;

- Point-to-point food delivery
- Job lifecycle < 60 min
- Linear job flow
- No input was necessary from the agent.

With the company's expansion, the app had;

- Multipoint jobs
- Job lifecycle lasting days
- Complex Job flows
- Agent Input like text and photos
- Leaderboards and Reports
- Team Management and Attendance
- Task Allocations
- Nudges and Alerts

This resulted in a convoluted app with bulky navigation and hidden actions

This is an example of how complex the menus had become. Since the `swipe from left edge` action would interfere with the `back` action on Android, users had to stretch their thumbs to access the menu. During the study, users were asked to find information related to their jobs and it took an average 7 taps for them to reach the desired page!

The complexity of the job lifecycle, resulted in the app rendering multiple actions of equal importance simultaneously. This was a result of the job statebeing mapped to a sales cycle. In sales paradigm, the job states can jump through all steps or go backwards depending upon the customer response.

This increased the cognitive load on the field agents and increased the number of accidental taps during the one handed operation.

Design System:

A design system for components was created to introduce consistency as well as enhanced accessibility. For this, various design systems like carbon by IBM, Material Design by Google, Ant Design system, and Atlassian design system were studied. A comprehensive design system with the specialized components needed by the application was created in Figma and published for the team

For the design system, the team came up with the design philosophy for the entire redesign exercise.

Mobile UI Design

Based on the fine-tuned design system and the concepts developed on paper, Miro was used to create the initial building blocks of the UI. These were then developed in figma with the new system in place. The designs tested for the look and feel and change in the user flows with a focus group within the interviewed users.

The menu was shifted from the Hamburger menu to the bottom tab navigation for easy single-handed operation.
Care was taken to surface the critical menu items while everything else went inside "More"

The app would welcome the field agent with the plan for the day
For field managers, the app will also provide information about the team's performance and attendance.

The tasks were designed for progressive disclosure. The first tap would give the user the essentials.
Swiping up will reveal the entire job card and other related information.
There were quick status options available on swipe as well, which were disclosed to the users.

Managers could see the timeline for each of their sub ordinates and had an option to quickly connect with them
Managers could also see the timeline for each job with the SLAs
Managers could see requests for leaves, late logins and mileage for reimbursements.

For unassigned tasks, managers could quickly assign the task to one of the agents
The agents are recommended based on
- Availability
- Stickiness
- Qualification
- Proximity

For new leads, the Managers or field assets could quickly create tasks from their apps, which would sync with the webapp.

Testing : Mobile

The Figma prototype was tested with the same set of users to understand if they could;

Understand the information presented to them and reach the desired page at least 20% faster
How many times the filed agents used the logical next step button, vs if there was an issue, how fast they could reach the desired option
Training was provided for quick actions on swipe.

CLOSING THOUGHTS

The system is under development. However, the initial feedback from the users we conducted the interviews with seemed positive. The final 🔒documentation can shed some light on the overall process.

More details can be found at dista.ai

< Back to home

Google Sites

Report abuse