New Trier High School has an extraordinary amount of activities, events, and initiatives going on at all times. Although most of that information is captured on the website, users struggle to find the information that’s most relevant to them. For teachers and coaches, this means that they are often turning to other websites and 3rd party systems to facilitate communication with students and parents. For board and PTO members, this can result in missed opportunities to engage with parents and the public, or rally support for events and fundraising. Adding to this was a requirement that all web content work be accessible on tablets, as all students were now using them during the school day.
- Total website responsive redesign
- Upgraded to more current CMS solution
- Special focus on designing key landing pages/information hubs for groups of specific users
- Easy way to view upcoming events and search for events
- Prominent contact info for easier lookup (one of the primary website needs)
New Trier High School is a busy place.
Viewing upcoming events, as well as the full event list and search, was critical to the success of the new website. While students might access event information on laptops and tablets, parents might use their phones or desktop computer.
Keeping that in mind, we developed an interactive lo-fi prototype. With plain, gray-scale examples, our design team and New Trier High School partners focused on the responsive website and heavily tested it to see how it would adapt across different breakpoints and devices. From these prototype workshops, our team identified issues and opportunities with our proposed interaction and design solutions.
Visual inventories were the next step for our team. In these documents, we collected inspiration from across the web that provided starting points for website design conversations, based on our initial interview with the stakeholder team. We pulled together different color schemes, thematic approaches, type examples, functional ideas from different sites. At that point, our team made recommendations about which visual direction was more appropriate for the brand.
We also pulled together element collages, a collection of visual ideas that represent potential site components. These allow us to take what we learned about stakeholder preferences and try out some visual ideas in a non-permanent environment. Once the client approved of our direction and styles, it was time to design everything out.
The new website needed to appeal to students—a younger audience—while not too playful for community members or parents. We also felt that the overall design should not distract from featuring a lot of important content. From there, building from our element collages and using our shared knowledge, we develop the overall design and individual website components.
One of the challenges with New Trier was the sheer amount of information. In addition, each department or section had different ways of displaying similar information. To make the lives of content editors and developers easier, we developed a New Trier Component Library to keep a record of each module, how a module behaves responsively, what editorial rules may apply, and what technical rules any developer should be aware of.
New Trier High School
2016: Honorable Mention MarCom Award