● Case Study

Rebranding JDRF Canada to Breakthrough T1D™ Canada

Overview

Client

Breakthrough T1D Canada (Formely JDRF Canada)

Visit

breakthrought1d.ca

Role

UX/UI Designer @ Flipp Advertising

Services

UI Design
Branding
Prototyping

Tools

Figma
Adobe Illustrator

Year

2024

Challenges

JDRF Canada, the Canadian affiliate of the international organization formerly known as JDRF, needed to transition its website to align with the new Breakthrough T1D™ branding. This rebranding reflected a broader recognition of the impact of type 1 diabetes across all ages. The updated website had to launch alongside the rebranding marketing campaign.

Key challenges included:

Retaining the existing website structure to maintain familiarity for Canadian users.
Adopting the new branding style while ensuring layouts were optimized for usability and accessibility.
Meeting WCAG 2.2 AA accessibility standards and optimizing responsiveness.
Designing for bilingual content in both English and French.
Delivering the project within a tight timeline.

Processes

1. Providing a Detailed Sitemap

I created a detailed sitemap of the existing website, enabling the client and their copywriters to streamline content while maintaining the familiar structure.

2. Implementing New Branding

I analyzed the international Breakthrough T1D™ brand guidelines and developed a comprehensive stylesheet for developers. This included detailed guidance on typography, color palettes, and visual elements to ensure consistency with the new branding while meeting WCAG 2.2 AA accessibility standards.

3. Optimizing Layouts

To enhance usability, I refined existing layouts by reducing visual clutter and improving content hierarchy. These adjustments ensured that the design worked seamlessly with the new branding without disrupting user familiarity.

4. Designing Modular Components for Efficiency

To meet the tight deadline, I created a redesigned components page containing all reusable elements used across the site. This modular approach empowered developers to implement changes efficiently without redesigning individual pages.

5. Designing Modular Components for Efficiency

Leveraging my front-end knowledge, I provided detailed CSS guidelines for typography and hi-fi prototypes showcasing animations and interactions. These references ensured smooth implementation of visual elements and functionality.

6. Bilingual Design References

I delivered design references for both English and French versions of the website, ensuring consistency in layout, branding, and accessibility across languages.

Results

The website successfully relaunched alongside the Breakthrough T1D™ rebranding campaign, featuring a refreshed design optimized for accessibility, responsiveness, and bilingual usability. By retaining familiar structures while introducing modernized branding elements, the project achieved a seamless transition that resonated with Canadian audiences. The modular components and detailed guidelines empowered developers to implement changes efficiently, meeting the tight timeline without compromising quality.