From “Meh” to Modern

Over­haul­ing a School Website

The Story

Brook­lyn Wal­dorf School hum­ble begin­nings were four par­ents talk­ing on a street cor­ner. Over the next ten years, it rapid­ly became a mul­ti-mil­lion dol­lar not-for-prof­it orga­ni­za­tion with a thriv­ing com­mu­ni­ty, housed in a his­toric building.

The BWS’s first web­site was built by a par­ent with high hopes, but lim­it­ed exper­tise, leav­ing behind a heav­i­ly cus­tomized, unsta­ble Word­Press theme that was con­tin­u­al­ly hacked. To secure and sta­bi­lize the site, we port­ed it to a pro­pri­etary CMS, built by the school’s Stu­dent Infor­ma­tion Sys­tem (SIS).

Though the web­site was now sta­ble and secure, it was locked in to our ven­dor’s clunky CMS, and was in dire need of an com­plete over­haul in all aspects.

The Team

1 graph­ic design­er
3 copy­writ­ers
1 web devel­op­er
1 mar­ket­ing pro­fes­sion­al
1 board rep­re­sen­ta­tive
2 teach­ers
Yours Truly

My roles were

Project man­ag­er
Infor­ma­tion archi­tect
Con­tent strate­gist
Photographer

Strategy

Dis­cus­sions with stake­hold­ers revealed plen­ty of oppor­tu­ni­ties for improve­ment, including:

  • The school was under­go­ing a re-brand, and the site need­ed to reflect the new aesthetic
  • Enroll­ment in the mid­dle school was low
  • The school was tran­si­tion­ing to a new SIS, but the site was under the old SIS’s control
  • Inquiries from prospec­tive par­ents had plateaued
  • Updat­ing the site was dif­fi­cult for school staff

Discovery

Dis­cus­sions with users showed that the site seemed “dat­ed” and “not togeth­er,” mak­ing a poor first impres­sion of the school.

A review of the con­tent revealed:

  • The infor­ma­tion archi­tec­ture, nam­ing con­ven­tions, and menu struc­ture could all be clearer
  • Inter­nal infor­ma­tion for par­ents was placed in the pub­lic “Con­tact” sec­tion of the site
  • The tone of the copy was incon­sis­tent, and often dense.
  • The enroll­ment process, though rel­a­tive­ly sim­ple in real life, seemed daunting
  • There were sev­er­al “com­ing soon…” pages 

Bounce rate on mobile was high for obvi­ous reasons.

On the orig­i­nal desk­top site, we found the nest­ed menu struc­ture to be an unnec­es­sary bur­den. We also found that the over­all site archi­tec­ture could be improved.

An ana­lyt­ics review showed that users:

  • Were increas­ing­ly using the site on mobile devices, but spent longer time on the site while using a desktop
  • Were most inter­est­ed in: Ear­ly Child­hood, School Cal­en­dar, Tuition, Enroll­ment Process, Photos
  • Bounced 72% of the time

The most vis­it­ed links for com­mu­ni­ty mem­bers were the cal­en­dar and resources.

The team exam­ined sev­er­al com­peti­tors’ web­sites. We liked the clean looks, and smart, friend­ly, con­cise lan­guage that con­nect­ed to their tar­get demo­graph­ic. We eval­u­at­ed sev­er­al web plat­forms. In order to meet the school’s cur­rent and future needs, we decid­ed to port the site to Word­Press and devel­op a cus­tom theme. This

Analysis

Personas & Use Cases

Since the admis­sions depart­ment had a deep under­stand­ing of prospec­tive par­ents,  I asked them to cre­ate two per­sonas so the team had an audi­ence to gear our con­tent towards. Based on our data, we estab­lished sev­er­al ide­al use cas­es, most of them end­ing in some form of con­tact with the school — prefer­ably reg­is­ter­ing for a school tour.

I cre­at­ed two per­sonas of cur­rent par­ents. It was clear to me that, besides the pub­lic cal­en­dar, the major­i­ty of infor­ma­tion for cur­rent par­ents should be eas­i­ly acces­si­ble and orga­nized in the new Stu­dent Infor­ma­tion Sys­tem, with per­sis­tents links to each through­out the pub­lic-fac­ing site.

Design

Information Architecture

I used the card sort­ing method to orga­nize the site — begin­ning with what was on the cur­rent site, and adding pages the team agreed we should imple­ment. I was able to elim­i­nate some pages, com­bine oth­ers, and re-imag­ine the major sec­tions of the site.

These stacks of cards were used as a basis of a site map draft made in Omn­i­graf­fle: 

