← Portfolio


Website redesign · Case study · Nonprofit

SSIPP website cover
Jump to final redesign

Project goals 🎯

A friend reached out on behalf of Student-Senior Isolation Prevention Partnership (SSIPP), a national initiative founded in March 2020 by medical students at the University of Toronto. SSIPP operates nine chapters across Canada, fostering comfort in older adults at risk of social isolation over phone calls. Their website was underdeveloped and needed to be more user-friendly. I used this opportunity to focus on aspects critical to good web design, like content auditing, information architecture, analytics, copywriting, and accessibility. I also intend to lay a solid foundation upon which they can update future content.

Tools 🔧

Strikingly, Google Analytics and Tag Manager, Photoshop, Figma

Project duration 📅

Apr.–May, 2021 (4 weeks)

Quick links 🐇

Step 1: Understanding SSIPP's needs Step 2: What works & what doesn't Step 3: The redesign Visual design Final redesign Gauging success Future considerations

Step 1: Understanding SSIPP's needs

I hosted a Zoom call with three members of SSIPP’s exec team to better understand website goals and what they were looking to get out of this redesign. We agreed upon a one-month project deadline.

Website builder

Using a website builder lets SSIPP to continue updating content with ease once I hand it off. They created their original website using Strikingly, to which I suggested switching to Wix, Wordpress, or Squarespace, which offer more features and storage at similar or lower price points. However, SSIPP already renewed their annual subscription few months prior, so switching builders was not an option for this redesign.

Website goals

  1. Direct healthcare providers and coordinators looking to refer older adults, to their nearest SSIPP chapter
  2. Motivate healthcare professional students to get involved as volunteers
  3. Interest site visitors to take action, provide information on social isolation, and highlight SSIPP’s services

Note: Referrals and volunteer sign ups are submitted through emails and Google Forms unique to each SSIPP chapter. Perhaps centralizing this process can be a consideration for the future.

Target site visitors

Ayesha, Nurse Practitioner Jamal, Physician Assistant Student

Website aesthetics

I encouraged the execs to each come up with three words that describe how the website should look, and feelings to evoke in visitors. I used their words as guidance for when I began the redesign:

Comparing other websites

Let’s have a glance at the landing pages of four non-profit organizations and how they engage with visitors. What they have in common:

American Red Cross website screenshot

American Red Cross

  • Use of red brand colour to accent elements like CTAs
  • Having a CTA on the splash photo (Donate Now) that is different from CTA on main nav bar (Get Help), allowing them to promote different actions that may be equally important
Habitat for Humanity website screenshot

Habitat for Humanity

  • Choice of photo with the sky, further driving their brand colour (blue)
  • Orange CTA button is complementary to blue
  • Dedicating a secondary nav bar to highlight CTA and search functions, separate from the main nav bar

Thorn website screenshot


  • Monochromatic splash photo, text, and CTAs emphasize their orange brand colour
  • A lightly faded splash photo with a smiling girl negates, in a positive manner, the heavy issue Thorn is targeting
  • Elements are spaced out, giving the website a fresher feel relative to most NPO websites
Second Harvest website screenshot

Second Harvest

  • Photo features a green cutting board, broccoli, and a red sweatshirt, which are synonymous with brand colours
  • Clean splash photo with a bold statement

Step 2: What works & what doesn't

Analytics and SEO

SSIPP had not linked Google Analytics to their website, but Strikingly luckily had a few basic metrics seen in the figure below. The values shown are reflective of unique visitors in the last 90 days.

Analytics stats before redesign

There is a noticeable drop in visitors between the homepage (553) and Get Involved! (153) with a conversion rate of 28% - a key area for improvement. The website is accessed mostly through desktop (77%), over mobile (23%), which helps prioritize layout design towards the former. Google is a major traffic route, but I noticed SSIPP left pages’ title tags and meta descriptions blank, which could significantly hinder site visibility on search engines. After redesigning the site, I made sure to fill in those fields, as well as adding alt text to images.

SEO fields filled in
Alt text added to images

Info architecture and page-by-page audit

I mapped out the current info architecture (IA) and captured page screenshots. I noted what already works, suggested areas for improvement, and generated a revised IA.

Current info architecture
Current homepage


What works

  • High-contrast navigation bar
  • CTA button draws attention
  • Organization name is present

To improve

  • At first glance and without scrolling down, the visitors are unable to gather much on what SSIPP is about
  • Rename Get Involved! CTA button to organization-specific actions, like Refer an Older Adult and Join a Chapter, making it easier for visitors to quickly find relevant info
  • About SSIPP and About Us buttons are indistinguishable in meaning; consider renaming the latter to Our Team
  • Low contrast between thin, small orange text on white background

Current about social isolation page

About Social Isolation

What works

  • Bolded statement creates a strong presence
  • Large background photo for emotional impact

To improve

  • Low contrast between paragraph text colour and background image
  • Space can be better utilized to present additional info
  • Risk factors and consequences could be better read as a list

Current about SSIPP page


What works

  • Mission and vision statements are present
  • Good choice of background photo for emotional impact

To improve

  • Low contrast between text and background image
  • A short description detailing each service would benefit visitors
  • Low contrast between orange text and icons, against the grey background
  • Why should I get involved? section would be more relevant under the Get Involved! page and would benefit from a higher placement on the page
  • Swiping to read each point is time consuming; should rather present all points in one shot

Current SSIPP x COVID-19 page


To improve

  • Page lacks visual hierarchy and is text-heavy
  • Page lists chapters’ contact info, which is redundant as it is already listed under the Get Involved! page
  • Resource listings are redundant and should be combined with the ones under About Social Isolation page
  • Are the emails up to date?

