TR1X Website Design and Development
Brittany Steiner
Creating a digital experience that could be bold for the brand and reassuring for patients
Client: TR1X
Collaboration with: Wizardly
Roles: Art Director, Project Lead
Disciplines: Creative Direction · Web Design · Design Systems · Team Direction · Client Presentations · Developer Handoff
Years: 2025
TR1X needed a digital presence that could speak to two very different audiences: the broader biotech community and patients considering participation in clinical trials.
I helped shape the creative direction alongside the Wizardly design team, then took the lead once the direction was approved. From there, I guided the project through design and development, balancing hands-on design with directing another designer, evolving the design system, shaping page content and UX, and managing client approvals and developer handoff.
Creative direction
Finding a visual direction bold enough to stand apart in biotech while creating a more reassuring experience for clinical trial patients
We began with a collaborative moodboarding session before developing three creative directions, including one intentionally bold concept that pushed beyond the expected visual language of biotech.
I worked with our Creative Director to refine the concepts and ensure each had a distinct point of view, then presented the directions to the TR1X team. The client gravitated toward the boldest direction for the corporate brand, while another felt better suited to the more reassuring experience they wanted for clinical trial patients.
We refined the two together, creating a visual language that could shift in tone and align with their various target audience.
Creative directions developed for TR1X and its clinical trial experience
Leading the project through launch
Once the creative direction and homepage were approved, I led the wider site through design and development. For each page, I focused first on the audience, what needed to be communicated, and how the content should flow, often refining client-provided copy before moving into design.
I balanced hands-on design with directing another designer, using Loom to share goals and my initial thinking while leaving room for them to explore. I reviewed the work to keep new ideas aligned with the brand and design system. Alongside design, I managed client reviews, revisions, and development handoff, keeping both workstreams on track toward launch.
The TR1X Figma file, organized into brand, web design and development pages
Interaction & Motion
Turning TR1X’s layered visual language into interactive moments that move with users throughout the experience
Bringing movement through the homepage
Meg developed the layered gradient graphic that became a key part of the brand direction. I had the idea to bring it to life through motion, transforming the static graphic into an animated hero.
From there, I wanted the interaction to extend beyond the header. I pulled the round gradient form from the graphic and envisioned it traveling with users as they scrolled, disappearing and reappearing between sections to create a visual thread through the homepage.
I mocked up the interaction in Jitter to communicate the movement and timing to our developer. I intentionally kept it exclusive to the homepage, where it could create a more expressive brand experience without getting in the way of the site's more content-focused pages.
The animated TR1X homepage hero — engineering cures for autoimmune diseases
Prototyping an ambitious interaction to explore what was possible, then simplifying the idea into an experience better suited to the web
For the program highlights, I explored how a layered graphic developed during creative direction could become an interactive way to navigate TR1X’s three programs. My original concept connected it to the scrolling orb, creating a more dimensional experience that transformed as users moved through the content. Through that process of animating, I realized the original concept was becoming better suited to a linear animation than an interactive website.
The original layered program-highlight concept, prototyped in LottieLab
I simplified the experience into three interactive layers, with each program coming forward and filling with the brand gradient when selected. I prototyped the final interaction in LottieLab as well, giving development a clear model for how it should behave. The final interaction kept the depth and movement of the original idea while creating something clearer, more intuitive, and better suited to the web.
Like this project
Posted Sep 20, 2026
Designed and launched a website for TR1X, balancing bold and reassuring visuals for diverse audiences.
Likes
0
Views
5
