From Friction to flow

Stream­lin­ing a Crit­i­cal Process

The Story

Schools are legal­ly required to obtain par­ent autho­riza­tion which allows their chil­dren to go on field trips, and teach­ers are required to car­ry proof of this autho­riza­tion while on the trip.

Brook­lyn Wal­dorf School had been using a hasti­ly put togeth­er field trip autho­riza­tion form for over 10 years, but it was legal­ly dubi­ous, and the process itself was time con­sum­ing and labor inten­sive for all involved.

 

The Team

8 teach­ers
1 busi­ness man­ag­er
1 legal coun­cil
1 tech sup­port spe­cial­ist
Yours Truly

My roles were:

Project man­ag­er
UX Design­er
Developer

Strategy

Stake­hold­er dis­cus­sions revealed plen­ty of issues:

  • School admin­is­tra­tion was con­cerned about the legal expo­sure from the cur­rent forms, as well as hav­ing up-to-date par­ent con­tact infor­ma­tion and stu­dent health information.
  • Teach­ers were frus­trat­ed at the process as a whole — it took pre­cious time out of their already busy day, and required them to per­form mul­ti­ple steps — going from room to room, floor to floor, print­ing, scan­ning, and emailing.
  • Par­ents were annoyed at hav­ing to print out the form (“No print­er, “out of ink/paper!”) and pro­vide con­tact infor­ma­tion that the school already had.

My vision was to cre­ate a stream­lined dig­i­tal-based process which addressed all of these issues. I aimed to make tech­nol­o­gy do the heavy lift­ing when­ev­er pos­si­ble. Of course, stu­dent safe­ty was the heart of the mat­ter, and I kept this in mind through­out the project.

Suc­cess would be mea­sured by a reduc­tion in time spent on the task, qual­i­ta­tive feed­back from teach­ers and par­ents, approval from legal, and increased fre­quen­cy of updates in the Stu­dent Infor­ma­tion Sys­tem (SIS).

Discovery

User Interviews & Testing

I observed a teacher work through the pro­ce­dure of procur­ing signed field trip autho­riza­tions, not­ing the time it took to do each step. This par­tic­u­lar teacher was quite tech savvy. Many teach­ers at the school were less tech­no­log­i­cal­ly inclined, and had con­sid­er­ably more dif­fi­cul­ty dur­ing this process. So, 30 min­utes was on the fast side.

Process Overview

The process involved quite a bit of work on the teacher and par­ents part, involv­ing scan­ning, print­ing, writ­ing, and email­ing. Here is the breakdown:

TEACHER PROCESS

Here are the tasks the teacher need­ed to per­form in order to get the orig­i­nal per­mis­sion slip signed.

Note that the times reflect all the sub-tasks involved. For instance, “Print­ing out Paper Form” involves the sub-tasks of: open­ing a lap­top, log­ging in, open­ing the form, print­ing it out, walk­ing to the print­er room, and return­ing to the classroom.

TASKS & TIME

1. Print out paper form (6 min)
2. Fill out trip details (10 min)
3. Scan form to email (7 min)
4. Down­load form from email (2 min)
5. Send form to class list (5 min)

 

 

 

Total Time: 30 min

INTERACTIONS

Com­put­er
Web Brows­er
Email client
PDF Edi­tor
Print­er
Toner/ink
Paper
Pen/Pencil
Scan­ner with email capabilities

Total Inter­ac­tions: 9

PARENT PROCESS

This next phase includes what the par­ent had to do to ensure their child could go on the trip.

TASKS & TIME

1. Open email (1 min)
2. Print out attach­ment (2 min)
3. Review trip infor­ma­tion (5 min)
4.. Fill out con­tact infor­ma­tion (2 min)
5. Sign form (15 sec)
6. Hand form to teacher (10 min)

 

Total Time: 20 min, 15 sec

 

 INTERACTIONS

Com­put­er
Web Brows­er
Email client
Print­er
Toner/ink
Paper
Pen/Pencil

 Total Inter­ac­tions: 7

Content Audit

A review of the per­mis­sion slip con­tent showed that it was lack­ing in any legal lia­bil­i­ty lan­guage, and asked for redun­dant infor­ma­tion. Fur­ther­more, the school had recent­ly gone through a re-brand, and the form was out­dat­ed not only aes­thet­i­cal­ly, func­tion­al­ly. The school want­ed to be seen as mature and inno­v­a­tive; the form pro­ject­ed neither.

The school’s legal coun­cil rec­om­mend­ed that I down­load the field trip per­mis­sion slips from the NYC Depart­ment of Edu­ca­tion (DOE) and use that as a tem­plate so all our legal bases would be covered.

Teach­ers typ­i­cal­ly down­loaded this blank from the school’s intranet, then print it out — retriev­ing it from the printer

