Helen Miao

MFA Forms

As a UX/UI Designer in Sandbox @ Northeastern, I collaborate with a team of developers, a project lead, and another designer on Boston's Museum of Fine Arts (MFA) Forms, a web application that allows MFA employees to smoothly work on formerly paper-based forms in a fully digital workstream.
UI/UX, Web Design



The painpoint: Currently, the paper forms that the Museum of Fine Arts in Boston, MA manages are passed between departments and positions in envelopes based on necessary signatures, approvals, etc. This includes forms like badge requests, hybrid/remote work agreements, and IT exit forms. As you can imagine, this is not an efficient system.

My team’s goal: build a web application that allows for a fully-digital workstream for all such 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. Once a user completes that “action item”, it should either make a new request to the next relevant user/position, or (if the chain is finished), notify the relevant user that the form has been completed with the finalized PDF.  

Design System

Our color palette and type is based off of the MFA’s current brand guidelines. Due to legal limitations, we did not use their custom-made font and instead opted towards a similar one, Hanken Grotesk.

User flows

Before diving into the wireframes, my team and I created user flows to map out how users should navigate the site and perform actions like creating and signing forms, as well as how form instances are generated after each assignee signs it.

Lo-fi Wireframes

When creating the base of our design, we decided to go with a card and list view, allowing users to easily select forms to view and/or sign, as well as see who was associated with that form.

Hi-fi Wireframes

Dashboard and a Completed list view:

Employee View - Form Submission:

On a form submission page, employees are able to upload their signed form, submit it, view a history of the previous signed versions, and download any versions.

Admin View - Form page:

Similarly, when viewing a form, administrators are able to view the current state of signatures, as well as edit who is assigned to sign that form.

Admin View - Create Form Template Modal:

Creating a form template is one of the core flows of the site. This is where administrators upload the base form to be used, set names and roles of the employees that will need to sign it, and set the order that the form will be signed in.

These templates are then re-created by other users as form instances

Admin View - Create Form Instance Modal:

Another core flow is creating a form instance. This is where employees can create an instance of a template and actually assign specific employees to sign a form.

Though this project is ongoing, you can view the deployed site here!
To enter the site, type in these credentials:
Email - email1@gmail.com
Password: any

This project is still a work in progress. Currently, I am working on refining the wireframes for form template creation and viewing forms, as well as a admin-view of the dashboard.

More is coming soon!

@ 2024 by Helen Miao   ☀ Boston, MA & San Jose, CA

︎       ︎       ︎