Washington Hyperloop Website Redesign
The Hyperloop is a form of rapid land-based transportation popularized by Elon Musk in 2013. The goal is for a pod to travel in an underground vacuum tube at speeds up to 700 mph, thus eliminating much of the market for air travel. This mode of transport would allow passengers to travel between cities such as San Francisco and Los Angeles in just 30 minutes.
At Washington Hyperloop at the University of Washington, we would compete against other Hyperloop teams around the world to see who can build the best pod to travel the quickest within the certain distance. There were some complications this year due to COVID, but we still continued just in case something came up.
Take a look at our website:
https://www.uwhyperloop.com/Overview
Timeframe: 9 months
Role: Head UX/UI Designer
Tools: Figma/Illustrator/Rhino 3D Modeling
Team Members: Danny Truong, Justin Zhao (Lead), Katrina Filer, Karina Shirokova
Initial Planning
The team and I decided that due to the uncertainty of the coming year because of COVID, we thought that we should have at least two projects to work on during our 9 months together. For one project, we decided to redesign the current Hyperloop website to make the aesthetic more modern and easier to maneuver. The other project was to create a 3D model of the Hyperloop pod to deliver to our engineers. I was the only person on the team with prior knowledge to UX/UI design, so I took the role of being the leader for the redesign of the website.
To begin the redesign process, I decided that we should breakdown the website by each pages to see what every section consisted of and the purpose of the page. The best way to do this was to create a user flow chart breaking down all the pathways that a typical user can experience while interacting with the website.
Takeaways
From this user flow chart, we noticed many things that can be improved upon. For instance...
1. The Contact Us Page can be accessed with three different buttons, two from the Sponsorship page and one from the top navigation bar. (Redundant)
2. The unnoticeable links between some pages, such as the Sponsorship page to the Our Sponsors page. There were barely any indication and it was a surprised to most of us on the team.
3. We all agreed that the Pod page and the Teams page was the highlight of the website since it showcased the pod that was being made and the people who worked on the team at the time.
Overall, the old website still had many usable features that can be incorporated into our redesign, which leads to our next plan of action: creating our brand identity.
Brand Identity
Before we wanted to progress in our website redesign process, my team and I decided we should create a type of brand that we want to showcase to our audience. We created the Washington Hyperloop Brand Identity Manifesto. This is what we aspire the club to represent as we are creating our Hyperloop pod and website. Here, we talk about the purpose of the manifesto (Preamble), the foundations of the club, our overall ideals for the club, our font/color choices, and our logo.
Preamble
Washington Hyperloop’s original goal was to build a competition pod in an annual cycle to compete in the SpaceX Hyperloop competition. The past competitions focused on chasing pure speed, a race to see which team can engineer a machine to travel on a track the fastest. However, due to the recent cancellations of the SpaceX competition, Washington Hyperloop has to adapt to a new direction. The design team’s role is to reflect the new holistic approach to the concept of Hyperloop in our new visual identity.
Foundations
Our club runs on the foundations that are set for the people curious and interested in partaking in our activities. Some of these foundations include:
- A group of friends that come together to make intricate and new
- Creating a welcoming culture, open to a diversity of people and ideas
- Driven to improve, striving for perfection
- Constantly adapting to new challenges
Ideals
To understand more about the clubs ideals, we had to get them from the other leaders of Hyperloop. We surveyed all of the leaders from the different subteams and received many great answers about their thoughts for the club's ideals. We categorized everyone's answers into five essential values and tailored them around design. We have...
Innovative: New and modernized ideas are the fuel that propels Washington Hyperloop forward.
Adaptable: Design, iterate, and execute. We turn the challenges we face into opportunities for exploration and improvement. We take risks and learn from failures.
Motivated: We believe people perform their best when they are self driven, and we hold each other accountable to produce high quality work.
Welcoming: We want to foster a lasting community. To pick people up from different starting points, and drop them off wherever they wish to go, regardless of the final destination.
Industrious: A strong work ethic is non-negotiable. Commit to the grind, and rest at the end, not the middle.
Typography/Colors
As for our fonts and colors, we looked through a variety of them and found that these were the best ones that represented us. We chose...
Fonts:
Ailerons (Logo/Titles): Ailerons by Adilson Gonzales perfectly embodies our drive for innovation. Its sleek and elegant design makes Ailerons the perfect spokesperson for Washington Hyperloop.
Ubuntu (Headings): Ubuntu is a more friendly type family that balances readability with aesthetics. With a mixture of rounded and pointed terminals, its stylization pairs well with Ailerons while still portraying our creative mindset and adaptive nature.
Nunito Regular (Body): Nunito is an easily readable sans serif that captures our playful essence. Its rounded terminals provide a down-to-earth atmosphere and an efficient reading experience at smaller point sizes.
Colors:
Platinum (#E6E6E6), Silver (#B3B3B3), Neon Purple (#801CEA), Purple (#4C17A0), Dark Purple(#1D1528):
Platinum captures the quality of our work at Washington Hyperloop. As the name suggests, this color maintains the level of professionalism we put forth. Graphically, this off-white color makes our visuals more approachable and is thus perfect for our palette.
Purple symbolizes creativity and dignity. An innovative desire is the biggest asset we share regardless of subteam, and we are bonded together because of it. Bringing purple into the palette allows a bold expression of our passion to create. With a bright neon shade, we add highlights that instantly attract the eye and establish a futuristic aesthetic. To complement this, we also incorporate a very dark purple shade that brings our other colors to the foreground while quietly synchronizing our visuals.
Logomark
Lastly, for our logo, we interviewed David Coven, one of the club founders, and he quoted: “the loop is the symbol of the competition, the symbol of the yearly cycle, but most importantly it’s the symbol of the connectedness of everyone on the team”. We wanted to represent both inner, cyclical movement, and forward movement as a unit. The left inner wings represent the direction of the team and the cut out section shows we are not afraid of breaking boundaries in order to keep on moving. The variations in line weight add dimension to the overall look. Paired with Ailerons, our logo represents the best engineering RSO at the University.
Design System
With everything almost in place, I helped the group by creating a style guide for us and future designers of the club. If the future UX designer wanted a reference to our current design, then they can easily access it here. Everything is included, from the color choices, typography, and even the moodboard that we quickly created as a motivation for our website design.
Final Design
After many deliberations and ideas combining together, we came up with a final design that we and the rest of the team really like. We created a really cool landing page and many different screens that worked well for each section of the website.
The video below shows the creativity of our team. We made it so that our logo and pod comes in and out as if it was glitching. This idea was based off one of our mockups seen earlier.
In the photos below, you will see the general layout of our website. It contains many images of our pods, descriptions about who we are and what we have built, and a lot of other things as well.
Reflection
Throughout the Hyperloop journey, I was always uncertain about what our future would hold. Because of Covid, I was scared that I would have nothing to do. However, my team was very awesome! They were also scared, just like me, but we knew that we wanted to utilize this club to the fullest. Coming out with a completely new website that both me and the team enjoyed making made the experience very fun for all. I am glad that we stuck through the worst and now have something to show for it.
I initially felt like the effort I put into the club was minimal. However, once I was assigned the role to be the lead UX Designer, all that changed. I was there for every meeting, I helped come up with ideas and solutions to problems, and I even felt like a mentor on the team since I was giving advice to my teammates. I was a senior and a lot of my teammates were either sophomores or juniors. Being asked questions about the club and UW in general made me feel like I was helping them very much.
The best times during this journey were the biweekly in-person meetings that the team lead set up for us. He thought it was best that we try to stay connected through these tough times with boba runs or dinner. Every hang out was always fun and I felt like I was able to become closer friends with them too. We would just chat about life, the club, school, etc. These conversations felt like they could have gone on for forever.
One of the more difficult times during this journey was prioritizing this club during midterm or finals week. It always felt like a lot of us were missing out on our weekly meetings since we were out studying and grinding to do well on our tests. Plus, because we were busy studying, it made us less productive on our website redesign. This made the project feel like it would not be completed on time. However, once those midterm or finals week ended we came back together and were knocking things off our todo list left and right. Whenever we were in a meeting together, we all pitched in and completed many of our tasks then and there. It felt like those weeks of studying didn't happen and because of that, we were always on schedule to complete the website.
Overall, this project and club was a really great experience. I got to become a lead UX Designer and had the opportunity to help out analyze some of the survey results, which makes me a researcher as well. This club has given me many opportunities to become a leader and that has really played out well for me. I felt more confident in my abilities and skills to redesign a website and plan out how this process should be done. It also really helped that my teammates were all willing to take a chance on me and I made sure that I did not make them regret it.
