We're hiring a F/T Web Developer! Check out the posting


project case study

University of Calgary Students' Union Web Design



The Challenge

The University of Calgary Students’ Union had an existing site that had become increasingly difficult to navigate and manage. They came to us, then, needing a complete overhaul. We needed to deliver a site that worked beautifully on all devices; made information infinitely easier to find; and empowered site admin staff to create & lay out content while maintaining design integrity for years to come.

The Solution

We worked the the SU team to launch a modern, mobile-first responsive website (powered by WordPress) that ticked all their goals – and on time and on budget to boot. By building in a custom shortcoding system as well as an entirely new architecture & beefy responsive navigation, we empowered both SU staff and students to create, lay out, maintain, and discover content easily. View the site here!

What We Delivered

  • Research & User Personas
  • Information Architecture
  • Wireframing
  • Website Design
  • Responsive Design [View]
  • WordPress Development
  • Analytics Tracking
  • Client Training
  • Site Documentation

The Details

One of the biggest challenges with any site of scale is maintaining design integrity for years past launch. When we first sat down with the Student’s Union staff, it was clear that their existing site had faltered on this front; the site had gradually devolved into a visual smorgasbord of links and images, devoid of structure or unifying theme. Feedback from the student user base, coupled with existing Analytics, also told us that the students were frustrated: unable to find the information they needed easily, they were either leaving the site quickly or resorting solely to the site’s underpowered search function.

These problems became all of ours to solve: how can we help students find their answers quickly? How can we couple this with a modern responsive design that followed a style guide and common visual language, yet still allowed site staff control over the layout of 500+ pages of content through the CMS?

Our kickoff meeting allowed us to understand the students’ collective goals & challenges when it came to the SU site. We transferred that knowledge into user personas, and then through into a completely revised site architecture. The goal of the site architecture was to structure it around language common to students; where would they think to look for information? Once the architecture had been drafted, revised, and signed-off, we moved into wireframing.


One big takeaway from SU staff was the fact that the “must-know” information changed based on time of year. For example, the staff are flooded with questions from first-year students in September, as well as requests about lockers and book consignment. We knew, then, that the site needed to be a flexible one, allowing content managers to dictate which information appeared where in the layout as they see fit.

With that in mind, we designed the site as a flexible component-style build, meaning that site staff could easily move information around in the overall site design through checkboxes, categories, tags and more. As well, through a powerful custom shortcoding system, staff can easily format content into web components like tables, accordions, alerts, forms and much more without having to write a single line of code.

Through the CMS, staff can also dictate which contextual information shows up in a unique page sidebar (for example, contact information specific to a student service, or related events) via a custom checkbox and field system. It sounds complex, but all that means is sidebar content can be displayed or hidden via simply checking a box.

wp custom fields

Visual design-wise, we started within the bounds of the newly-revised SU Calgary visual identity. We extended the brand guidelines through to the web using transparencies, fonts served from Typekit, colour-coded news categories, bold photography and more on the path to a contemporary visual design that sets the bar for students’ union websites. We also built in numerous, automatic fallback measures into the visual design: truncating headlines if content managers enter overly long titles that would otherwise break the layout; serving fallback notices when there are no volunteer or job opportunities, and so on.




Finally, the responsive implementation is one we’re truly proud of, and more importantly, one both the client & students love. The site feels as if it were made explicitly for each device, and numerous challenges related to responsive design and smaller devices were overcome. Notably, we reduced the desktop mega-drop-down menu navigation to a beautiful mobile implementation: nested child pages are found through a slick toggled navigation on touch devices – a navigation that accounts for proper tap targets while not reducing the overall browsing functionality.

Since launch, feedback has been hugely positive. Traffic has exploded – students are using their union’s website more than ever. The website is answering frequently asked student questions, reducing SU staff workload in that area and indicating success. We continue to work with the great people over at the Students’ Union, gathering feedback, honing the user experience, and learning from the students using the site.

contact us

Let's make something amazing together.

Interested in working together, or maybe just having a conversation? We’d love to hear what you have in mind, and answer any questions you might have. Let’s make whatever’s rolling around in that brain of yours happen.

The Paper Leaf Design Weekly

If you love design, you’ll love the Paper Leaf Design Weekly. Join thousands of other designers getting wallpapers, in-depth design articles, free fonts & other design goodies delivered via our weekly design newsletter. Why wait? Join now and don’t miss a beat!