Background 

The Vancouver School District is large, urban and multicultural. It is among the most diverse public school systems in Canada with an annual enrolment of approximately 50,000 students in Kindergarten to grade 12. There are 90 elementary schools, 18 secondary schools and two adult learning centres.To meet the district's needs, the VSB required an intuitive user experience and a strategy centred around a powerful back-end engine to deliver content across their family of websites.

Design Process

Strategy
With our experience in the education industry, we dove in and quickly got up to speed with the Vancouver School Board's values and pain points. Our role as a strategic partner began with big decisions that go beyond marketing, focusing on user experience, among other key areas. A lot of attention was spent on how content zones were organized on the pages and how easy it was to find information throughout the network of 100+ websites.

Some of the questions we set out to answer during the project were:

• How could we improve the way content was structured inside the site navigation?
• Was the site organized in a way that makes sense to the end users?
• What information do the end users value the most from your website?
• Where are we using words/terminology that would be confusing to the end user?
• How can we improve the way content is created and managed across a large network of sites?
• How could we engage more students to enrol in the international student program?
• How can the information be presented in a way that will lead to higher online customer conversions and commerce?

Our ability to answer these key questions was an important part of the final solution. Understanding VSB's needs, pain points and preferences were essential to creating value through design. From these insights, we could set realistic goals and deliver a solution that was stronger, more innovative, and not only looked great but also had real value to the end user.

A plan was put in place to clearly outline goals for the new website solution. Through a series of consultations, several milestones were defined giving everyone a clear path to follow throughout a multifaceted project involving many moving parts.

Content Audit 

Before any design work was started, we conducted a content audit. This quantitative research method was used to record all pages/sections within the network of websites. By collecting this data, we could assess gaps in the existing content. What pages were missing? Are there any broken links or images? From this report, we could then begin to plan out any changes to the navigation along with the effort involved for the content migration.

Summative reports like website analytics were shared with the core teams. They provided concrete metrics for us to track current user behaviour online. These statistics helped us understand which features the end users found to be valuable and where they spent most of their time. We also use this data to measure future iterations of the design.

All of this research helped us gauge our initial ideas. We weren't making an uninformed guess, rather, we had actual data to work with. This was very effective when proposing changes to the solution and creating trust among both teams.

Information Architecture
Thousands of pages comprised of events, news and staff, student and parent information required re-working the sitemap and information architecture. Working together with VSB and using data gathered from marketing research we consolidated pages which made for cleaner navigation and content organization for site visitors.

Visual exploration in the form of wireframes, imagery, typography and user flows were created by the design team to go beyond initial ideas. These exercises proved to be valuable as they assisted with rapid prototyping throughout the design iterations.

Collaboration

We took the time to talk with team members from several district departments to gain a greater appreciation of their previous efforts and investments, current initiatives and future goals. Our initial challenge was not only to redesign their websites but also to provide a new content delivery network and we understood that our final execution would only be as effective as our preliminary research. A content audit, personas and user flow mapping exercises allowed us to be confident with our recommendations as we moved forward with the solution.

From the very start of the project, priority was placed on setting up weekly Skype sessions among the core teams. We defined a start time that worked for everyone's schedule and attendance was required for all team leads. The intention of these meetings was to share findings from the previous week, as well as follow up on any new queries.

Tools like Microsoft Teams and Instant Messenger were introduced to help with timely collaboration. This method was a great way for team members in both organizations to keep an ongoing conversation outside of the weekly status meetings. There was now a thread of past conversations, queries and questions on file for all to have access to. It served as one central point of truth for the project and saved everyone from asking questions that had already been answered throughout the course of the project.

Design
Before contacting SchoolBundle, the VSB in-house design team had recently rebranded. Everything was new, including their brand guidelines, messaging and voice. It was our job to pick up the energetic, upbeat new brand and elevate it for digital. We were careful to pay close attention to the details, subtly communicating the values of Vancouver's diverse geography and heritage.

