Frontline Policies

Making safety accessible

A platform for human and civil rights activists to create and store bespoke security frameworks.

What did we do?

We designed and built a platform for human and civil rights activists that allowed them to create and manage security frameworks within their organisations, helping to keep their members safe and prepared in vulnerable situations.

Platforms

  • Web

Expertise

  • Strategy
  • UX/UI
  • Next.js
  • Full-stack development

Deliverables

  • Consumer web app
  • Admin control panel
  • Marketing website

See more

Graffiti on wall

Human rights activists need a way to stay safe on the frontline.

Open Briefing are a non-profit social enterprise that keeps human rights defenders and civic actors safe on the frontline, by offering mentoring services, resources, training and more.


One of their products allows organisations to create and download a series of frameworks to help them manage the security, safeguarding, and wellbeing of their members.


The current offering however, wasn’t flexible enough to meet the unique needs of organisations, or provide the guidance necessary for them to understand and implement these frameworks into their processes.

Creating a bespoke and flexible platform.

We partnered with Open Briefing to create a platform that worked with the users to tailor frameworks to their individual needs, and provide a hub for them to keep their framework documents updated and easily accessible.


Before we could make any assumptions about the needs of the people using the product, it was essential that we did our research.

User persona

Making the product automated but still tailored.

Each organisation has different needs, so Frontline’s offering has to be able to accommodate them.

Creating a completely bespoke set of frameworks for an organisation can take up to a year. Although immensely valuable, many organisations can’t commit the time or resources to it.

Automation can help keep overheads and turnaround times down, but might not cover every org’s unique circumstance. The goal for us was to strike a balance.

UI mockup

We created a solution incorporating bespoke questionnaires for each framework document, that allowed organisations to provide more context about their organisation and their needs, that we could then use to build a policy, procedure or resource document, tailor-made.

This meant that the documents created were highly relevant, with minimal edits required, and in cases where an organisation might want to include supplementary content to the framework documents, they can easily do this live on the platform, ensuring the documents every member had access to, were always the most up-to-date version.

UI mockup

Flexibility for admin creators.

The platform we built allows Open Briefing employees to:

  • Add and make changes to framework modules and documents independently, at any time. This enables them to work more efficiently, with more control and quicker turnaround times.


  • Create robust questionnaires to establish client needs, with different content types, branching and conditional logic for maximum flexibility


The end result is an experience that feels tailor-made, and more like a conversation than a cumbersome form.

UI mockup

The technology stack

  • xState with various complex state management challenges we utilised the xState library to create finite state machines for the document builder and signup and onboarding sequences.

  • Google Firebase one of the challenges of the project was to provide real-time editing similar to modern tooling such as Notion and Google Docs, by utilising Firebase as our backend infrastructure we could create something both real-time and scalable with minimal overhead tech costs.

  • NextJS formed the base of the codebase and we utilised its varying features such as server side rendering, api routes, dynamic routing, and caching.

UI mockup

We designed and built our reusable components from the UXUI design system using Styled Components that made up the this made expansion and maintainability straight forward and common components included things like cards, dropdowns, inputs, buttons and more.


This allowed us to work efficiently in both design and development, by creating a library that we could use for all app screens. This also set the stage for a uniform design for launch, and should make any future additions easy to implement for a consistent, seamless experience.


These components are developed as a NPM package which allows Frontline Policies to reuse patterns and easily build additional interfaces in the future.