REDESIGNING HUMBER'S EVENTS PAGE
Background
We were assigned the challenge of redesigning Humber College's events page. I wanted to improve its functionality and appeal to be more inviting for visitors to interact with it. This was no small feat as it was already professionally designed, however, I could see areas of improvement for functionality/design that could showcase my learnings from my schoolwork and apply them to a project.
Timeline
4 Weeks
My Role
UX Designer
Stakeholders
Tools
2 other UX Designers
Humber College
Figma
CONTEXT
Problem
The current Humber IGS events page faces issues with a cluttered layout, lack of clear visual hierarchy, and the absence of a prominent call-to-action button, leading to poor user experience, low event participation, and inefficient registration. Additionally, the booking process lacks clarity, and the cancellation procedure is repetitive and cumbersome, impacting transparency and student satisfaction.
Solution
The overall goal for this events page would be to increase engagement. Humber Polytechnic is a fantastic educational institution that deserves engaging, interested students. As such, they need to have an engaging website to interact with, in order to get involved. This can be done in several ways. This can be done in several ways, including increasing the aesthetic appeal of the website, improving the user flow, and creating more general appeal for users to engage with the website.
Who is the target user?
Humber College IGS Students
The Challenge
How can we improve the visual appeal of the existing events page? How can we enhance the visibility of the 'Book Now' functionality? How can we simplify the post-booking management process?
KEY FEATURES
Current Design:
After Redesign:
1
Events Homepage and Booking Page
Current Events Homepage
Redesigned Events Homepage
I enhanced Humber’s color scheme based on the current Humber design system. This led to using the school colours of blue, gold, and white which created a more vibrant website, therefore directly addressing the current lack of visual appeal.
I added playful icons as representations for the actions taken. For instance, a movie ticket stub represents booking an event, a bookmark icon represents saving an activity, and a calendar represents the overview of events. There is also feedback when an event is saved, such as, the number “1” appearing if 1 activity is booked.
Before my redesign, there was just a line between events. After my redesign, I created a clearer separation of events by using visual hierarchy. Each event represented an event ticket with a side to tear off, much like a ticket stub. This effect was created by making the event ticket two different colors. Finally, I introduced a call to action button and also made the ‘saved’ icon more visible.
Current Events Booking Page
Redesigned Events Booking Page
2
Bulk Cancellation of Events
We introduced this feature since there was no way to ‘bulk cancel’ events in the current design of the website. We added the option to ‘bulk cancel’ under the user flow of clicking ‘profile’ and then ‘my events’.
We added a button to ‘manage bookings’, with an option to select one event or all events currently booked. This gave users flexibility of choice on how to manage their bookings.
Lastly, we added a ‘trash bin’ icon to represent the cancellation of an event that the user had previously booked.
IMPACT OF REDESIGN
With the results of user testing on the class of our redesign, we were able to see real feedback from users on the impact of the redesign. They felt as if it was more enticing to use the website now and there was a good use of spacing. In addition, it was an easier experience to book an event, while the overall user experience was elevated.
​
Incorporating the existing Humber Polytechnic website design system into the redesign of the events page was a skill that I developed during this project. Making sure that the page I designed was cohesive and fit like a glove with the rest of the professionally-designed pages was a challenge - but one that I was up for. It is through these difficulties in design that one really puts their skills to the test.