In terms of design for the website, we worked through a series of exercises with the client to get everyone on the same page. As we progressed from sketches to wireframes, a visual style started to emerge. Our design team also worked with the district to build an experience that allows site visitors to intuitively navigate each school website. Conversations during design reviews informed our decisions going forward and were translated into a universal design across the new digital solution.

Goals

1. Unified Communication
The challenge of managing multiple lines of communication across a large school board is no small task. Different technologies and workflows were being used to produce the same content by many authors, requiring a large investment of time and effort. With the SchoolBundle Single-Source publishing engine, VSB is now able to create the content in one central place and share it to the relevant sites and audiences. The cost of training has also decreased, allowing more people to create new content more easily. This is a win for everyone involved.

2. Accessibility / User-Friendly Experience
Every project is an opportunity to become better and smarter. We don’t just listen to our clients, we learn from them. During the design phase, we tested our concepts to ensure that they were both visually accessible and aesthetically pleasing for low-vision users. We differentiated beyond colour, from large elements down to the small details.

Next, our development team translated the designs into components that grew into an extendable design system. These components were built with care and sound accessibility principles in mind, testing often for compliance with Web Content Accessibility Guidelines (WCAG) 2.0.

3. Mobile-First Approach
With the rise of mobile device usage, a responsive design strategy was required. The mobile-first approach organically leads to a design that’s more content-focused and therefore user-focused. The heart of the site is content. We provided a solution that has an optimal viewing experience across a wide range of devices—whether you’re on a smartphone or a widescreen monitor. It allows easy reading and navigation without resizing panning, and scrolling directly on the page.

4. Consistent Look and Feel
Using VSB's own attention to detail as inspiration, we built subtle yet compelling features throughout the school board’s family of websites. This included customized site banners emphasizing key geographic and cultural references to intuitive hover states and scalable menus—all working to reflect the polish and sophistication of the Vancouver School Board.

 
Results

Working with the Vancouver School Board has been a fulfilling experience. After a few creative exercises and hours poring over our strategy, the result is a scalable, flexible website with a progressive design. The VSB team really understands its audience. From the start of the project, we've felt collaborative in our ability to work as a single team. For a school board like VSB to bring us in as a partner was rewarding.

We were able to bring the full weight of our expertise to the table and they pushed us to do some of our best work. The website's success is a direct testament to our working relationship. With a refined, collaborative process in place, we're excited to continue to optimize and evolve their online unified communication solution.

Since going live with the redesign, we’ve worked with VSB to add more features to better serve their community who rely on this valuable service. The VSB has been extending what we built together within their own team too. Our role going forward is to support the client's ongoing goals and needs. Site analytics are reviewed on an ongoing basis to track where the users are spending their time. Some requests of the design team include updates to the SchoolBundle product solutions and further automation of content management and social media. 

We are proud to have been able to contribute to VSB's important mission of tapping the potential of each of their students so that they may achieve their goals.

 
Takeaways

1. Open and honest feedback is key. Clients want assurance that we understand their pain points and that our solution can deliver value to meet those needs. Beginning with the project kick-off, we encouraged open and honest feedback. A continuous effort was made to include the client in major steps and decisions throughout the project. This created trust and allowed for honest conversations around some of those big questions raised early on in the design process. 
2. Establish a true partnership with the client. Throughout the entire project, we were continually collaborating to make sure we were creating a site that would appeal to the client's audience while achieving their goals. We listened to their ideas and they trusted our recommendations while challenging each other on the proposed solutions. A focus on timely communication, a positive attitude, and the ability to share information openly all helped maintain a collaborative working relationship between the client and design teams.
3. Understand that design is a continuous process. Given the nature of these projects, there is an aspect of iterative design at play. Methods and technology are continuously changing for the better. As design professionals, we follow those best practices and make recommendations when necessary.