Registration and Login

Registering for the system is done simply through Softr, which works like any other sign-up form. In the backend, Softr connects to the Airtable database using a secret Airtable key, meaning that when a new user signs up, their email and name are automatically created in Airtable. However, their password is not stored in Airtable for increased security.
The system features two types of registration:

  • Individual level: Users sign up by providing the required details (Forename, Surname) and login credentials (Email and Password). They will also need to select the hospital they are registering for. The hospital head of the chosen hospital will decide whether to accept them into the system, assign them a role (such as "Department Head"), and assign them to a department, or reject them.
  • Hospital level: Users sign up for the system by providing their Forename, Surname, and login details, and are then prompted to create a new hospital. The user is then assigned as the "Hospital Head" of the hospital in the backend through an Airtable automation, which uses a powerful trigger-and-action model. More information on Airtable automations can be found here.

It's also worth noting that most of the features in the system are accessible to specific user roles, and their level of accessibility is based on the hierarchy in the system. For example, a user with the "Department Head" role will be able to create new teams, but a user with the "Clinician" role will not. All roles, except for "Hospital Head," are assigned to a user when they are accepted into the system. These roles are stored in Airtable in the Users table with their information and are connected to Softr in the form of "User Groups."

prototype image

Form Creation and Management

This section is done by using custom code blocks in Softr which use Javascript and HTML. Data is sent and fetched from Airtable using the Airtable API. The API closely follows REST semantics, uses JSON to encode objects, and relies on standard HTTP codes to signal operation outcomes.

create Form image

Form Creation

This form creator can be found on the manage page which is only visible to the following users:

  • Team Manager.
  • Department Head.
  • Hospital Head.

We researched several options for form creation and decided that a custom code solution using Javascript will be the best solution as it allows for the most customisation letting us tailor the form specifically to the needs of the user. The form uses a component-based design with a Form Name field, a multi-select user selection and finally questions which are divided in 3 parts, question body(Text), Url and Standard associated with the question. Forms can be published to a smaller set of individuals as the form creator will be able to select specific clinicians in their team/department hospital. The forms need a minimum of 5 questions and can have unlimited questions by using the "Add Question" button which will generate a new question question section through the custom code.
After clicking submit data is sent to Airtable using the Airtable API and the form is automatically published making it visible to the users selected during creation.

Form Management

Users will be able to view the forms they created and the clinicians its currently published to from a table like the one shown below which is under the form creator in the manage page. The users will then be able to edit the form status(Publish/Unpublish) and also edit any of the questions and the Users the form is published to. This is done through a PATCH request which will only update the fields specified.

form management image

Self Report

The self report page is one of the most important feeatures of the system, this is where clincians would be able to enter "conversations" about their peformance by answering forms composed of Likert scale questions relating to standards and text based questions for Wordclouds. The self report form have a component based design with:

  • Likert Scale Questions and LikertScales (in the form stars)
  • Info Components(Blue information buttons to Standard related to question)
  • Enable and Barrier TextQuestion component asking the clinicians words describing how they are feeling
self report image

Statistics

The statistics functionality is implemented in Softr using the Chart.js library. In particular there are 4 main visualisation types:


  • Line Chart - Showcases progress timeline of individual quality standards
  • Bar Chart - Shows number of responses, aggregated by week
  • Doughnut Chart (Rapid View) - Shows percentage recap of the relevant standards
  • Wordcloud (implemented through custom code) - Showcases "Enablers" and "Barriers": keywords which are used by managers to monitor their team's mood
clinician Persona
clinician Persona

The user is presented with a selector button to choose the form they want to visualise data for, once selected, the data is queried from Airtable through its API. Once fetched, the data is then filtered by the user's hospital, department and team. Filtering based on the user's role is accomplished through Softr's integrated role management feature and is based on the associated account permissions.


Chart data can be exported using the "Download Chart" feature, this is implemented through Chart.js's API, the data is converted to a Base64 encoded image and allows the user to download the chart as a .png file.



User management

The users management feature is completely implemented by using Softr components - table blocks, forms and buttons. Their data source is Airtable database which is connected with a secret API key. Then tables retrieve data from a table of a selected base where the desired data is stored. Whereas, buttons and forms take data from the user and store it in Airtable also through the API key. To maintain the hierarchy of user management, the visibility of the Softr blocks was edited according to user roles.

manage tables image
manage forms image
manage buttons image

There are multiple user management operations:

  • Manage pending User Requests to join the platform (For Hospital Heads)
    • manage user requests image

    When a Hospital Head has to accept or reject a new user, they need to click on the pencil icon in the right corner of the record and assign a status, department or delete it. Then, the data gets automatically modified in the Airtable record as well.

    clicked on manage pending image

  • Manage Teams (for Department Heads or Clinicians & Department Heads)
    • manage teams image

    The teams are displayed in a Softr table block and a pencil icon on the desired record needs to be click in order to manage it. The fields that this block allows to update are team name, manager and members. Once finished, the corresponding record in the "Teams" table gets modified.

    clicked on manage teams image
  • Manage Users (For Hospital Heads)
    • manage users image

    User management is implemented when clicked on the pencil icon on the record. The fields that can be edited are only the status, department or deletion from the hospital. Once finished, the corresponding data is modified in Airtable automatically.

    clicked on manage users image
  • Add Team (For Department Heads)
    • add team image

    An addition of a new team in a department is handled by a Softr form block because this time more information needs to be sent and stored in Airtable. To add a new team, user needs to click on "Add team" and, when an empty table appears, needs to enter corresponding data. Once done, Airtables retrieves it and creates a new record in "Teams" table, containing information about the team name, manager, members.

    It is worth to mention that Softr form blocks have a feature to send hidden information about the logged in user, therefore additional information about about user's hospital and department names is stored in the new team record as well.

    clicked on add team image
  • Add Department (For Hospital Heads)
    • add department image

    An addition of a new department to a hospital is handled by a Softr button block. It takes the entered text and stores it in Airtable through the API key by creating a new department record.

    clicked on add department image