Technova's Hack with Us

As the first hackathon hosted by the University of Waterloo that focuses on marginalized genders, participants from 30+ countries, including 500 hackers, 80 volunteers, and 20 organizers, joined together at TechNova's Hack with Us for a week of preparing, connecting, and hacking. From May to August 2021, I had the opportunity to work alongside 5 other designers in order to innovate the brand identity, deliver the website design, and create social media content for this inaugural event.

Creating the brand is the first thing that the design team was tasked with. More specifically, we wanted to establish the logo, colours, and typography that will represent our organization. As an inaugural event, these initial branding decisions will critically impact how TechNova will be perceived as an organization. As a team, we spent many hours brainstorming and exchanging feedbacks.

The Triple Tile became our logo as it concisely communicates the pillars of our values, which are career, community, and community. As for typography,  Lexend, a font specifically designed to accommadate diverse reading needs, was chosen for our wordmark. Quicksand and Poppins were selected for subtitles and text.

We wanted the feelings conveyed by our visual branding to be in congruence with the community-centered values held by the organization, so we chose vibrant and contrasting tones of pink, teal, and purple for a  colour blind safe palette that portrayed a bright and friendly impression.

I supported our project manager, Jasmine, and our design lead, Brittney, in creating the website for the hackathon, which serves as a one-stop location for all the relevant information regarding the event.

Different users (e.g. hackers, mentors, and sponsers) will have different priorities in mind while visiting the hackathon site. For the single-page application, we defined the navigation bar with the most important sections of the website, so that individuals can easily be directed the section of the website that is the most meaningful to them and perform their desired actions.

However, we wanted to especially prioritize the experience of the hackers and ensure that they can find the information they need with ease. This is reflected in the top-to-bottom hierachy of the webpage.

As the first thing the user sees upon visiting the website, our landing page serves the purpose of delivering the most critical information about the event and enticing the user to read more.

Initially, our design mimiced after the Glassmorphism effect currently in trend. Upon receiving the feedback that the *vibe* that conveyed through the visuals did not match the mood we want to create for our event, we made a pivot and created a new design. Through this process, I learned that what is aesthetic may not always be the most accessible, and it is always important to ensure that the design is in alignment with the brand.

In order to create a more accesible viewing experience, we also included a toggle bar to allow the user to shift between light and dark mode!

As a first-time event, how could we convince a potential participant of the value within our event? In the Our Story section, various quoted testimonials are included in order to invite users to glimpse into the perspectives of different individuals (new and experienced hacker, mentor, and organizer) in order to find how this event will resonate with them. For the UI, we decided on a concise layout and a progress bar that gamified the user experience in order to encourage the user to view through each different story.

After numerous iterations on Figma, we handed the hi-fidelity wireframes off to the dev team, who made the design come to life through code ✨👀

Check out our Figma files and the final website!

As the hackathon is approaching and hacker applications are open, my role as a designer became more marketing-oriented — we wanted to encourage engagement by creating a social media presence for everyone to stay informed on our event updates.

Below are some of the social media assets that I helped to create!

For me, TechNova's mission is about building an inclusive and uplifting community. I am grateful to have been a part of such a passionate and multidisciplinary team, where each individual seeks to contribute to a more inclusive tech culture through uplifting the underrepresented individuals ✨

As my first time partifipating in the behind-the-scene process of building a virtual event and collaborating with the developing team to create a complete wireframe, there were many valuable takeaways. To name a few,

1. The iterative process of receiving and improving upon feedbacks is a foundational aspect of any design project. Don't expect everything to be perfect on the first try!
2. Accessibility should be prioritized over aesthetics.
3. Listening to the unique perspectives of others help immensely in expanding the context. When everyone's voice is involved, better ideas are generated.