OFFICIAL Washington Tunneling Website Design
Role: Product Designer
Duration: October 2024 - June 2025
Tools Utilized: Figma, Framer
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
The previous website felt outdated in both styling and branding, still reflecting the old Hyperloop colors rather than the new Washington Tunneling identity. The team wanted a site that better conveyed engineering, innovation, and a forward-thinking vision—qualities they felt were missing from the old design. With Washington Tunneling’s rebrand, they saw the need for a fresh, modern website, which I worked on throughout the school year. The original site, built on Squarespace, lacked the flexibility and versatility needed for a more dynamic and customized layout. Included are a few screenshots of the old website 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
The main takeaways from the analysis of the engineering clubs was that their mission and values were very clearly stated. They had a great way of pitching themselves to the audience and offering reasons for sponsorship, backed with evidence and statistics. Their design system was minimalistic and fit in well with their brand. They also had great uses of animation, interactive features, and images to aid with visualization.
For the well-known companies, some main takeaways were a very well-developed and a robust design system. They have a very well-developed brand with a clear sales pitch, and clear target audience.
From this market analysis, we developed ideas about our brand messaging, and created some moodboards. Here is my moodboard, and below is the final list of brand keywords that we came up with.
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 agreed upon by Washington Tunneling.
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).
WEBSITE
Using the newly completed branding components, my team and I implemented them into the new Washington Tunneling website. We are continuing to work on this project and are implementing further functionality, like interactive diagrams, and ensuring that all content is present on the website. Included are a few screenshots of the current state of the site, and a link to the Framer page which is now 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.
