SDC Website Rebrand

Web Design

Case Study

Market Research

UX/UI

Prototyping

A fresh new look for Social Development Centre Waterloo Region.

Tools:

Figma, Adobe Photoshop, Similarweb

My Role:

UX/UI Designer and Researcher

Project Duration:

12 Weeks

Goal:

Create a consistent brand identity and refresh SDC's outdated website.

Tools:

Figma, Adobe Photoshop, Similarweb

Solution:

Working closely with SDC, we will identify their core values, what they offer to the community, and what they want to display to public on their website. Using Figma, we created a prototype for them to develop.

Goal:

Create a consistent brand identity and refresh SDC's outdated website.

Introduction

This research project took place over the course of the Winter 2025 semester as part of DAC 400: Digital Research Project at the University of Waterloo. Working in a team of three students, we were tasked with partnering with a local non-profit organization to help them rebrand their digital identity, including a logo, colour palette, typography, and a website prototype.

We were to focus on storytelling and a user-centric design to highlight their impact and engage their target audience. After some research and talks with multiple non-profits in the Waterloo Region, we decided to work with the Social Development Centre Region of Waterloo.

This partnership felt especially meaningful to me, as SDC is located just five minutes from where I live. Contributing to an organization rooted in my own community made the work feel both relevant and rewarding.

Problem

SDC’S EXISTING WEBSITE WAS DIFFICULT TO NAVIGATE, LACKED VISUAL COHERENCE, AND DID NOT COMMUNICATE A CLEAR OR COMPELLING BRAND IDENTITY. USERS OFTEN STRUGGLED TO FIND THE INFORMATION THEY NEEDED, RESULTING IN FRUSTRATION AND REDUCED ENGAGEMENT.

Research & Planning

The initial research for this project began before selecting the non-profit we wanted to work with. We didn’t want to waste our time building this identity for an organization that didn’t necessarily need the help. So, we chose four non-profits that could use some help with their current digital identity, and then one that we saw was performing well. Then, using pro-similarweb.com, our own expertise, and focus groups, we performed a competitive analysis. Our categories and metrics were as follows:


Category

Metric 1

Metric 2

Metric 3

Metric 4

Website Traffic and Engagement

Monthly Unique Visitors

Bounce Rate

Average Session Duration

Pages Per Session

Content Quality and Relevance

Clarity of Mission and Goals

Frequency of Updates

Diversity of Media

Call-to-Action Effectiveness

User Experience and Design

Ease of Navigation

Mobile Optimization

Page Load Speed

Accessibility

Conversion Effectiveness

Donation Process

Volunteer Sign-up Flow

Email Capture Effectiveness

Event Registration


Each metric was given a rating out of 5 and then averaged out to give a total score out of 5 for each category. For more subjective metrics like “clarity of mission and goals” or “ease of navigation”, we required some opinions outside of our group of three, so we created a focus group with our classmates and asked them to review some metrics to better inform our final rating, minimize bias and improve the reliability of our scores.

After calculating final ratings, we created two perceptual maps to visually compare the differences in performance between organizations.   



SDC performed the lowest in almost all categories. When we presented our findings to SDC’s executive director, she acknowledged the need for improvement and welcomed the opportunity to collaborate for the semester. While they had recently rebranded their logo and colours, we were invited to focus solely on the website. (We still explored a new logo for coursework purposes, but did not include it in the final prototype.)

The initial research for this project began before selecting the non-profit we wanted to work with. We didn’t want to waste our time building this identity for an organization that didn’t necessarily need the help. So, we chose four non-profits that could use some help with their current digital identity, and then one that we saw was performing well. Then, using pro-similarweb.com, our own expertise, and focus groups, we performed a competitive analysis. Our categories and metrics were as follows:


Category

Metric 1

Metric 2

Metric 3

Metric 4

Website Traffic and Engagement

Monthly Unique Visitors

Bounce Rate

Average Session Duration

Pages Per Session

Content Quality and Relevance

Clarity of Mission and Goals

Frequency of Updates

Diversity of Media

Call-to-Action Effectiveness

User Experience and Design

Ease of Navigation

Mobile Optimization

Page Load Speed

Accessibility

Conversion Effectiveness

Donation Process

Volunteer Sign-up Flow

Email Capture Effectiveness

Event Registration


Each metric was also given a rating out of 5 and then averaged out to give a total score out of four for each category. For more subjective metrics like “clarity of mission and goals” or “ease of navigation”, required some opinions outside of our group of three, so we created a focus group with our classmates and asked them to review some metrics to better inform our final rating, minimize bias and improve the reliability of our scores.

After calculating final ratings, we created two perceptual maps to visually compare the difference in performance between organizations.   


SDC performed the lowest in almost all categories. When we presented our findings to SDC’s executive director, she acknowledged the need for improvement and welcomed the opportunity to collaborate for the semester. While they had recently rebranded their logo and colours, we were invited to focus solely on the website. (We still explored a new logo for coursework purposes, but did not include it in the final prototype.)

Five Core Areas of Improvement

Scroll to see

Five Core Areas of Improvement

1

1

Navigation & UX

Navigation & UX

Navigation & UX

Organize the sidebar for better accessibility and improve the navigation bar and make clearer categories

Five Core Areas of Improvement

2

Consistency & Layout

Consistency & Layout

Consistency & Layout

Ensure a uniform design across all pages and improve spacing, alignment, and section structure

Five Core Areas of Improvement

3

3

Landing Page & Vision

Landing Page & Vision

Landing Page & Vision

Develop a stronger landing page that outlines their vision and values

Five Core Areas of Improvement

4

Branding and Visual Appeal

Branding and Visual Appeal

Branding and Visual Appeal

Create a modern, rounded, and flowing aesthetic

Five Core Areas of Improvement

5

Mobile Optimization

Mobile Optimization

Mobile Optimization

Design a mobile version of the website

Designing the Solution

Before Redesign

Designing the Solution

Our Figma prototype directly addressed the five core areas of improvement through a clean layout and an intuitive navigation system. We reconstructed the navigation bar for clarity, applied a consistent visual style across all pages, and designed a new landing page that clearly communicates SDC’s mission, values, and impact.   

Colour Pallete

Typography

Inter

Inter

Inter

Inter

Designing the Solution

Figma Prototypes

My responsibilities for this project included improving the site’s navigation and redesigning the program pages to create a clearer, more user-friendly experience. Keep scrolling to see what I created:

Designing the Solution

Conclusion

Reflection

Overall, I found this project to be incredibly rewarding. It was amazing to witness the transformation from SDC’s current website to the prototype we delivered. Beyond practicing our research and design skills, we were able to offer real value to a non-profit that needed digital support but lacked the funding to secure it professionally. Seeing SDC’s enthusiastic response to our final work reminded me of the real-world impact good design can have and how design can serve a greater purpose when rooted in the community.

Hypothetical Next Steps

After reviewing our prototype, SDC expressed interest in securing funding to fully develop the website. While my group does not currently have the development experience required to build a project of that scale, I’ve offered to continue working with them in a UX/UI capacity should they bring a developer on board. I look forward to the possibility of seeing our designs come to life and helping ensure the final product remains aligned with the user-centered vision we established.

Ben Mascarenhas

Connect

© Ben Mascarenhas' Portfolio.

Ben Mascarenhas

Connect

© Ben Mascarenhas' Portfolio.

Ben Mascarenhas

Connect

© Ben Mascarenhas' Portfolio.

Ben Mascarenhas

Connect

© Ben Mascarenhas' Portfolio.