SAIT Campus Map Redesign

UX/UI Case Study for a Design System-Based Project

Helping Students Find Their Way

The Southern Alberta Institute of Technology (SAIT) tasked my team and I with this project in redesigning a page on their website to enhance the user experience.

Over the course of three months, we gathered data to analyze user pain points and create a solution that met student needs while also establishing a design system to ensure consistency across the redesign.

Tools
Figma

Timeframe
3 months

Team
Me (UX/UI Designer and Researcher)

Emma Dirks (UX/UI Designer and Reacher)

Yunna Jeon (UX/UI Designer and Researcher)

The Results

  • Enabled students to confidently navigate campus on their own, increasing their confidence

  • Minimized confusion in unfamiliar buildings, making campus navigation smoother and more intuitive

  • Helped students locate classrooms more quickly, reducing stress and improving punctuality

  • Supported a smoother transition for returning students facing new routines or layouts.

The Problem

SAIT’s Map had usability issues and was laid out poorly which made it hard for both new and returning students to navigate campus. Key details like room numbers and floor plans were missing or unclear, causing confusion and frustration.

Design Principles

Inclusive Accessibility for All SAIT Students

Designed to support both new or returning students and considers international users and language accessibility.

Clarity in Structure for Visuals & Information

Minimize cognitive load through clean visuals and well-organized content, making it easier for students to find information fast.

Research and Data

Starting a new semester is already stressful and an unclear map only adds to that. Both new and returning students often struggle to find classrooms. A more intuitive, map page would ease navigation and help students focus on their academic journey with less worry.

Competitive Analysis

We began our 4-stage research process with a competitive analysis of local institutions like MRU, UCalgary, and Ambrose University to focus on the strengths, weaknesses, and user needs met by their interactive maps, as well as potential features we could apply.

SAIT’s Original Map Page

University of Calgary’s Map Page

Mount Royal University’s Map Page

What We Found

  • Standalone Map Page
    Competitors host maps separately for better performance and features

  • Layer Customization
    Users can toggle things like pathways, services, or entrances

  • Detailed Building Info
    Top-down views with labeled wings/sections improve way finding

  • Spatial Context
    External landmarks help students orient themselves

Exploring what others in the space were doing gave us a clearer view of what SAIT’s map was missing. As we dug into competitor features, the gaps in SAIT’s current design became more visible, pointing us towards opportunities to create something that met user expectations.

User Research Survey

Our collection of primary research data started with my team and I creating and distributing a 12 question survey to gather a preliminary understanding of the student’s current thoughts and experience with using the map page. 

Survey Objective

  • Understand difficulties students face in finding locations on campus and strategies they currently use

  • Gather feedback on ease of use, useful content and missing information they would like to see

  • Assess their perception and opinion on the map’s designs, usability and features

  • Identify gaps and potential enhancements based on user feedback

What we Discovered

  • 50% Struggled to Find Information:  Many found the page difficult to use and find what they needed.

  • Lack of Proper Building Labels: Users wanted clearer and more informative building markers. It relies on the user to know and remember the building designated letter code. 

  • Not Useful for Current Students: The map focused on new students, lacking room numbers for classes and appointments for long-term students.

  • Demand for Floor Plans:  Students wanted building interiors to help navigate complex layouts.k

From the survey, we were able to uncover specific pain points. The lack of clear labels, missing room numbers and the absence of floor plans directly informed us that these are some of the major pain points that the redesign needs to address.

User Interviews

To better understand user needs, we interviewed four students. Through casual, in-person and online conversations, we learned about their navigation strategies, frustrations and experiences. These one-on-one interviews helped us uncover personal challenges and preferences that surveys alone couldn’t fully capture.

Our Must Knows

  • Discover users’ current navigation strategies students use and their effectiveness

  • Assess first impressions and overall experience with interactive map

  • Pinpoint missing features or pain points that hindered navigation

  • Understand how students interact with the interactive map and whether it meets their needs

Key Insights

Preference for PDF

PDF version has better wing labels than interactive version

Visual Overload

Cluttered layout distracted from key info and confused users

Unclear Information

3D building view made entrances/exits unclear

Usability Issues

Map overall felt buggy and unintuitive to use and navigate

Missing Information

Missing room numbers made indoor navigation difficult for users

Pivoting and Analysis

What started as a full map page redesign quickly shifted focus. Through user interviews and testing, we discovered the real issue: users were most frustrated with the interactive map, not the full map page.

So, what’s next?

Affinity Mapping

It was time to pin point patterns and prioritize improvements moving forward in the project according to the change in project scope. We grouped and labelled categories based on recurring feedback. This helped us to identify the core issues and essential changes needed to specifically improve the interactive map.

Affinity Mapping Grouping Done in Figjam

Key User Pain Points

  • Missing information

  • Hidden information behind excessive click throughs

  • Frustrating map functionality, including zoom issues

  • Confusion about building labelling system, noting missing letter codes

  • Users relied more on Google maps as an alternative, indicating that the interactive map’s features were insufficient for their needs

Implications and Recommendations

Add Floor Plans

Help users navigate inside buildings better

Add Current Location

Guide lost users in real time on the interactive map

Improve Labelling

Let users identify buildings at a glance

Make Visual Changes

Use a top-down view for clearer orientation

Add Room Numbers

Make classroom locations easier to find

Ideation and Creation

With the analysis done, it was time for us to put our discoveries to the test through brainstorming, ideations and iterations.

Card Sorting

