Hamilton Out of the Cold Website Redesign
Goal: To redesign a website for a non-profit as part of a school project with two other students
Role: UX/UI Design
Year: 2024
Background
As part of a project for the University of Toronto School of Continuing Studies UX/UI Design Bootcamp, we were tasked with choosing a non-profit organization that would benefit from a website redesign. My group chose the Hamilton Out of the Cold Website.
The Problem
The current Hamilton Out of the Cold website is outdated, posing a significant challenge in engaging its target audience effectively.
The Solution
To address this, the primary focus of the website redesign project is to create a more user-friendly and informative platform tailored for audiences who may not possess strong technical skills. This is especially important for people wishing to donate on the page.
User Testing, Insights, and Analysis
Our goal was to Identify pain points to the app process, user’s ability to complete tasks below, and to understand user’s satisfaction levels and value that it may bring. To assess the usability of the original Hamilton Out of the Cold website, we asked five volunteers to complete three tasks while we observed the ease with which they could achieve them.
Task 1
User finds the Donate Now button
Task 2
User is able to find the time and location to get a meal on Saturday
Task 3
User finds instructions for becoming a volunteer
User Insights
Sam
Jess
Erin
Julia
Empathy Map
After reviewing our user insights, we completed an I Like, I Wish, What If… analysis. Based on this analysis, we created a Prioritization Matrix.
Prioritization Matrix
User Persona
Based on our user research, we developed a persona of a target user of the Hamilton Out of the Cold website, highlighting their needs and habits. This persona was useful in understanding a potential user’s pain points as we ideated the website redesign.
Ideation and Lo-Fi Wireframe
Proposed Site Map
We wanted to keep the website small, self-contained, and easy to navigate. The main focus is to build a trustworthy website that makes it easy to donate:
RWD Low-Fidelity Wireframes
It was very important to us to make the website both desktop and mobile-friendly. We found that as difficult as the original site was to navigate on desktop, on mobile it was borderline unusable, which almost certainly turned people off of donating to this great organization.
Due to the time constraints of this project and the bootcamp’s pace of turning out assignments, we were only able to prioritize creating three pages , one per each team member. I was responsible for the homepage, as well as the menus and footer.
Style Guide, Testing, and High-Fidelity Wireframe
Style Guide
We decided to keep the orange and blue of the current website consistent with the new website. These colours are emblematic of the Hamilton Out of the Cold brand, with the City of Hamilton lighting the Hamilton sign in front of City Hall in blue and orange in honour of HOOTC’s 25th anniversary. We determined that it would be unwise to stray too far from the iconic branding that the organization has established.
Figma Components
Testing and Iterations
Iteration 1
(Original Website to Lo-Fi Wireframe)
Changed the entire look and feel of website
Donations made easy with many prominent CTAs, one-click donation options, and trustworthy donation modules
Added an easy-to-navigate mobile menu
Ultimately, we decided to create a site that, when fully realized, would only have four pages, plus a Thank You for Donating page. We created three of these pages for this project
Before starting on our high-fidelity wireframe, we tested the effectiveness of the lo-fi wireframe we had created. See usability testing results here
Iteration 2
(Lo-Fi to High-Fi)
Made donation modules more interactive
Made the Find Food module more interactive
Used the “reset scroll position” option for cleaner transitions in Figma prototype
Iteration 3
(Desktop to Mobile)
The homepage header “Make a Donation” button was changed to “Find Food” in mobile for jump-to functionality and ease of use
High-Fidelity Wireframes
Homepage
Donation Page
Donation Page
About Page
Original homepage (visit here)
Comparison
Homepage
Homepage redesign
About Page
Conclusion
The nature of the UX/UI Bootcamp program makes it very difficult to make all of the iterations that I would have liked for this website redesign. From start to finish, we had about 3 weeks for this project. That said, I’m very happy with how far we were able to take the redesign, especially with the time constraints. By prioritizing user needs, we were able to make a more trustworthy, accessible, and engaging website.
With at least one or two more rounds of testing and more feedback, I believe that I could take our design over the finish line and donate it to Hamilton Out of the Cold. As a Hamiltonian, I understand how pervasive the issue of food insecurity is in our city. HOOTC is a very reputable organization, and I would love to give them a website that helps them achieve their fundraising goals and reflects their years of hard work and dedication.