MFA Forms
Overview
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.
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.
Type
UI/UX, Web Design
Medium
Figma
UI/UX, Web Design
Medium
Figma
Background
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.Background
Background
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
Design System
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
User flows
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
Lo-fi Wireframes
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
Hi-fi Wireframes
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.
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.
Deployment
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!