MFA Form Automator
Web application design
About the project (ongoing)
As a UX designer at Sandbox , Northeastern's student-led software consultancy, my role involves close collaboration with software developers to create a web application that streamlines the process of passing forms between departments and staff members at Boston's Museum of Fine Arts (MFA). Together with a fellow UX designer on this team, we strive to design this digital solution with a blend of creativity and innovation, while taking into account practicality and feasibility. Our aim is to deliver a user-friendly and efficient tool that meets the needs and goals of our client.
Role
UX designer
Duration
January 2023 - present
Tools used
PROBLEM
(My notes will go under here!)
Background
Currently, the paper forms that the MFA manages are passed between departments and positions in envelopes based on necessary signatures, approvals, etc. I mean, it works. But as you can imagine, it's not the most efficient system.
So, as a team of software developers and designers, our job is to build a dashboard that would allow 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.
The dashboard must display:
1. Forms the user needs to sign
2. Forms that are in progress
(meaning for forms that require
signatures from multiple people,
some have not yet signed it)
3. Forms that have been recently
completed
PROCESS
User flow diagram
With consideration of the client's goals, we mapped out the paths a user will take to complete their tasks.
This diagram was a useful reference, especially when communicating with developers and designing interactive wireframes.
Sketches
The result of our first brainstorming session!
Lo-fi wireframes
A lot of problem-solving was done throughout this process. Many issues came up along the way, but we worked past them through consistent communication with our client and
iterating on feedback from our team members, as well as fellow UX designers in Sandbox.
Examples of said issues include:
- What should be included in the
navigation bar? Is a navigation bar
even necessary?
- Which components should be
clickable? And at what point are
there too many navigational
options on a single page?
- How can we make the progress of
form completion clear to the user?
This project is still in progress-- there will soon be more to come!