Alberta College of Art + Design

Responsive website redesign

A student at acad working on her project
Alberta College of Art + Design (ACAD) provides a rich learning environment for the 1,200 artistic thinkers and innovators who attend the Calgary-based college.

ACAD was founded in 1926 and serves as a Canadian leader for innovation, research and excellence in visual arts, design, and emergent cultural fields.

The challenge

As a studio-based learning centre, ACAD needed to forge a strong connection with its existing and prospective students. ACAD staff recognized the importance of its website as a means of communicating and connecting with its audiences, especially the younger demographic. It had already embarked on the journey of strategically reworking its content. This reworking, along with the college’s new branding guidelines, outdated CMS system, and non-responsive design, brought to light the need for ACAD to rethink the entire website.

The goals

ACAD wanted to provide its staff and students alike with a redesigned and responsive website that showcases the best of form and function. It had to be visually appealing, well organized, and easy to navigate. ACAD had a number of goals:

  • Update the outdated CMS with one that’s user-friendly and allows staff to update content quickly and effectively.
  • Make the site responsive to give users the flexibility to access content on all devices and allow students to access course information and schedules online.
  • Replace the existing process of manually updating course listings and other online content with an automated solution.
  • Update the design to align with ACAD’s new branding guidelines, including the voice and tone of its content.

The solution

ACAD recognized that its website needed a complete overhaul, and we focused on two key areas: implementing a new CMS that would provide the functionality ACAD needed; and realigning the design of the site and making it responsive so users could interact with it across multiple devices, whether finding course information or checking schedules.

Discovery

It’s no surprise that design school staff have creative leanings and wanted to work closely with our team to shape their vision for ACAD’s public persona. Their team has deep knowledge of their students and creative environment, but our team has hands-on experience with the constraints and opportunities of designing for the web.

Our collaborative discovery process involved holding workshops to meld the ACAD team’s academic requirements and design sensibilities with our creative and technical ability to shape the site and build the functionality ACAD desired.

We also guided the ACAD team through a competitive analysis, asking them to review the websites of similar design schools. It was a valuable way for them – and us – to see what added information could boost the value of the content, and how functions such as the admissions process were handled. We took this simple research to a deeper level, with the ACAD team creating a document of “slides,” earmarking elements they liked and disliked. Together we reviewed the examples, which provided us with a shared vocabulary so we could make decisions together about where to take the design.

Design

After the initial discovery sessions we got to work with UX sketching and shaping the structure of the site, and developing content models and style palettes before committing everything to code. Much of this work evolved from the content strategy that had been developed before we started working on the project in earnest. First off, we provided low-fidelity UX sketches to the ACAD team so they could see the framework for what we wanted to start building.

Three different style tiles that we had created for ACAD

At the same time, we developed three sets of style tiles, working on a scale (e.g., 1. Bold and professional, 2. Playful and open, or 3. Fun and relaxed) to articulate a “visual language.” This gave the ACAD team some parameters for narrowing down the look and feel they wanted the site to reflect.

Screenshots of style tiles that were created for ACAD along with the in-browser wireframes

Once the UX sketches were complete, we built in-browser wireframes for various screen sizes to illustrate how the new responsive site would shift and resize on various devices. Afterwards, we started building layers of design on the wireframes based off the direction from the style tiles. The front-end templates were the result of the combination of styles with wireframes. The nature of this process allows us to continually improve and polish the design, honing the CSS styling as the back-end nuts and bolts of the site are being developed.

And during the project, we performed usability testing on the actual site design so we could focus our efforts and budget on high-value areas and ensure everything was working as planned.

Screenshots of the ACAD designs in browser on a large display

Development

Our shift away from ACAD’s outmoded CMS immediately provided them with a more user-friendly platform to work on. Rather than overwhelm staff with a lot of unnecessary features, we fulfilled their wish for a simplified user experience by creating a series of templates that still offered the team plenty of flexibility for creating content.

