top of page

MFA Form Automator

Web app design

mfa_thumbnail.png

About the project (ongoing)

As a UX designer at Sandbox , Northeastern's student-led software consultancy, I collaborate closely with software developers to craft a web application that streamlines the transfer of forms within Boston's Museum of Fine Arts (MFA). We strive to infuse creativity and innovation into the design process while ensuring practicality and feasibility. Our goal is to deliver a user-friendly, efficient tool that aligns with our client's objectives.

Roles

UX designer (January 2023 - December 2023)

Project lead (January 2024 - present)

PROBLEM

(My comments will go under here!)

Background

Currently, the paper forms that the MFA manages are passed between departments and positions in envelopes to get necessary signatures and approvals. I mean, it works. But it's definitely not the most efficient system.

​

So, as a team of software developers and designers, our job is to build a dashboard that allows for a fully-digital workflow for completing forms. Employees will be able to log into the website with their MFA credentials, view any requests for signatures/approval that have been made, and edit the relevant form within the portal. Admins will be able to perform these functionalities, as well as create forms and assign employees to sign forms. Once an assignee signs a form, the originator of the form and the next assignee in the chain will be notified.

This project was completely new when I joined the team. In the very beginning, we were just given the problem, then had to figure everything out from there.

PROCESS

Mapping out the user flows

Our users fall into two categories: employees and admins. Employees will solely use this web app for signing forms, and admins have the added responsibility of creating form templates and form instances. This diagram maps out the web app's structure and illustrates how employees and admins will navigate it to complete their respective tasks.

This diagram served as a reference for the web app's navigation, which was a helpful reminder when things were getting more complex.

mfa_userflow.png

Lo-fi wireframes

The initial step for designing each page involved creating lo-fi wireframes. Mapping out the layouts at a basic level helped us strategically design how users would interact with the interface. The wireframes also allowed us to get client feedback during the early stages of the design process.

 

Below is the evolution of the main dashboard page's lo-fi wireframe, displaying the most recent forms categorized by status (to-do, pending, and completed). Our goal was to provide users with relevant information at a glance, while avoiding unnecessary clutter.

mfa_lofiiterations.png

Establishing visual identity

Building off the MFA Boston's existing visual identity system, we developed a version customized specifically for this web app.

SOLUTION

Dashboard

On the main dashboard, employees can see their latest forms, presented as cards with the form name and assignees of that form. They can also switch to a list view, where the forms are categorized by status.

mfa_dashboard.gif

View a form

On an individual form page, employees can see where they are in the order of assignees, and sign the form when it's their turn.

mfa_viewform.png

Create a form template (admin)

Think of a form template as the skeleton of a form.

mfa_createformtemplate.png

Create a form instance (admin)

A form originator can create a form by selecting from existing templates. Role titles for each required signature will be displayed, and the originator will choose an assignee from the dropdown menu.

mfa_createforminstance.gif

This project is currently in progress!

bottom of page