I led the creation of cards based on insights from our affinity mapping. We went with open card sorting sessions with 5 users to understand their mental models and navigation preferences. This helped us empathize with users and refine the site structure based on how they naturally grouped and labeled content. This surfaced ideas that the team didn’t consider.

What we Discovered

  • Transportation and commute emerged as a standalone category in many cases

  • Some users expected content to follow a construction plan logic

  • Categories like dining, hours, and washrooms felt out of place or hard to group consistently

  • Need to group similar campus info under “Building Information” for clarity

Card Sorting Outcome and Overall Groupings

Watching how users made sense of the content in real time gave us a window into their thinking about what felt natural, what didn’t, and where things got stuck. This gave us a clearer picture of how the information should be organized, not just from our perspective, but from theirs.

Information Architecture

We analyzed the existing information architecture and identified key areas to improve. Using insights from our card sorting sessions, we restructured the current IA and created a new IA that aligned with how users naturally navigate and categorize information.

Original Information Architecture Versus Newly Constructed Information Architecture

Suggested Improvements

  • Move the interactive map be a separate external page to reduce clutter, improve functionality of the map and follow practices of other post secondary institutions 

  • Adding a search bar for classrooms

  • Add the “floor plan” toggles for the sidebar navigation toggles 

  • Consider adding in a pop-up box for information on buildings for quick viewing

  • Add new layer toggles to include more amenities in the information architecture

Out of Scope Features

  • Fully accurate floor plans for each building with individual classrooms outlined

  • Functioning classroom search bar with comprehensive database

  • Current location and destination mapping

Wireframing and Medium Fidelity

With all the information that we needed and the structure laid out, it was time to step into Figma to start turning our ideas into tangible solutions. The team started with creating wireframes and then developing them into medium fidelity of the major screens a user will experience through this new improved interactive map.

Medium Fidelity of Information Sidebar and New Layers/Option Toggles

Iterations

Throughout the design process, our team did have to go through a few iterations where we had to narrow down our options. For example, our team had to discuss and figure out the best layout to accommodate for the new floor plans layers and toggles.

We decided that although the original design had its flaws, users were already familiar with the UI of the original interactive map and our final version of the sidebar reflected that decision. The only difference is that we added more toggle options for users to customize what they wish to see on the map. 

Design System and Style Guide

After we constructed the wireframe and a medium fidelity version of our design, the team worked together to construct both the style guide based off of SAIT’s digital guidelines and the components to make up the design system for the project. When building out our components for the design system, we approached the process with the concept of atomic design.

Visual Style Guide and Design System Made in Figma

Throughout this particular phase of the project, I was primarily responsible for setting a basic style guide for the redesign’s Design System as the foundation for the rest of my team to refer to.

My Tasks Included

  • Setting the colours of the brand and UI elements in accordance to SAIT’s digital brand guidelines as local variables within the Figma file

  • Setting the local text styles using SAIT’s designated typeface

  • Setting and establishing the icon styles, taking particular note of the icon guidelines SAIT provided for the project

Final Solution

We broke down what needed fixing and built it back up together. With the foundation set and through quick iterations and teamwork, we tackled contrast, sizing, and accessibility to deliver a cleaner experience for SAIT students.

High-Fidelity Mockup

What were some of the main proposed changes?

Changed the Map Perspective

Users found the current perspective and visual design of the campus map to be confusing. Many preferred the look of the PDF map because of its top down perspective and clear building labels. We adopted a clear, top-down layout inspired by the PDF map for better building recognition and labeling.

Original Map Design Versus New Map Perspective/Visual Appearance

Expansion of the Amenities Layer Toggles and Introduction of Floor Plan Options

Many users felt that the map lacked information such as detailed pathways and locations of bike racks. To address the issue, we introduced additional amenity layer toggles, categorized into transportation and building-related features.

Through our research, we took into account how users wished the interactive map would show them specific locations within a building, including specific classrooms. Adding the floor plans to the map allows students to view the layout of the building and easily locate a room. They can also switch to view different floors of a building using a single choice layer toggle.

Original Sidebar Versus Newly Designed Sidebars

The Results and Reflection

What Did the Redesign Achieve?

Search Time Reduced with Improved Navigation

Previously, users struggled with locating specific buildings due to unclear labels. The updated information architecture and improved search functionality resulted in faster and more accurate location search by users.

Enhanced Indoor Navigation Experience

The proposed changes to the map now allows users to efficiently travel within sections of a building and understand the layout of complex buildings on campus. 

New Students Navigating with Greater Confidence

With the redesigned system, new students were able to now better understand the building and classroom labeling conventions, allowing them to navigate campus more confidently without prior knowledge.

Expanded Customization Options

The new sidebar navigation offers a wider range of options, giving students more control over filtering and locating specific services and amenities based on their needs.

Improvements for Next Time

Improving User Research

Next time, I’d like to create a more comprehensive survey that encourages deeper, more reflective responses. I also want to improve my interview techniques by asking open-ended questions that uncover user behaviours, rather than steering them toward solutions.

Design System and Workflow

Although I wasn’t heavily involved in building the design system, I realized the importance of defining scalable, essential components. Moving forward, I’d like to gain more hands-on experience and develop a stronger understanding of atomic design to improve workflow and developer handoffs.

Balancing Research and Design

While our research was thorough and extensive, I’d like to allocate more time for design and interaction refinement in future projects. This would allow for multiple rounds of iteration, more exploring and ultimately produce a final solution that is the absolute best that we can design.