HSCL needed a new website to attract a new wave of middle schoolers (and their parents). The high school offers cutting-edge programs in 3D printing and programming, but had a website so boring that I reflexively closed the tab four times before getting through it. Thankfully, I read the school’s values:
- Intellectual curiosity and independent, critical, and creative thinking
- Service to community and social responsibility
- Appreciation of the world’s artistic and cultural diversity
- Ethical awareness and the quest for personal growth
- A commitment to healthy and active living
Reading those, I knew I wanted to help. (And their technology and design teacher, Jonathan Rothman, was a great champion for the project.)
User Research
I started the process by interviewing the principal and project team about their mission and vision. They also filled me in on the crazy application process for NYC high schools. To get the community’s perspective and natural language, I sent surveys to the main user groups (teachers, students, and parents) asking about their decision-making process, the school’s best features, and their communication needs. I wrapped up all the user research in a project outline, confirming our goals, strategy, and requirements.
I also did technical research, presenting several CMS options that would suit the school’s needs. (They went with Wordpress since it’s free, open source, and popular.)
Identity
The school had an icon, but no real identity, so I wrote up a brand book codifying their distinguishing features, personality map, representative celebrity, interaction methods, and visual language.
Next came visual research and mood boards, to show how this personality could be represented graphically. We needed to appeal to middle schoolers, so I wanted to use fun and bright colors, but we also needed to convince their parents. I presented two options emphasizing either the solid college-prep curriculum or the future-savvy tech focus (stakeholders chose the latter).
UX
I made a site map confirming the project scope: promotional pages for the middle schoolers and parents evaluating the school, and support hubs for current teachers, students, and parents. I made a spreadsheet listing every piece of content we had or needed, so that the English teachers could get started editing and writing.
The school is in Queens, with a large ESL audience, so I wanted to make the communications as visual as possible. I proposed a set of icons for the various departments, and big background images to show the culture of the school.
For the parents, I proposed callouts of various stats for the school (like college acceptance and scholarships), plus logos of important partners, and a slideshow of kids using technology to humanize it.
To persuade potential students, I proposed a collage of extracurriculars to show the fun that would be had, positive pull quotes from current students, and a big simple application callout at the bottom.
I used grayscale wireframes to confirm the content and functionality for each page.
UI
The layouts and features were received enthusiastically, so I moved into color and imagery: testing the chosen color palette on text, backgrounds, and icons. The project team organized volunteer photographers during Field Day, and I found the rest on open source sites. I drafted a few mobile and tablet layouts, to make sure there weren’t any issues with the design.
Development
Starting with the Bones skeleton theme for Wordpress, I added the Advanced Custom Fields plugin for unique content, and Isotope for the student life gallery. CSS styling was done in Sass, mobile-first, using Bourbon for mixins, Bourbon Neat for grids, and my own custom framework of partials. The tab and slideshow modules are mostly CSS with a bit of jQuery. Documentation is included in the dashboard using the WP-Help plugin, and the whole site is responsive.
Results
The site launched in time for the beginning of the school year, and the response was great.
“We look like a real school now!” said the principal.