Image for post
Image for post

A Form Was Never Just a Sheet of Paper

Escaping a black hole in form design

Perre DiCarlo
May 12, 2016 · 15 min read

“Applying online is like throwing a paper airplane into a black hole.” — UCLA Graduate Student

Forms have not been our favorite part of the web. Like the paper forms that inspired them, they can be difficult to read and seemingly impossible to fill out. This is where the new form building technologies target most of their attention. But in her metaphor, our student didn’t focus on the filling-out part. True, she spent time folding a paper plane just so, but then poof! It disappeared. Into what? A placeless place from which nothing escapes.

Porting paper forms to digital

We don’t tend to think of it like this, but the main gateway into anything a university does for its students, staff, or faculty is a form. Need a grant? Or paternity leave? Want to waive your right to sue for track-and-field injuries? Fill out a form. From admission to graduation, we collect our information onto pages — digital or otherwise — and push them into an abyss.

Image for post
Image for post
1984–2014: Application in circulation for thirty years. Note that since 2000, each person filling out this form had to cross out the pre-typed date: “19______”.

A student’s experience of a form

At the start, I conducted hour-long interviews with a half-dozen students to unpack their experience of a “form”. A student whom I’ll call Emma was in her third term in one of UCLA’s PhD programs. Emma’s father lives in Vietnam, and suffered an injury that required Emma’s temporary but full-time support.

Image for post
Image for post
No call-to-action. The page above is a result of a client-centered approach, that is, what staff/clients think students/users will need, and when: “They should read the policy first before downloading the form”. In usability studies, students were lost. The link to the form—a PDF—was effectively hidden, buried as a text link midway down the page after a policy grid. When students found the link, most clicked the section header in bold, above it, thinking that would launch the form. It looked more like a button than the link itself.
Image for post
Image for post

Unfolding a form: User Experience Flow

As I conducted interviews and usability studies with UCLA students, staff, and faculty members, I documented their experiences in user experience flows. These document the experiences of each person who touches a sheet of paper, and what each person does in response. In total, I mapped out three forms; the example here is the Leave of Absence form.

Image for post
Image for post
User Experience Flow documenting the three-to-five week life of a single form on UCLA’s campus. Beneath the paper’s surface hides a surprising amount of meticulous work by staff and faculty.

How staff and faculty members experience a form

Receiving a form from a student is no guarantee anyone gets to it ASAP. Staff and faculty have real, hard deadlines all year round. Tasks associated with pressing deadlines take priority, so it can be days before anyone in an often understaffed office has time to review a newly submitted form. The most hectic and busy period for most of the campus is admissions season, which has consequences for the unfortunate student who submits a form then: it’s going to take a while.

Image for post
Image for post
A cutaway (about 1/12) of a user experience flow for a one page paper form.

Without this button we lose 11.25 weeks a year

500 students submitted a request for Leave of Absence in 2014. Of those students, about 90% met all eligibility requirements. This meant that a full 450 students should have been green-lit to be approved easily—with almost no time taken from people to review them. Yet staff did the same research on all 500 students, not just the 50 who needed detailed consideration.

Image for post
Image for post
War Games: the classic 1983 film showed students hacking into their high school’s “mainframe” to inflate their grades. Today staff joke unironically about still having to navigate and review student records on screens like this.
Image for post
Image for post
“Check your eligibility”: One button can save an ineligible student weeks of uncertainty waiting to find out if she’s eligible, meanwhile saving University staff a ridiculous amount of lost time manually checking various databases.

The scope of UCLA’s Form Engine

  • Emma, our graduate student, securely initiates a request to do any number of things: see if she can go on leave this upcoming quarter, or attend a different university for a term, or pay reduced tuition during her final year.
  • Instead of staff and faculty members checking student records to see if Emma meets eligibility criteria, Emma presses a single button that securely checks her eligibility before showing her the form. If she qualifies, Emma can proceed, if not, she’s provided with the reasons in plain language, and what she must do to qualify.
Image for post
Image for post
Before file upload, during upload, and after. As our starting point, we designed the Form Engine for mobile. This enabled us to focus users only on the single task-at-hand, to remove clutter, to make the interactions lightweight.
  • The number of reviewers varies depending on this particular form’s policies, and it depends on the type of student Emma is. If for example Emma has a doctoral committee, her committee members are added.
  • Only the qualified, green-lit students are sent through to be reviewed. If any of the form’s policies have wiggle-room, then a non-green-lit student can request an exception so her file is flagged for more in-depth review.
  • A selected button expands with more info to tell students or reviewers what that choice means, and its consequences. So people unfamiliar with the policies learn what they need to learn in context, rather than referencing a second page or manual to understand mysterious terms.
Image for post
Image for post
Left: the “Outside Employment” button expands it to tell you policy within the button you chose, so you needn’t reference a separate document. Right: Same view, but because the student chose a retroactive leave in a previous question, this limits (conditional logic) her choices in the following question that you see here, disabling some buttons and adding additional description text.
Image for post
Image for post
“Look! No black hole.” On submission, Emma sees her status view (left) telling her the average time it takes, who is reviewing it now, and how many others will view it after. If Emma checks three days later (middle), she’ll see it’s now in for review by the Graduate Dean. The status view acts as a progress indicator.
  • Our Form Engine is built on a single codebase that updates all existing forms whenever a bug is fixed. When updated with a new function or eligibility check, the Form Engine allows that new feature to be turned on in any form previously deployed.

Where are we now?

In the Fall of 2015, we launched a new UX-driven, mobile-first, student-centered website capable of hosting our Form Engine.


Mission.org

A network of business & tech podcasts designed to…

Sign up for Mission Daily

By Mission.org

Mission Daily Newsletter Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Ben Leeds Carson, Irving Virvington, Terri DiCarlo, Derek Thorn, Jessica Woods, Chris Testa, and Frida DiCarlo

Perre DiCarlo

Written by

Head of Design – US, for WeDigital.Garden. Formerly: UCLA, 42 Entertainment, & Warner Bros. Author of Kick Litter and The Hippogriff Cookbook. @perredicarlo

Mission.org

A network of business & tech podcasts designed to accelerate learning. Selected as “Best of 2018” by Apple. Mission.org

Perre DiCarlo

Written by

Head of Design – US, for WeDigital.Garden. Formerly: UCLA, 42 Entertainment, & Warner Bros. Author of Kick Litter and The Hippogriff Cookbook. @perredicarlo

Mission.org

A network of business & tech podcasts designed to accelerate learning. Selected as “Best of 2018” by Apple. Mission.org

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store