Mosafe Card Stack

Most transport and logistics teams were still using paper forms and PDFs for almost all safety management processes from induction and training to vehicle checks and issue reporting. These processes were not only time consuming for workers but also difficult to manage and recall.

The requirements of the card system were determined through exploring the various use cases it will be intended to solve. We gathered documentation used internally from businesses operating in the transport and logistics industry along with speaking to various individuals from managers to drivers on how they manage these processes. The processes could be broken down into 4 key areas; onboarding, training, routine and reporting. This helped organise the tasks the system would need to accommodate. We found that most tasks could be broken down into steps. We broke down each task into steps and mapped them out to identify common trends. Each step consisted of a title and a response. The response was either asking for information or delivering information.

After breaking down existing business processes into smaller parts it was clear that the new system should focus on reducing the time spent on paperwork and increase the engagement in safety tasks to reduce accidents and maintain compliance. By breaking these more complex tasks down into more simple achievable tasks people are more likely to finish it. This led to the principle of 1 action per step. It was also important to consider the benefits of limiting the number of available choices per step to increase efficiency.

The high level problem we initially focused on was “how might we enable all safety tasks to be completed through one consistent format?” To answer this question I began better understanding the current processes businesses utilise for safety management and break them down into common parts.

A Card Stack is a checklist of actionable tasks ordered by urgency with the goal of clearing all cards from the stack. Each card is an interactive story and can display training videos, handle documents or gather custom information. To create this mental model I designed a Card Stack UI and interaction pattern that implies each task exists within a card. It was important for the card to afford tap functionality and the Card Stack swipe functionality for easy navigation. I explored various layouts, transitions and interactions, and even used a deck of cards to help with this process. This was an iterative process involving observing users interact with prototypes.

After better understanding the structure and functionality of a card I designed a component system to organise the various moving parts of a card and streamline development. Each component was linked to a page type which handled various use cases such as inputting address information. This enabled versatility for Mosafe and businesses to customise cards to specific business needs as we found not all business processes were the same across common tasks. Consideration of building the cards as an admin in a UI was important at this stage of design. Atomic Design System principles were utilised to structure components from inputs and labels to pages.

After building the first version of the card system we continued to be test it in real work environments. Myself and the product manager went to Australia Post depots at Pinkenba and Redbank to observe how drivers and managers interacted with the card system in the app for common safety management tasks such as vehicle checks, inductions and toolbox talks. We followed up testing with questions to better understand their comprehension of what they were being asked to do, what tasks were more important, when they knew everything was up to date, and what their thoughts on the experience were. Most of the feedback was positive but one big area for improvement was the content and it’s relevance to the topic and audience. Some other interesting feedback was that some of the page types were too easy to complete which can be dangerous for important steps in a task. This is where we looked to explore introducing some friction into some steps of a card.

There were many future considerations made when designing Card Stacks such as recording errors, introducing logic, using events in automations, building cards, card results, and using variables for linking user profile details.