The design phase of this project was drastically accelerated to six months due to a security issue on the previous platform. In my role as UX/UI lead I developed this design from conception to implementation, working closely with content writers,  the back-end lead, and the science community in order to redefine the information architecture, enhance the user experience, and develop a strategic web presence for TRIUMF.

Timeline: 6 months
Team: In-house team of three
Skills:   Wireframing, Creative coding, Prototyping, A/B testing, Usability testing, Branding, Design system creation, No-code front end development

TRIUMF, Canada’s particle accelerator centre, relies on its website for recruitment, funding, education, business, and public disclosure. With a broad portfolio of scientific research and commercial partnerships, their website serves as a vital hub for international engagement and a primary means through with TRIUMF communicates its value to the world. The website has over 100 000 visitors annually.

TRIUMF has been facing challenges due to their website’s lack of intentional design. For many years it has been in a state of disrepair resulting in numerous pain points for their global audience. The site became confusing to navigate, difficult to update and inaccessible. Accessibility laws and a tight security timeline lead to an aggressive project timeline to rethink the way TRIUMF engages with its numerous external users. For a full user research summary please refer to this project: TRIUMF UX Research. 

Previous TRIUMF Website

Leveraging the UX research I previously completed, knowing we had a very short timeline, I focused on a few key aspects of the website: the information architecture, the branding, the home page experience and the research experience.

During my research study I constructed persona and user journey maps which helped us define the structure and design of the website.

Since the logic of the previous website was the greatest pain point users were facing, I directed most of my focus towards creating a more intuitive structure. Using the card sorting data I had previosuly analyzed during my inital UX research study, I created prototypes of navigation menus in Figma. I then conducted A/B tests  numerous usability tests to develop and refine the experience. 

The greatest challenge with this development was the breadth of users who come to TRIUMF, from Vancouver locals concerned about nuclear research, to various electronics companies looking to purchase beamtime, to visiting scientists, to government funding agents who determine the future of TRIUMF.

In order to create a more cohesive TRIUMF story the branding had to be a clear visual throughline which permeated every page on the website. I developed a series of concepts revolving around artistically visualizing the science at TRIUMF. After testing these, I moved forward with a direction based on the Table of Nuclides, the ‘sister’ of the periodic table which shows elements and their half-lives. 

To create more visual interests and an ‘easter egg’ for science enthusiasts I coded an animation using scientific data from the Table of Nuclides to represent isotope decay. This decay concept was well received in focus groups and became a primary branding driver throughout the website. This was reinforced through the use of grids, squares, and colours. Below are a few iterations of the decay animation.

The previous website was also very limited in its imagery and mystified the science at TRIUMF. In the redesign, we chose to show the audiences what a particle accelerator centre really looks like and hoped to inspire them through showing the human side of the scientists who work there instead of only featuring austere machinery.

The new homepage, below, aims to excite and engage young scientists and science enthusiasts, while providing an easy and efficient journey for new and frequent collaborators and government agents among many other user journeys. The principles of the home page were to use an accessible and friendly design to show the science, excite the world about TRIUMF’s mission, and spark new engagements with TRIUMF.

The previous website, below, was inaccessible on mobile. With our new design, we ensured accessibility through mobile-first design principles, colour contrast, and type sizes.

The website launch in early 2025 marked a new beginning for TRIUMF’s digital ecosystem and proved to be a successful case study within the organization for how digital projects can be run.

We received overwhelmingly positive feedback internally and externally from stakeholders and users such as national funding partners and teachers expressing the positive impact of the redesign on TRIUMF’s funding and the improvements in usability. I presented the UX process used to run this project at a national science communication conference, Science Writers and Communicators of Canada, in June 2025.

The implementation of a design system and clarified structure have saved hundreds of hours internally and made TRIUMF more operationally efficient. Due to the accelerated nature of this project, there are still areas of the website currently being designed and improved.