I pre­sent­ed this site map to the team, who helped with fur­ther con­sol­i­da­tion and nam­ing of sec­tions, putting empha­sis on the edu­ca­tion itself.  We put our ear­ly child­hood, grades, and mid­dle school sec­tions front and cen­ter; and rolled the pieces of the “enrich­ment” sec­tion into their respec­tive grades. “Events” became “Cul­ture”, and the cal­en­dar had a per­sis­tent link on the top left of the site. All the var­i­ous inter­nal com­mu­ni­ca­tions pages found at the bot­tom of the chart were migrat­ed to the pri­vate Stu­dent Infor­ma­tion System. 

Here is the revised site archi­tec­ture, as imple­ment­ed into the Word­Press prototype:

Content Strategy

Brand­ing doc­u­ments empha­sized the need for the school to move away from the image of a funky start­up school with a mys­te­ri­ous, anti-tech­nol­o­gy ped­a­gogy that caters to ear­ly child­hood. The board want­ed to move towards being seen as a proven, aca­d­e­m­i­cal­ly rig­or­ous form of alter­na­tive edu­ca­tion which devel­ops all aspects of its stu­dents and pre­pares them for a rapid­ly chang­ing world.

The copy­writ­ers worked with teach­ers to come to a hap­py medi­um which touched upon the depth of their work with­out sound­ing too eso­teric, with an empha­sis on rig­or, using a friend­ly, straight­for­ward tone which spoke to our personas.

Wal­dorf schools have a unique aes­thet­ic, and we decid­ed to cap­ture that not in the design of the site itself, but in pho­tographs. For­tu­nate­ly, I had been method­i­cal­ly pho­tograph­ing every aspect of the school for years. These inher­ent­ly col­or­ful images showed prospec­tive par­ents what their chil­dren would expe­ri­ence, and served as a focal point in con­trast to the typog­ra­phy-based site design.

Production

The design­er and devel­op­er worked togeth­er to cre­ate a cus­tom theme, with an empha­sis on typog­ra­phy and white space. Mean­while, the copy­writ­ers refined their lan­guage, and I orga­nized and processed the pho­tos to make them as light­weight as possible.

We also came up with a change man­age­ment plan. The par­ent com­mu­ni­ty was informed that the site would be chang­ing, and got them accli­mat­ed to going to our new SIS for inter­nal information.

With the site in pret­ty good shape, we ran some fur­ther user tests. It worked well on mobile, only requir­ing the stan­dard typo­graph­i­cal adjustments.

The design and con­tent were well received, but the speed of the site was a glar­ing issue. A call to the host­ing ser­vice to upgrade the school’s plan ensured the site would load quickly.

We launched the site just before the begin­ning of a new school year, giv­ing the school an updat­ed, more mature look and feel, tar­get­ed to prospec­tive parents.

Respon­sive design made nav­i­ga­tion and con­tact­ing the school easy.

The new site sep­a­rat­ed its to two users: cur­rent and prospec­tive parents.

Cur­rent par­ents could access the cal­en­dar, and inter­nal infor­ma­tion through the per­va­sive links on the top left corner.

Prospec­tive par­ents had an eas­i­er time nav­i­gat­ing the site, and con­tact with the school was always a click away.

The min­i­mal­ist design pro­vid­ed a stark con­trast to the vibrant pho­tographs which show­cased the school.

Results

The site was well received by the com­mu­ni­ty, and our col­leagues at oth­er Wal­dorf schools. After three months, ana­lyt­ics revealed a decrease in bounce rates (par­tic­u­lar­ly on mobile), and an increase in vis­it dura­tion. Admis­sions report­ed call vol­ume increased, and that tour reg­is­tra­tions had filled up faster than the pre­vi­ous year, requir­ing them to sched­ule anoth­er one to accom­mo­date the increased inter­est. Inter­nal staff found it eas­i­er to update their respec­tive sec­tions, free­ing them to focus on oth­er duties. The major­i­ty of cur­rent par­ents quick­ly reg­is­tered for the new SIS. Some gave pos­i­tive feed­back on their abil­i­ty to access so much infor­ma­tion in one location.

PS

The site con­tin­ued to change after I left the school, and I can­not vouch for the design deci­sions that have been made since my depar­ture. This is a com­mon issue with school web­sites, mul­ti­ple peo­ple with vary­ing degrees of design skills updat­ing and adding to the site after the orig­i­nal design team dis­bands. It fre­quent­ly leads to less-than stel­lar user expe­ri­ences. Bud­getary, per­son­nel, and man­age­ment issues all play a role in the situation.

From Potential to Essential

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

From Friction to Flow

Stream­lin­ing a crit­i­cal process

jjpope@gmail.com
(917) 690‑4122