Humber College
Navigation Redesign
We redesigned Humber College's website navigation to be more user-friendly for students, faculty, and staff. As Canada's largest polytechnic college, Humber emphasizes technology-related education, experiential teaching, industry ties for work-integrated learning, and applied research. Our goal was to streamline the digital experience, making it easier for users to find resources and support services. The intuitive navigation reflects Humber's commitment to innovation and excellence in education.
Dates
2020 - 2022
Services
Visual Design
UI & UX Design
Tools
Figma
Photoshop
Illustrator
Project Type
Industry Role
STUDENT FOCUSED NAVIGATION FOR DESKTOP AND MOBILE
We undertook the redesign of their website navigation with a focus on enhancing user experience for new and current students, faculty, and staff. As the largest polytechnic college in Canada, Humber prides itself on offering a world-class education model built on four key principles: technology-related education, experiential teaching methods, strong ties with industry for work-integrated learning (WIL), and applied research.
Tools Used:
PROJECT BRIEF
AND CHALLENGES
This project aimed to align the digital experience with Humber College’s Four Key Principles, ensuring seamless access to resources, information, and support services. By implementing intuitive navigation structures and user-friendly interfaces, we aimed to empower users to easily find what they need, whether it's information on programs, campus facilities, or support services.
Humber College Brand Guides
Text on a White Background
Ensure legibility of text on a white background by using a minimum point size of 10pt black text (print) and 12pt black text (digital). PRIMARY Humber Dark Blue PMS 282 CMYK 100 72 0 56 RGB 4 30 65 HEX #000033 12pt white text Humber Gold PMS 117 CMYK 0 18 100 15 RGB 205 151 0 HEX #CC9900 12pt black text
Text on a Coloured Background
For both print and digital applications where text is used on a coloured background, following the AODA guidelines for minimum text sizes and specific colours.
Initial Process and Navigation Iterations
In our initial iterations of the project, collaboration with Humber College developers and clients was paramount. Adhering closely to the Humber Brand Guides, we meticulously crafted a design system tailored to the college's identity and values. This collaborative effort ensured that every aspect of the website reflected Humber's brand ethos consistently. As we progressed, we extended this design system seamlessly to their mobile websites, ensuring a cohesive user experience across all platforms. Through this iterative process, we not only met the technical requirements but also captured the essence of Humber College's unique identity, fostering a sense of unity and pride among students, faculty, and staff.
First Prototyped Iteration
our initial focus was on catering to the primary audience: students. Recognizing the under-utilization of certain pages, we worked closely with Humber to develop a prototype that prioritized providing relevant and engaging information to students.
Through iterative design sessions and feedback loops with the clients, we crafted a prototype that streamlined navigation and enhanced the visibility of key resources and services. By presenting this prototype to stakeholders, we aimed to demonstrate our commitment to optimizing the user experience, ultimately ensuring that students could easily access the information they needed to thrive academically and socially within the college environment.
Scroll the interactive prototype.
Interface Research Survey
To gauge the comfort level of students with the updated navigation, we conducted extensive testing across multiple Humber College campuses, iterating through three distinct interface designs. Our testing methodology involved observing students as they navigated through the various interfaces, noting their interactions, feedback, and overall comfort level. By testing across different campuses, we ensured a diverse sample that represented the broader student population.
Responsive Across Platforms
In our efforts to enhance usability, we prioritized making the updated menu responsive on desktops. Through iterative design processes, we meticulously refined its adaptation across various screen sizes, ensuring seamless navigation regardless of device. To validate its effectiveness, we conducted extensive testing with both students and faculty members, gathering valuable feedback to refine the desktop version further. This collaborative approach enabled us to optimize usability and accessibility, ultimately delivering a streamlined and user-friendly navigation experience tailored to the needs of Humber College's diverse community.
The Final Prototype
In the culmination of our project, the creation of the final prototype marked a significant milestone in our collaboration with Humber College. Given the extensive scope of the college website, encompassing a vast array of information and resources, our team dedicated substantial effort to develop a comprehensive prototype. Over 100 pages of prototyped content were meticulously crafted to provide developers with a detailed blueprint for implementation. This extensive undertaking ensured that every aspect of the website, from program information to campus resources, was accurately represented and seamlessly integrated into the prototype. By delivering a robust prototype to the developers, we facilitated a smooth transition from design to development, laying the foundation for the transformation of Humber College's digital presence.
