HumberCurrent Website Redesign

humber current cover image
I was presented with two options for redesigning a website as part of my academic project:the MyHumber Website and the HumberCurrent website.

I opted for the HumberCurrent website due to a personal connection. Upon receiving my visa approval, I attempted to connect with individuals in my related programs from my country or state. After an extensive search, I discovered this webpage; however, it had several inconveniences that I couldn't discern technically at that time. Now, I have the opportunity to delve deeper, identify areas for improvement, and enhance the website to the best of my abilities.
humber logo
The Humber College Institute of Technology & Advanced Learning, commonly known as Humber College, is a public College of Applied Arts and Technology in Toronto, Ontario, Canada. Founded in 1967.
HumberCurrent website is a festival of arts, media and design showcasing graduating students from Humber College’s Faculty of Media & Creative Arts. Featuring live and recorded performances, screenings, exhibitions- its, networking events, and port- folio shows, Current celebrates the ingenuity and professionalism of an electric group of storytellers.    

Why was a redesign needed?

The website exhibits

  1. Inactive links for previous events
  2. Inconsistent button designs
  3. Lack of visual cues for program names during hover effects
  4. Slow loading pages because of too large image sizes
  5. Malfunctioning 'read more' buttons
  6. Lack of brand identity on the homepage
  7. Difficulty to establish communication for arranging virtual meetings with graduates
  8. Finding contact information for program coordinators and officials is problematic
  9. Issues hampering website usability and effectiveness

Check Original website here
Below is a comparison between the original and updated versions of the website, highlighting significant alterations such as enhanced information organization and a streamlined design featuring cohesive visuals.
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Home
Footer
Programs
Events
Profile
Before
After
humber current home page before
humber current home page after
Before
after
humber current footer before
humber current footer before
Before
After
humber current programs before
humber current programs after
Before
after
humber current programs before
humber current programs after
Before
After
humber current student profile before
humber current student profile after

design process

design process steps

Empathize

UX Audit

Below is a comparison between the original and updated versions of the website, highlighting significant alterations such as enhanced information organization and a streamlined design featuring cohesive visuals.
Navigation
Accessibility
Mobile Experience
Responsiveness
Visual Design
humber current audit navigation
humber current audit accesibility
humber current audit mobile experience
humber current audit responsiveness
humber current audit visual design

Findings

humber current audit findings
humber current audit findings
humber current audit findings
humber current audit findings

Pain Points

After conducting an audit of the existing website, I have identified the following pain points.

Design Challenge

How might we design a more user friendly, consistent visual flow website for this product. How might we establish effective communication between students and graduates?

Possible Solutions

  • Redesign buttons, program and event cards , home page banner, student profile page etc.
  • Change the placement of sections; for example, the copy about Humbercurrent currently located in the footer should be moved to the banner section of the homepage.
  • Change stock photos/graphic designs especially program thumbnails.
  • Adding a meeting session feature so that aspiring students can engage in virtual meetings with current students.
  • Redesign the events section.
  • Adding a gallery page to showcase students' work.

Define

User Persona

Target Audience

Apps used

  • Humber college students / applicants
  • Diverse demographic students
  • Ages in between 17-40
  • Mostly tech-savvy people
  • LinkedIn
  • Instagram
  • Spotify
  • Coursera and more..
Resource :
https://humber.ca/today/sites/default/files/uploads/
documents/humbercollegebackgrounder.pdf
Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
Persona 1
humber current user persona 2
Persona 2
humber current user persona 1

Empathy Map

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
humber current empathy map

Ideation

User Flow

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
humber current user flow

Style Guide

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
humber current style guide

UI Kit

humber current UI kit
humber current UI kit
humber current UI kit
humber current UI kit

Low Fidelity Sketches

humber current low fidelity sketches
humber current low fidelity sketches
humber current low fidelity sketches
humber current low fidelity sketches
humber current low fidelity sketches

Prototyping

Mid Fidelity Prototype

humber current mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
Desktop VersionMobile Version

Testing

Usability Testing

I have conducted usability testing with 5 participants for three specified tasks.
  • Participants

  • 5
  • Tasks

  • 3
  • Success Rate

  • 75%
Tasks:
  • Find a specific program
  • Find a student in a specific program.
  • Sending a meeting request to a specific person at Humber Current.
I have received following feedback from testing
Based on feedback, I fixed the issues and created a high-fidelity prototype.

High Fidelity Prototype

humber current high fidelity screens
humber current high fidelity screens
humber craft high fidelity screens mobilehumber craft high fidelity screens mobilehumber craft high fidelity screens mobile
humber current cover image
humber current high fidelity screens

Figma Prototype

Reflection

Redesigning my school's website was a fascinating experience in designing how it looks and works. It gave me the opportunity to make something that affects everyone at my college. I learned about the difference between a regular website and one that acts more like an app, which helped me make careful decisions about how to design it. I could create detailed website and make sure it looked good on all kinds of devices. This project helped me grow a lot, teaching me more about designing for users and making me even more excited about creating great digital stuff.

View More Projects

humber craft thumbnail

HumberCraft iOS App Design

UX & UI
As part of my academic project, I was tasked with creating an iOS app for Humber College's industrial students venture, which specializes in selling furniture products.
View Case Study
movie desi thumbnail

MovieDesi : A Movie Ticketing App

UX & UI
I revamped the Humbercurrent website, ensuring responsiveness across both mobile and desktop platforms.
View Case Study
kishansri logo