iReportSource: Tasks Flow Design

Overview

While working as a full-time co op student at a safety management software company, iReportSource, in the spring of 2021, I was responsible for the design of many features across the mobile and web applications.

iReportSource offers a feature for its users to track the assignment and performance of safety tasks within the workplace. I was assigned to redesign the tasks functionality for both mobile and web.

Evaluating Existing Design & Outlining Objectives

Screenshot of existing tasks feature

The objective overall with this project was to streamline and simplify the functionality of creating, assigning, and performing tasks. More specific objectives are as follows:

  • Simplify Category & Reason into one field; Remove Notes & Priority sections as they are not frequently utilized by users.
  • When a user assigns a task as corrective action, pictures of any defective items should be visible to task assignee. Assignees should also be able to add pictures of any corrected items. Defective and corrected items should be easily identified between each other.
  • Users should be able to comment on active tasks—both task creators and task assignees.

User Insights & Details

The following are questions and concerns submitted by users to iReport’s Customer Success team, which prompted the redesign of the feature.

Mobile Tasks Redesign: Task Creation

Screenshot of task creation page

The task process can be divided into two parts: Creating a task and performing a task. I first tackled the simpler parts of the project brief when creating a task: condensing task questions and replacing the format with a previously redesigned format for single and multi-select questions.

In the previous version of the task functionality, all users could do was mark the status of the task and add notes. In order to allow users to understand more of the context of the task, the next step was to tackle the addition of photos.

The basic process for selecting and adding photos had already been redesigned, but I found it was important for the user to be able to differentiate between photos of a potential defect and photos of the fix. To eliminate a step for the task creator, all photos added upon creation are automatically marked as a defect. I also added a dropdown filter to allow users to see either all defect photos or all fix photos, depending on which end of the task they're responsible for.

Screenshot of adding photos to mobile task
Screenshot of adding photos to mobile task
Screenshot of task creation image page

Mobile Tasks Redesign: Task Performance

Once the task has been created and assigned, all of the basic information is visible to the performer and creator, as well as a new commenting feature to replace the inefficient notes section previously used. I updated the task status marker to a dropdown menu, with different text colors to reinforce the status. Any photos added to the task after creation are marked as correction photos.

Screenshot of assigned task page in new design
Screenshot of images page in new design
Screenshot of comments page in new design

Web Tasks Redesign

Translating the task functionality to web was a fairly simple process. I used the typical web form layout, and just had to configure what comments would look like on web.

Screenshot of task creation page in new design on webScreenshot of adding photos  in new design on webScreenshot of comments section in new design on web

Conclusion

This was an exciting project for me because I got to have complete ownership over how the comment feature looked and functioned, since we didn't have anything similar already in place. It was also a great opportunity for me to see how well the templated framework we had set up for web forms could be adapted for a slightly different function.