OFFICIAL Washington Tunneling Website Design
Role: Product Designer
Duration: October 2024 - June 2025
Tools Utilized: Figma, Framer, Adobe Illustrator
Application Type: Web
Background
Washington Tunneling, formerly known as ‘Washington Hyperloop’ is the engineering UW student organization responsible for designing a yearly Tunnel Boring Machine (TBM). They compete at various events across the united states, and the famous ‘Not-A-Boring’ competition. After Covid, the club wanted to veer away from being seen as a ‘Hyperloop’ club, and more of a TBM club, hence the new name. I as a designer was tasked with assisting Washington Tunneling with implementing a complete rebranding for their organization, developing a unique sense of ‘self’, along with redesigning and building them a completely new website.
The OLD WEBSITE
Problem
The old website felt outdated, still showing Hyperloop’s colors instead of Washington Tunneling’s new identity. It lacked the modern look and forward-thinking vision the team wanted.
Goal
Create a fresh, modern site that better reflects engineering, innovation, and the rebrand of Washington Tunneling.
Process
I redesigned the website throughout the school year, moving away from Squarespace’s limited templates toward a more flexible, customized layout. Screenshots of the old site are included for reference.
Market Analysis
My team and I analyzed two categories of competitors in our review. The first was targeted towards engineering clubs and their websites. The second category analyzed well-known companies with highly memorable and strong branding.
Branding
Engineering Clubs
The analysis showed that engineering clubs had mission and values stated clearly. They pitched themselves effectively to audiences, providing strong reasons for sponsorship supported by evidence and statistics. Their design systems were minimalistic, well-aligned with their brand, and enhanced by animations, interactive features, and images for visualization.
Well-Known Companies
These organizations had highly developed design systems and strong branding. Their sales pitches were clear, with well-defined target audiences and consistent messaging.
Takeaways
From this market analysis, we drew inspiration for our brand messaging and created moodboards. Shown here is my moodboard, along with the final list of brand keywords we established.
The next step would be to develop our initial color palette. We had our brand keywords set, which meant that the color selection process would take this into consideration. Below are the color palettes that I came up with. At the very bottom is out final selected color palette.
Logo Development
A new brand meant designing a new logo. After some discussion, the team agreed that we wanted a simplistic design which conveyed the idea of the ‘TBM’ but maintained an ‘engineering’ aesthetic. Here are my ideas that I developed for the logo.
Official logo
Here is the official logo that was developed and finalized in Adobe Illustrator.
Instagram Template
After the logo was developed, the Washington Tunneling business team requested that an Instagram template be designed, so below is my design which is currently being used on their official Instagram.
Information Architecture
LOW FIDELITY
I created low-fidelity wireframes based on the information architecture to start structuring the website. My focus was on incorporating large imagery, ensuring ample space for hero images in the high-fidelity design. This approach enhances the sense of scale, sparks excitement about innovation, and helps users visualize cutting-edge engineering solutions to complex challenges.
Typography & Color pairings
TYPOGRAPHY
Orbitron’s sleek and futuristic typeface complements our emphasis on precision engineering.
This versatile and free-for-commercial-use font lends a contemporary edge to the brand's visual communication, ensuring consistency and legibility across various platforms and materials.
COLOR
A color palette that includes greyscale shades along with vibrant purple and gold strikes a balance between pragmatism and innovation while maintaining a strong connection to the club’s identity (The University of Washington).
BRAND GUIDELINES
I developed comprehensive brand guidelines for Washington Tunneling, including logo usage, typography, and color systems to establish a cohesive visual identity. I also created supporting assets and documentation to ensure consistency across web, print, and digital platforms.
WEBSITE
Using the newly completed branding components, my team and I implemented them into the new Washington Tunneling website. Included are a few screenshots of the current site, and a link to the Framer page which is live.
GUI
The Washington Tunneling team required a new design for a graphical user interface for future iterations of their TBM. I conducted user research and user testing to compile the requirements for this new interface. Below are the results for my final iteration.
SPONSORSHIP FLYER
Washington Tunneling is looking for sponsors. To help them achieve their goal, I designed a sponsorship flyer to provide an introduction to the club to sponsors and to highlight the team’s mission, achievements, and opportunities for collaboration. The flyer was crafted to communicate the value of supporting Washington Tunneling through clear branding, concise messaging, and visually engaging layouts. It includes sections on the club’s innovative engineering work, sponsorship tiers and benefits, and how industry partners can contribute to the future of sustainable transportation.
REFELCTION
Working on the Washington Tunneling rebrand taught me the importance of creating a strong, unified visual identity that communicates both innovation and trust. I learned how critical it is to translate abstract values—like sustainability and progress—into tangible design elements such as typography, color, and layout. One key takeaway was how valuable iterative feedback is in shaping a brand system that resonates with diverse stakeholders, from engineers to sponsors. This project strengthened my ability to balance creativity with clarity while ensuring the brand remained adaptable across digital and print touchpoints.
