St. Joe’s Health Foundation

Supporting the west end community

Role

Web Design, UI/UX Design, Development

Timeline

Approximately 12 Weeks

Deliverables

Landing Page, Speaker Series , Templated Inner Page, Donation Forms, Email Staionary, Modal

Tools

Figma, Adobe Photoshop, HTML, CSS, JS, Luminate Online, Litmus

Holiday Modal Support St Joes screen

The Brief

St. Joe’s Health Foundation is a website that serves the west-end community of Toronto through fundraising which aims to improve emergency care, renovating patient facilities and purchasing equipment and technology The objective was to design the website with the following deliverables:

  • Homepage
  • Speaker Series Page
  • Templated Inner Page for Blog Posts, Events, etc.
  • Donation Forms
  • Email Stationary
  • Modal
all website page designs

The Problem

Through discovery with the client, the major problems identified was the lack of engagement and low click through rates to the donation forms. Other problems uncovered included limited backend support and high interest in events, but difficulty locating specific ones, turning to Google instead.

The Solution

After a few meetings, research & design iterations, we settled on removing donate options in the main navigation, and have the donate button lead directly to the form. A deep dive into their analytics revealed users search 'events' the most, so we brought that into the homepage. For the design, we kept the same font family, but decreased the size and lightened the font. This along with increased whitespace makes the experience more enjoyable and content easier to digest. Due to the limited support on the backend, it was important to create card style assets that could be easily reusable on other pages throughout the site.

Home Page
donation form
speaker series screen card layout
email stationary
templated page