The Terry Fox Foundation is a well-known Canadian cancer research organization. Through our collaboration spanning over a decade, we have gained a deep understanding of their branding, stakeholders, user base, and objectives. Our involvement has been diverse, ranging from rebranding efforts to the development of their community and school websites, along with various marketing materials.
In this portfolio piece, I will specifically discuss our contributions to the rebranding process and the creation of their main community website and school website. Additionally, I will touch upon our successful management of tasks like database migration and donor management systems.
ROLE: Lead UX Designer and Developer
DURATION: 3 Years | February 2021 – Present
TOOLS: Adobe XD, Principle, React.
00 Project context
The primary objective of this endeavor was to enhance the collective user experience for the diverse spectrum of stakeholders, while simultaneously streamlining content organization through the prism of informational architecture. The previous website exhibited a convoluted structure, replete with an excess of information extraneous to the user journey.
Beyond the mission to enrich the user experience for students, race participants, organizers, and administrators, an additional challenge entailed the integration of a dedicated school-oriented website and an online e-commerce platform.
Design Process
Followed HCD process throughout three weeks
Research
Research Synthesis
Ideate & Design
Design Evaluation
Final Design
Understand & Define
Understanding the current state:
The onset of the pandemic posed a formidable challenge for the Terry Fox Foundation. Lacking a robust online infrastructure, a compelling impetus arose to reconstruct and reposition the organization to resonate more effectively with a younger demographic. Collaborating with the TFF organization was underscored by significant advantages, including a sense of familiarity and an intrinsic grasp of the brand. However, this partnership equally demanded a vigilant check against any inadvertent influence of our personal biases on the design process.
Access to preliminary research, analytics, and insights into pain points encountered by TFF staff were pivotal. Our primary objective was to ensure that this knowledge not only steered us in the right direction but also refrained from unduly influencing the research methodology itself.
Research:
Our research phase entailed a comprehensive exploration of the analytics meticulously provided by the data team. This invaluable resource served as the cornerstone upon which we formulated the research script for our individual interviews and focused group discussions.
Our focus groups were thoughtfully categorized to encompass a diverse range of stakeholders, encompassing students, donors, run organizers, educational institution administrators, TFF staff, and the esteemed TFF Lifers. (A “TFF Lifer” denotes an individual with a profound connection to the organization, having participated in Terry Fox runs or cherishing memories from their childhood related to the cause – this category was deemed essential to capture the essence of the new site’s significance.)
Furthermore, these focus groups were meticulously assembled, taking into account various demographic factors such as age, gender, and geographical location.
Finding Synthesis | Personas
The research phase is the cornerstone of our design process, providing vital insights. Analyzing data informs interview scripts, shaping discussions. This research refines personas, enhancing our understanding of users. Empathy maps become nuanced, driven by real-world experiences. This phase guides design, enabling empathetic and impactful user experiences.
IDEATE
DESIGN GOAL
The research unveiled the critical significance of meticulous site architecture and the imperative to curate a customized user experience, thereby facilitating expeditious and efficient information retrieval for users. This led us to articulate our research design question.
“How might we optimize information accessibility and donation processes for engaged participants, run organizers, and administrators within the Terry Fox Foundation, facilitating seamless entry to pledging platforms, donation gateways, resources, and other pertinent elements?”
In relation to our research question, we conducted an expedited ideation session to generate practical and viable solutions. Drawing insights from our persona, we crafted a user journey map that outlines a potential experience for prospective candidates. This comprehensive mapping allows for a detailed analysis of various elements within the journey, presenting opportunities for implementation that could potentially:
- Delineate the user journey for individuals engaged in School events compared to Community events.
- Devise interactive educational programming to elevate the website’s role as an online resource.
- Establish a dedicated ‘Kids Corner’ incorporating games and diverse online resources.
** User Journey and Site map were completed at this stage.
PROTOTYPING & TESTING
WIREFRAMES
In each design iteration, we begin with low-fi wireframes, using whiteboarding or paper sketches. This step is essential to maintain the intended informational architecture.
Next, we move on to mid-fi wireframes for feature testing and client feedback to ensure their satisfaction.
Finally, based on the input received, we create high-fi wireframes and prototypes for the conclusive stage of user testing.
USER TESTING
HIGH-FI PROTOTYPE
We conducted three rounds of user testing using prototypes of varying fidelity, employing different user testing methods aligned with each round’s specific objectives. During the initial phase with the lo-fi prototype, we focused on the discovery journey, aiming to gain insights into user perceptions of the experience and their underlying needs.
Transitioning to the mid-fi prototype, we assigned users specific tasks to complete and utilized the think-aloud method to gather valuable feedback on enhancing usability.
To achieve a comprehensive understanding of user interactions, we recognized the necessity of testing with a functional prototype.
As a result of these testing sessions, we identified three key areas requiring modification:
Improved differentiation between the School and Community sections was imperative for the website. The decision to create distinct websites stemmed from the need to address user confusion effectively.
A heightened emphasis on distinction for all supplementary events beyond the TFF Run necessitated greater clarity on the homepage.
Elevating the interactivity and engaging narrative of Terry Fox’s history, as well as the preservation of his legacy, was essential for an enjoyable and immersive user experience.
In response to these findings, we proceeded to make appropriate adjustments to the prototype.
Refelections
Deisgning a legacy.
The Terry Fox Foundation, with its rich Canadian history, faced unique challenges when redesigning its legacy website and branding.
Balancing the preservation of Terry Fox’s enduring magic, informed by familiarity, alongside the imperative for change driven by our research findings, was executed with a strategic approach.
Acknowledging the inevitability of change, our approach was underscored by its importance.
Awards
With great pride, I extend heartfelt congratulations to The Terry Fox Foundation and the entire team responsible for the “I’m Not a Quitter” campaign on their well-deserved bronze award from Strategy Magazine’s Marketing Awards!
We are honored to have played a role in supporting this remarkable campaign and cause, led by No Fixed Address and Douglas Coupland, in collaboration with our exceptional team at Scratch.
