OFFICIAL Washington Tunneling Website Design
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.
Role: Product Designer
Duration: October 2024 - Present
Tools Utilized: Figma
Application Type: Web
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).
MVP
Washington Tunneling is set to compete in the ‘Not-A-Boring-Competition’ at the end of March. With this in mind, our number one goal as the design team is to launch the website before the competition. This means developing an MVP with required features to attract sponsors and increase website traffic during the event. We are actively working on the MVP and will work on enhancing the user interface with more functionality and visual appeal next month after the competition is complete.