Current media page


To improve

  • News should be listed from the newest first
  • Twitter link on top of page can be missed easily
  • Some links are repeats
  • Media inquiry fields at the bottom of the page could be easily missed

Current about us page

About Us

What works

  • Good use of photos, although adding faces for those on the executive team would enhance trust and make the site more personable for visitors

To improve

  • Space taken up by team listings could be condensed
  • Are the team members list up to date?

Current get involved page

Get Involved

What works

  • Chapters’ contact info is clear

To improve

  • The main purpose of the website is to direct referrals of older adults to the nearest SSIPP chapter, so details pertaining to that goal should come first before volunteering info
  • Are the links and emails up to date?

General comments

Step 3: The redesign

Revised info architecture

Revised info architecture

I condensed and streamlined the website’s IA by changing the following:

Lo-fi wireframes

Homepage lo-fi wireframe


  1. Bold statement accompanied by a short description lets visitors to quickly identify the issue SSIPP is targeting
  2. Featuring a video SSIPP execs wanted to include on website landing
  3. A relatable set of statements regarding social isolation, enticing visitors to learn more about the issue; also acts as a second chance to direct visitors to the About Social Isolation subpage
  4. Highlighting news and events to get visitors caught up with what SSIPP has done lately
  5. A personable introduction of the SSIPP team to promote trust in the visitors
  6. Now that visitors are more familiar with SSIPP, the website can encourage them to take action
  7. Visitors also have the option to navigate to subpages from the footer, follow social media, and submit inquiries or feedback; appears across all subpages

About SSIPP lo-fi wireframe


  1. Service descriptions provide visitors with more details on how SSIPP helps fight social isolation
  2. Execs asked to include a list of organizations that have listed SSIPP as a community resource

About Social Isolation lo-fi wireframe

About Social Isolation

  1. A significant statistic or fact to illustrate the seriousness of social isolation
  2. Risk factors and consequences are presented in a list form for better readability

News and Events lo-fi wireframe

News & Events

  1. SSIPP can use this space to highlight an upcoming event or recent news story/event
  2. List of news and events sorted by most recent. I was hoping Strikingly would offer a ‘load more’ feature to save page length, but it was not the case.

Our Team lo-fi wireframe

Our team

Referrals and Volunteering lo-fi wireframe

Referrals & Volunteering

  1. University chapter listings with respective emails for referrals and links to volunteer sign-up forms

Mid-fi wireframes

I used Figma to block out higher fidelity wireframes of the envisioned website layout. I also focused on copywriting for which I worked closely with an exec to ensure the tone and message aligned with how SSIPP wishes to be perceived by site visitors.

Homepage mid-fi wireframe


About SSIPP mid-fi wireframe


About Social Isolation mid-fi wireframe

About Social Isolation

News and Events mid-fi wireframe

News & Events

Our Team mid-fi wireframe

Our Team

Referrals and Volunteering mid-fi wireframe

Referrals & Volunteering

Visual design

Colours & branding

I kept the website consistent with the organization’s colours, orange and dark grey. I used orange to accent photos, buttons, and captions, while assigning dark grey to header and paragraph text.

Orange accents for photos, buttons, and captions

Graphical elements

I enhanced the emotional appeal of the website using photos obtained and modified through Pexels and Unsplash. Despite the seriousness of social isolation, I chose to evoke hope in visitors by tinting the photos with a soft orange tone. These photos also work to balance out certain text heavy sections on the website.


I initially planned to pair serif and sans-serif typefaces for headers and paragraph text, respectively. However, Strikingly did not allow for this as I explain further under future considerations. I settled on Roboto as it works decently as a header, and even more so as a legible paragraph font.

Final redesign

View the redesigned website at ssipp.info. Certain elements may have changed since, so below are screenshots of the redesign at the time of completion. Note, footers on subpages were cropped to save space.

Homepage redesign


About SSIPP redesign


About Social Isolation redesign

About Social Isolation

News and Events redesign

News & Events
*19 news items were cropped from this screenshot to save space.

Our Team redesign

Our Team
*7 national exec members were cropped to save space. I used placeholder graphics for missing headshots and left space for blurbs, which SSIPP will add at a later date.

Referrals and Volunteering redesign

Referrals & Volunteering

Gauging success

I linked the website with a Google Analytics UA (Universal Analytics) code, which tracks essential metrics such as page view counts, bounce rates, average time spent on a page, etc. I also created triggers using Google Tag Manager to track site visitors interacting with email and volunteer form links on the Referrals & Volunteering page, which are critical to SSIPP’s success. I intend to report back on site performance after a month or two have passed, stay tuned.

Tag manager triggers Metric to gauge success

Future considerations

Centralize volunteer forms

SSIPP is a fast-growing organization that will continue to serve older adults at risk of social isolation well beyond this pandemic. To this end, having a centralized volunteer form, either on a third-party host or on the website itself, may prove beneficial. This would also make it easier to analyze volunteer data across the entire organization, as it would no longer be siloed between chapters.

Switch website builders

Strikingly is decent, but does not offer the flexibility, competitive pricing, and user-friendliness of Wix, Squarespace, or Wordpress. It challenged me to generate work-arounds as some of my earlier design decisions were impacted by Strikingly’s drawbacks. I suggest SSIPP considers switching builders down the line, and submitted feedback to Strikingly (effective May, 2021) in hopes they improve their product for future users.

Feedback to Strikingly

Thanks for reading! Jump into something else? 🤓

← Portfolio