Customized solutions

Along with providing the visual direction for the web, our team had identified a couple of high-value areas for improvement. For instance, ACAD was managing its course listings through a separate system called Banner. Getting access to the API was an expensive endeavour, so instead we built a course importer to plug into the system, which would allow students to find the courses they need to register for. Our solution: extract the CSV data file from Banner and build a custom module using Batch API within Drupal to import and process the data. Now staff can upload the course information data into the website and it will automatically populate the course listing system.

Another customized solution involved building a series of templates. ACAD’s team wanted plug-and-play functionality, rather than fussing around to adapt content on their own. We use the Drupal Views modules to create various layouts for static content pages, news postings, and secondary landing pages, making sure that each is responsive so that they work on all devices.

Testing, testing

With any web project, quality assurance testing provides that all-important opportunity to iron out any kinks that weren’t apparent during the design and development phases. Our quality assurance team doesn’t just click links looking for bugs, they validate that what we built behind the scenes in the back-end supports what we built on the front-end. In other words, when you click on a button, scroll through a menu, or input content into a field and press “Submit,” it does what it’s supposed to do. Since there were a number of customized features on the site, it was important for our testers to put themselves in the shoes of the people who would be administering the site. Do things work intuitively? Should we make adjustments? We try to consider all angles and eventualities during testing, so when we launch the site, everything works smoothly.

The results

ACAD has a fully responsive website that reflects its ethos of innovation within a creative context. Its new platform underpins a user experience that’s as fluid and intuitive for staff updating information as it is for the students accessing it. Here’s what we delivered:

  • A new responsive site with a CMS that has been customized to allow ACAD staff to update information easily, while also replacing manual processes with automated ones.
  • The new design language and branding ACAD had created for its print and online material has been reflected in the overall design and UX patterns.
  • An updated structure that reflects the content strategy, enabling ACAD to promote the college’s unique features on the site.
  • Automated functions and forms that let students access course information and schedules to assist them with long-term curriculum planning.
Screenshots of the ACAD's new website on multiple devices

The impact

ACAD’s fully functional and responsive website is now built and its staff are busily working on populating the new content into the pages. Feedback, to date, has been great. The team is happy with the overall look and feel of the site, and pleased with the ease of functionality they now enjoy. Traffic is up substantially for the first time in years, indicating that we’ve struck the right chord with existing and prospective students.

“To the incredible Yellow Pencil team - it has been a year of a lot of learnings, twists and changes and we have certainly been through a lot together. You have all responded professionally and with true passion for your craft and website expertise. I have learned a tremendous amount from your team. I have received so many compliments on the new website already from the ACAD staff and faculty who have seen it. This is all due to you listening to our initial wishlist and working through each item one step at a time with us.

Thank you for your patience and ongoing support. A special call out to Farhad who always took my calls and responded to my literally thousands of emails. Thank you for being the voice of reason. And for being my go-to person for virtually every question I had. And for being the liaison between the rest of the YP team. And to Sam, who has shown such dedication to the design process. Thank you for keeping us in line with best practices and what will look best, and for responding to some of our quirky asks.”

Vera Ilnyckyj, Project Specialist, ACAD

Lessons learned

One of the challenges this project presented was working with multiple stakeholders. While that in itself isn’t unusual, managing an ambitious time frame and budget, while ensuring everyone has a voice, takes some wrangling. We approached this using a two-tiered approval process with an advisory group and a decision group – the approval committee.

Our method involved first collecting feedback on our work from the advisory group. Then our team would present two things to the decision group: our original ideas and high-level feedback from the advisory group. This way both parties had a say, and the decision-makers understood the advisory group’s perspective and rationale. Once the decision was finalized, we’re share the end result with the advisory committee to close the decision-making loop.

It was an innovative solution that helped keep everyone informed and kept the project on track, and one we’ll undoubtedly use on future projects.

See it for yourself

Visit acad.ca