Card Builder

To truly centralise workplace safety activity, Mosafe needed to give customers more control over how safety tasks were created and managed. Card Builder was designed to:

• Enable businesses to edit templates and create custom cards
• Reduce the time our internal team spent building cards for clients
• Lower customer support requests related to card changes
• Provide a modular system adaptable to any safety workflow from inductions and training to daily inspections
• Help businesses remain compliant by keeping all safety documentation consistent and accessible

Prior to Card Builder, customers relied on Mosafe’s team to create and customise cards, resulting in delays and high support volume. Many businesses were also juggling paper forms and spreadsheets stored across individual devices, creating inefficiency and compliance risks. By exposing the underlying card system, with its established input types, statuses, events, flags, and conditional logic directly to users, we had an opportunity to give them autonomy and reduce friction in digitising safety processes.

Creating safety tasks is not one-size-fits-all. Businesses needed flexibility to:

• Start from scratch or adapt existing templates.
• Create complex workflows with conditional logic and flags.
• Build directly on desktop or mobile in warehouse environments.
• Maintain confidence that the card their staff received would look and function as intended.

The challenge was to design an editor powerful enough to handle these needs while remaining intuitive for non-technical users.

Through research and early testing, we established guiding principles for Card Builder:

• Accuracy: Provide a true-to-delivery preview of what staff will see.
• Consistency: Maintain the existing card structure and input logic.
• Mobile parity: Make the builder just as usable on mobile as on desktop.
• Flexibility: Support different workflows (from templates or scratch).
• Clarity: Ensure structure is understandable at a glance.
• Efficiency: Direct canvas editing, drag-to-reorder, inline text editing.
• Focus: Encourage concise content creation by limiting visual editing to within card boundaries.

We explored multiple directions for the editor experience:

• Direct editing vs. sidebar editing: Ultimately, we combined both enabling text/content to be edited inline while properties were adjusted in a sidebar.
• Page navigation: Tested vertical vs. horizontal. We chose horizontal navigation to align with the native app, ensuring familiarity and easier mobile use.
• Input types: Designed for consistency, so each input behaved within a repeatable system of properties and options that aligned with our users expectations.

We validated Card Builder prototypes in both office and warehouse contexts, focusing on:

• Understanding: Could users grasp the concept of creating a card and see it’s application possibilities in their business?
• Efficiency: How quickly could they add content and adjust properties?
• Confidence: Did they feel comfortable moving from paper/excel to cards?

Tasks included:

• Converting their induction forms to a card.
• Building a training card from scratch.
• Editing a vehicle check template on the fly.

Insights from these tasks directly shaped improvements to the editing flow and navigation.

Once the core layout and interactions were defined, we finalised components for consistency across the product. The card structure was broken into reusable parts (page structure, card structure, input types, properties), ensuring parity with how cards appeared in the native app.

Real-time saving with web sockets was out of scope for the first release. To handle saving, editing, archiving, and multi-user considerations, I worked closely with engineering to establish a versioning system. This ensured users could manage drafts, published cards, and historical states without data loss and a clear understanding of what they were changing.

• Businesses began creating their own cards, reducing reliance on Mosafe’s team.
• Support tickets for card creation and edits decreased significantly.
• Editing existing cards was quick and intuitive; creating new cards from scratch took longer but users could see the long term benefit and security.
• Workspaces saw an increase in total cards, reflecting broader adoption and higher product stickiness.

Looking forward, we identified opportunities to enhance Card Builder with:

• AI-powered creation: Convert PDFs/photos into cards, or generate cards from prompts. A prototype was designed and built for this.
• Contextual assistance: Use existing cards and templates as inputs for faster setup.
• Collaboration: Real-time saving and multiplayer editing for teams.
• Marketplace: A shared library of cards for common use cases.