How I Gave A Forgotten Scheduling Tool A Facelift And Found An Opportunity For The Use Of AI:
Scheduling Revamp for Sonar Software
Above: The original Schedule Job modal design.
Project Background
The “Scheduling” area of Sonar is primary used to schedule technicians who will visit the homes of customers and other sites in order to install and repair internet connection equipment. Despite their importance and regular use, it seemed like many of the key features of Scheduling had been an afterthought in the design - often largely hidden on various pages of Sonar’s Settings menu, the same way we saw in Communication Tools. In addition to this, modals that were intended to provide access to key functions of the Scheduling workflows were confusing and did not provide our users with the information they needed. This case study will focus on this specific problem (although others were and are still being addressed) - the “Schedule Job” modal.
This modal sought to provide users with a way of quickly scheduling jobs like installations and equipment dropoffs directly from the main “Jobs Table”. However, the modal itself followed and awkward flow and relied heavily on users remembering specific information about said job and technician schedules while scheduling (see video recording).
When a bug involving this modal was brought to my attention, it highlighted more of its existing usability problems, and inspired me to tackle redesigning this modal as my project for our yearly Hackathon. After presenting my project to the rest of the product and development teams, we decided to take the design further, and add it to our product roadmap.
Project Objectives
Key Tasks & Responsibilities
Reimagine this modal as a more visual, recognizable, and easy-to-use interface that requires very little mental effort for our users.
Foresee confusing or misleading areas when scheduling or rescheduling, fill those gaps.
Reduce the requirement to navigate away from this modal for key job or technician information needed for scheduling jobs.
Make this modal more pleasant to use in general.
Acted as sole researcher and designer throughout this project .
Conducted basic research to identify main areas of improvement for new design.
Experimented with various designs and collected feedback from other teams (ie. product, development, management, client-facing) within the organization throughout the process.
Created a design that blends new elements with established app design styles and standards in order to introduce an innovative but cohesive solution.
Incorporated a practical use of AI in this workflow.
Research
As mentioned, this project was originally a Hackathon project, and given the time restraints, research on this project was relatively rudimentary. Thankfully, I could draw on insights from other Scheduling-related projects I had worked on for Sonar, as well as a few additional avenues to guide the design for this modal.
Competitive Analysis
For initial inspiration, I looked at various examples of scheduling software, inside and outside of our industry. Scheduling UI patterns are common for most people to use, and typically use similar elements and workflows to accomplish the task (eg. a calendar view). Although scheduling jobs on Sonar is a much more complex workflow than a basic scheduler typically accommodates, it seemed like using something as familiar as possible as a starting point would make the workflow the easiest for users to recognize.
Customer Feedback
As usual, I was able to pull many comments from our customer feedback portal that touched on specific desired features, frustrations about the modal, and improvement suggestions for this modal.
Some main concerns were:
When rescheduling a job or changing the technician, user needs to remember original job or user details in order to reschedule optimally.
Modal uses an unfamiliar format / UI for scheduling, not always clear how to use.
Timeslot UI does not help guide the user to the best option, can be very long to scroll through in order to save selection.
Need ability to schedule jobs in the past (for retroactive reporting purposes).
Team Feedback
I also relied heavily on speaking with various team members who had either previously worked in roles within the industry that touched dispatch or scheduling, or those who had regular contact with customers and could speak to what were the specific painpoints and gaps in the workflow.
Ideation & Iteration
Despite the time restraints to arrive at version 1 (featured in video), the first version of this modal was very different from the original, much more visual, and provided a lot more information to reduce cognitive load for the user. However, I didn’t love the UI yet and I knew there was a lot to be done to flesh out this concept further.
Above: Excerpt of presentation of the first version of the redesign.
When we decided to formally take on this project, I wanted to include our other staff members in the ideation process for further iterations. As the only designer on the project, and one of two at the company at this point, I knew other staff members were eager to provide insight into specific workflows that they had potentially spent years working with.
I decided to start from scratch - the layout of the content on this modal. We had already identified that this modal did not have the content users needed, nor was the layout easy to follow. I mapped out what our current modal looked like, and created four additional options for them to vote on (they preferred the vertical layouts).
Images: (Top left) Original content and layout. (Bottom left and right) Some of the low-fidelity layout options presented to staff.
Below are a few of the many iterations of this modal’s design journey. I had noticed the prominence of using a monthly calendar when selecting a date to schedule, so initially, I wanted to provide a monthly calendar to select the date, and have users select timeslots from there. With the feedback of my product manager, I played around with a few versions of this idea.
Further feedback from the product and development teams led to further iterations, which moved away from the monthly calendar view for selecting dates, and focused more on selecting timeslots. Later iterations included changes and feature additions like:
Making job duration UI more obvious.
Making daily schedule panel wider and simplifying scheduled activity UI.
Ability to see which users have more/less availability before selecting them for the job.
Filters to narrow down the best timeslots for this job.
Ability to schedule dates/times in the past and clear UI differentiation between these and future dates/times.
Ability to see drive times between jobs.
Suggested timeslot selection.
Using a toggle instead of tabs for time zone view selection.
Above: Job Duration is a key piece of information when scheduling. In order to make this stand out more, I increased the icon and text size and simplified the layout and colours.
Above: In addition to expanding its functionality to allow users to confirm or move their scheduled job, I wanted to improve the readability of the daily schedule. To do this, I increased the width of the panel and reduced the text on each activity. Additional details would now be shown when hovering over the job.
Solution: Where Did We Land?
The final concept focused on simplifying this workflow for the scheduler. Ideally, the scheduler is presented with all relevant information directly on the modal. In addition to this, this design aims to assist in the scheduler’s decision making: they are given indications of the user’s availability, making it easier to decide which one to select, suggested timeslots, making it quicker to choose an option, and a visual representation of what that user’s daily schedule looks like, including drive times to other jobs, before confirming.
How Does It Work?
Schedulers are presented with the job information first, so they know what they’re scheduling, where the job is, and how long it will take.
They must then select a “user” (the current terminology used in Sonar to refer to technicians and other roles) from the first selector. The dropdown offers an indication of which users fill which roles (ie. typically technicians, but other roles can complete jobs as well), and who has the most and the least availability.
Suggested timeslots will automatically be shown, but schedulers can select additional criteria (Time of Day and Day of the Week) to further narrow the timeslot options.
Once a timeslot is selected, it is shown in that user’s schedule for that day, where it can be dragged to a different timeslot if the user so chooses. The date and time of the selected timeslot will update in the details panel at the top of the modal as they are selected.
Once a valid timeslot has been selected, the scheduler can schedule the job.
Planned Opportunities for AI
In later stages of the design planning, Sonar’s management, like many companies’, was thinking seriously about ways we could incorporate AI features in our product, ideally in ways that actually made sense for our users. How could we improve on features we already have that we know our users value with AI?
This feature provides a perfect opportunity for AI through its timeslot filters. Our original idea was to allow users to select filters that would narrow the timeslots suggested to them, thereby highlighting only the “most ideal” timeslots, and speeding up the process of selecting one. In additional to this, our we provided insight via our dropdown menu for “Assign User(s)” which users had the most / least availability, and thus, which would be the best options to select for a job.
We identified that using AI, we could use data from job types such as duration, drive times between jobs, and availability of users to narrow the results by default and reduce the input required by our users. In my proposed design, the default state of the modal would use AI to pre-select the best-suited user, as well as the most ideal timeslot. Users could of course further filter timeslots, change the selected user, and explore additional timeslots, but as long as this feature is toggled “on”, some of the work can be done for them.
This project is currently on our roadmap, so further iterations are sure to occur, but it has been identified as a key opportunity for Sonar to stay relevant and show customers that they are staying up to date with emerging trends and technology.