SFU's Vancouver Campus

Rebrand and redesign of the campus website
Service Design Case Study - 7 Minute Read
Timeline

Jan - Sept 2023

Project Type

Work

Team

4 Members

Role

UX Research/UI Design

SFU's Vancouver campus aspires to be a vibrant, inclusive and accessible university campus for students, staff, and faculty

View Website

Project Summary

In the heart of Vancouver..

lays Simon Fraser University's Vancouver campus. Described by the Vancouver Sun as the "intellectual heart of the city," SFU's Vancouver campus transformed urban education in downtown Vancouver. The campus consists of multiple facilities in the core of Western Canada most livable cities.

Challenge

But there was a problem. A huge, complex one.

The campus website was in need of an upgrade. As one of SFU’s several campuses, the website suffered from redundant and outdated information, and operated on a content management system dating back to 2016, despite the introduction of the University's latest web brand system in 2021.

Additionally, the website contained an enormous amount of content, including details about the campus' departments, programs, and services. This made things challenging because confirmation and reviews from stakeholder was needed before being able to move forward.

Solution Highlights

After months of revisions and stakeholder reviews, a brand-new website is successfully launched! 🎉

This thorough process was done to make sure information was correct and followed the University’s latest web brand guidelines.
Prototype of SFU Vancouver Homepage
Improved user experience and updated brand identity
A new and modern website with a more streamlined layout and user-friendly design, making it easier for visitors to find information they need. The updated website not only adopts the latest style but also presents a fresh and engaging brand identity, showcasing SFU as Canada’s vibrant and engaged university.
Optimized user-centric content
Content is accurate, relevant, and up-to-date for users. This includes revised academic programs, campus services, student services, and more. Regularly featured content, such as blog posts, news articles, and events is added to highlight the campus and keep the website relevant.

Design Process

Decoding the process

To better understand the changes we needed to make, evaluation and analysis was needed to guide our process and determine the next steps. We did this by conducting:

🔍 Research

To gather insights such
as relevant trends and user behaviours.

💬 User testing

To gather insights and refining
the user interface based on feedback.

📊 Web analytics

To assess user engagement, behaviour and key performance indicators (KPIs).

Research Goals

What's important from the user's perspective?

As a University, our primary users were current and prospective students, as well as staff and faculty. To understand our users priorities, we needed to explore conversations, trends, and issues within the school community.

The goal was to:
🗺️ Identify navigation patterns
Determine user behaviour by what they were most commonly navigating towards to.
🧩 Uncover challenges faced
Identify pain points users might face and explore opportunities to meet their needs.
🔝 Prioritize user relevance
Discover trends and subjects that capture users' interest the most to improve user retention.

Secondary Research

Emphasizing and understanding today’s users

Secondary research was done to examine issues or trends within the SFU community. I went through online forums such as Reddit to identify key themes and topics that SFU Vancouver campus students were discussing.

Here are the top 4 primary themes discovered.

Word of mouth feedback

I also asked both students and colleagues of their first impression of the website.

Here's the full scoop.

Website Traffic Insights

Digging through data to get a glimpse

Google Analytics was used to understand how users were navigating through the website, and what pages interested them most. High traffic pages and bounce rate were also closely monitored to assess engagement and retention.

The data speaks for itself

Top pages “Student Services”, “Contact” and “Facilities and Departments” stood out, indicating users interest in seeking support and resources from the University. On the other hand, "News + Events","Faculty and Staff" and “Year in Review” pages saw lower levels of user interaction. This suggests a need to enhance content to better align with the interests and needs of our users.

Overall, a majority of pages had low engagement and high bounce rates. We were in a desperate need of a content overhaul.

Define

Defining our focus and goal based on findings

User-centric content

Users show a strong interest in practical information related to the Vancouver Campus, such as its university services and resources. This highlights the importance of tailoring content to directly meet the needs and interests of the users.

Therefore, our goal is to create..

A centralized hub
for students, staff, faculty, and external audiences to gather crucial campus information. We aim to do this by:
01.
Tailored content
Improve content and make sure it's relevant to students, staff, and faculty.
02.
Simplify content
Update all existing information, and eliminate duplicate and inconsistent content.
03.
Brand alignment
Redesign website to align with the university's current web branding.

Problem Identification

How might we optimize the user experience, ensuring users effortlessly find the information they need, minimize cognitive load, all while aligning seamlessly with the university's brand guidelines?

Information Architecture

Structuring a new sitemap

Based on all the research and data findings, the initial first draft of the sitemap of the website was created and sent to a Senior Digital Resources Specialist from SFU’s Central Communications and Marketing for review. This was used as a guide to help conduct the questions for the Treejack usability testing.

User Testing

Testing the sitemap with users

To test and further evaluate if the new sitemap was effective in helping users find the information they needed, a Treejack survey was created and distributed the survey to 20 participants, consisting of 10 students and 10 staff and faculty members to ensure a diverse, cohesive and representative evaluation. The survey contained 10 questions.

Here are the results.
We discovered most users successfully navigated through the Treejack survey without much trouble. However, one major concern caught our attention: users encountered difficulty when navigating themselves to the campus upgrade pages.

Revisiting the sitemap

Given the results from the usability testing, we decided to eliminate and narrow down pages that were causing user confusion and finalized a sitemap that was clean and cohesive.

Here is the finalized sitemap containing the main and sub pages.

So what happened next? Building and designing the website.

The next few months were spent building the website on AEM, writing copy, and reaching out to stakeholders to confirm and review content.

Results

Given all the data, research, and usability testing..

A number of pages with low user retention and engagement were ultimately eliminated. We focused our efforts on creating a website tailored specifically to SFU Vancouver, ensuring that the content met the needs and interests of SFU Vancouver students, staff, and faculty.

Check out the before and after!

We successfully upgraded the website to SFU’s latest web branding and with a user-friendly design. This makes it easier for students, faculty and staff to find the information they need and better communicates the role of the SFU Vancouver campus.

Before (homepage)

After (homepage)

Reflection

Scope and constraints

Throughout the entire project, a significant challenge I faced was ensuring consistent branding with SFU while working on the website. Following SFU's brand guidelines was important, but it proved challenging. The website had extensive information about various campus departments, programs, and services, which hindered my process. Every piece of information required thorough review and approval from multiple stakeholders, all while maintaining brand guidelines.

But patience is a virtue!

However, with patience and diligence, my team and I successfully navigated through numerous stakeholder meetings to seamlessly implement all necessary website changes. The key in achieving this? Effective communication and patience. These key factors lead a more efficient design process.

Personal key learnings

💻 Designing for our users in mind

When crafting a solution, it can be tempting to include every idea or content, particularly for a large university with an abundance of information and especially when considering stakeholder needs as well. The initial thought was to include every detail suggested by stakeholders to ensure their satisfaction. However, this proved to be difficult when my team and I sat down to design the new website. Ultimately, we made the decision to forgo and exclude less impactful and ineffective pages our stakeholders proposed. The decision was guided by our website data, in which we placed our users at the forefront of our decision-making process.

⏰ Time management was key to working efficiently

In my role as the Communications and Events Assistant for the SFU Vancouver campus, the website project was just one of many. I had to handle various projects and tasks, all while making sure to organize and schedule everything properly. This meant setting aside time for each important step in the design process for this website project. As a result, I learnt what steps to prioritize in the design process and how to complete them under pressure.

Next Steps

So what’s next?

✅ Use insights from monitoring, testing, and feedback to continually improve the user experience.
✅ Regularly gather user feedback to understand experiences and identify areas for improvement.
✅ Monitor user engagement to ensure retention and sustained interest.