The brand­ing, aes­thet­ics, and usabil­i­ty of the form — let alone the over­all process — need­ed attention.

After the teacher filled-out the form, they scanned and sent it to their email. Then they’d send it to the class email list.

Note the hand­writ­ten loca­tion — this teacher could­n’t fill this part of the form out with a computer.

Par­ents received the form, would print it out, then take it to school and hand it to the teacher.

Note where the par­ent mis­tak­en­ly put the child’s last name in the “Stu­dent Name” field.

Analysis

Workflow, Personas & Storyboards

I sketched out a work­flow dia­gram, track­ing the state of the form as it gath­ered and trans­mit­ted information.

Then I cre­at­ed per­sonas based on 2 teach­ers and 2 par­ents. The sto­ry­boards were based on these par­ents and teach­ers mak­ing their way through the work­flow in dif­fer­ent scenarios.

The sto­ry­boards fur­ther informed the work­flow dia­gram, which then became the basis for the design.

An ear­ly draft of the process work­flow. I like draw­ing things quick­ly to get all the ideas there, then refine as needed.

Design

Prototyping

I used my work­flow dia­gram and the DOE form as guides to sketch out the indi­vid­ual screens of the form. These sketch­es became the basis of my prototype.

The pro­to­type was cre­at­ed on Form­Site. Form­Site — with its sim­ple user inter­face and robust fea­ture-set — was ide­al for this project. 

Build­ing in the log­ic and rules that pow­ered the form took some finesse. Cap­tur­ing and push­ing data from form-to-form, form-to-email, and form-to-PDF demand­ed focus and patience. 

Form­Site made pro­to­typ­ing, test­ing, and refin­ing a straight­for­ward process.

Typography & Writing

I focused on clean typog­ra­phy and friend­ly, con­cise writ­ing when cre­at­ing the forms, con­fir­ma­tions, and emails. 

User Testing & Demonstration

After I had a work­ing pro­to­type, I had a teacher test it, and refined based on my notes.

I then demoed the form for a group of teach­ers and solicit­ed feed­back, some of which I incor­po­rat­ed into the pro­duc­tion form.

Production

After exten­sive test­ing, pro­duc­tion was rather straight­for­ward. I sim­ply embed­ded the form into our web tem­plate with an easy-to-remem­ber URI. I then added the URI to our intranet and made an announce­ment to the teach­ers in email and in person.

The final prod­uct, from the teach­ers’ point of view is below:

Input:

Review:

Confirmation:

After the teacher sub­mit­ted the form, the par­ent process began:

Email to Parent:

Parent Review & Consent:

Confirmation with PDF:

The soft­ware filled out a PDF tem­plate and sent it via email to each par­tic­i­pant. I worked with the school’s tech sup­port com­pa­ny to con­fig­ure our serv­er and print­er so the form would print automatically.

The un-filled PDF tem­plate with legal lan­guage in place.

The form filled-in the PDF using the teacher’s input

Results

The school admin­is­tra­tion was more con­fi­dent on their legal foot­ing, and was also pleased with impres­sion of sophis­ti­ca­tion it gave to par­ents. Of course sav­ing teach­ers’ time was also a huge plus.

The front office saw an increase of par­ents updat­ing their infor­ma­tion when­ev­er a form was sent out.

Teach­ers were thrilled with this prod­uct. It freed up valu­able time and ener­gy, allow­ing them focus on their true work: education.

Par­ents were relieved to be able to give per­mis­sion for a trip quick­ly and from any­where, rather than embark­ing on a mini-project they were inclined to put off until the last minute.

TEACHER PROCESS

The tasks, times, and inter­ac­tions the teacher need­ed to go through in order to get the orig­i­nal per­mis­sion slip signed were great­ly reduced.

TASKS & TIME

1. Nav­i­gate to web form (5 min)
2. Fill out trip details (10 min)

Total Time: 15 min

Time saved: 15 min

INTERACTIONS

Com­put­er
Web Browser

Total Inter­ac­tions: 2

Inter­ac­tions elim­i­nat­ed: 7

PARENT PROCESS

Par­ents too, saved time and effort.

TASKS & TIME

1. Open email (1 min)
2. Review trip infor­ma­tion (5 min)
3. Review con­tact infor­ma­tion (30 sec)
4. Sign form (15 sec)

Total Time: 6 min, 45 sec

Time saved: 13 min, 15 sec

INTERACTIONS

Com­put­er
Web Brows­er
Email client

Total Inter­ac­tions: 3

Inter­ac­tions elim­i­nat­ed: 3

From “Meh” to Modern

Over­haul­ing a web­site after rapid orga­ni­za­tion­al growth

From Potential to Essential

Strength­en­ing the heart­beat of a community

jjpope@gmail.com
(917) 690‑4122