SaferMe · 2019

Tasks

The majority of Health and Safety is built around accurate and timely reporting. These reports include safety talks, job assessments, hazard identifications, etc. Oftentimes, once the report is made, actions need to be taken on that report. For example, if a worker reported a spillage, someone needs to go clean it up.

SaferMe’s original product offering was focused on making reports quick and easy. However, we didn’t have an easy way to create actions on those reports. In 2019 we decided to address this problem and created a new feature called “Tasks”.

Research

We already had an existing system that allowed users to assign reports to team members. In addition, we had a comment feature. We noticed that many of our users used these two features in combination as a way to assign actions to team members. We reviewed how they were used and formed a list of patterns.

Then, we followed up with those users to ask how they made decisions around actions and how they monitored the progress around those actions.

Now, we had a list of needs and asks. At this point, I brought together the engineering manager, the product manager, and myself to create a design criteria canvas. This is a great tool that allows you to build a clear strategy on how you will attack a feature; what is non-negotiable and what is nice-to-have.

Expectations

This was the first major project for me with the SaferMe team. I wanted to establish transparency and have the best communication from the get-go. To do so, I created a timeline.

It allowed me to set proper expectations, show the team my process, have early discussions, and learn more about design culture.

Five-week project plan from 18 March to 19 April: flows and rough sketches, hi-fi mockups and prototypes, usability testing with five customers, then refinement. Each phase lists its meetings and deliverables, such as Marvel prototypes and a design spec.
Project timeline

Design process

Step 1: User journey

First, we visualized what journey a user will experience. What are potential points of confusion? What are potential points of delight? How journeys can diverge based on actions taken? We had two different personas to cater to: a manager and a worker.

Journey map of a health and safety manager, from getting a report to creating actions and waiting for them to be done. Thoughts and emotions are marked along the way, from wondering whether they created the right action to relief when the last one is resolved.
Journey of a H&S manager
Journey map of a worker assigned an action. They review it, then either decline it or do it and mark it as done. Being assigned feels like extra work; closing the task feels good.
Journey of a worker

Step 2: Flow diagrams

Next, we created flow diagrams. These are great as they helped us understand how a user can move through our product. They also helped to discover missing pieces and raise technical questions.

Flow diagram for a task creator: from a report notification or the feed, open the report, start a task, add a name and description, assign someone and save. Open questions underneath cover naming, assigning and what happens after saving.
The flow for creating a task
Flow diagram of an assignee finding a task through the feed, a push notification, an email or a text message, then reading it before either doing the task or contacting its creator. Open questions cover deep links and declined tasks.
The flow for discovering a task that is assigned to you
Flow diagram of how admins, assignees and task creators get back to a task through the app, the feed, a report or an email, and which actions each role can take once it is open, such as editing, deleting or marking it complete.
Returning to the task you have created

Step 3: Identifying permissions

We had multiple roles in this project. Each role would get different permissions.

Permission matrix of task actions by role. Everyone can view a task. Task creators and admins can edit and delete it. Assignees and admins can mark it complete. Creators, assignees and admins can mark it incomplete. Anyone else can only view it. A user with several roles gets the highest permission of them.

Step 4: Hi-fidelity prototypes

And finally, designing every screen. As tasks always relate to a specific report, we placed the ability to create tasks within them, with the addition of a new tab called “Tasks”.

Creating a task on mobile
Viewing a task on mobile
Completing a task on mobile

All the screens above had to be replicated for SaferMe’s web app as well.

Completing a task on mobile
A few examples of the web experience

Step 5: Design spec

Lastly, I have produced the design specs to ensure our developers had a clear resource to rely on. I used a combination of Google Slides with Marvel (prototyping tool) to provide all necessary information on behaviours, styles, and information architecture.

Measuring

I wanted to ensure we learn early how our users utilize this new feature and in what ways we can improve it. SaferMe already used Mixpanel for some data, however, it was quite limited. To create accurate requirements on which data points we need to track, I first identified what funnels we want to create to learn about user behaviours. Then, I outlined specific metrics we needed to add to make these funnels possible.

Outlining funnels
Outlining funnels

The conclusion

The Tasks feature has been living in our product for a year. We are now looking into automating tasks to help our customers create actions without a need to do so manually.