Ashley Zhang - TotalityHacks

Duration: 6 months (1.16.18 – 7.23.18)

Type: Team (worked with co-founders, software engineers)

Role: Director of Design

Tools: Adobe XD, InDesign

TotalityHacks is the concept for an independent collegiate hackathon without the limitations of a university, born after co-founders John Reinstra (Stanford '20) and Jason F. Scharff (Duke '21) observed excessive variations in energy and dedication at many university-hosted hackathons. For more information, read the Medium article I wrote about designing Totality Hacks. Although TotalityHacks never came into fruition, it was an incredible experience working on a team and developing my design skills!

The Challenge

. As the team's director of design, my task was to create a style guide and design the mobile application, website, and more, conveying the innovative energy behind Totality's existence through the visual design. I worked closely with all members of the team, including programmers, outreach, and sponsorship to make sure my designs met their needs. We wanted everything to be easily legible and professional, yet full of personality and vibrancy to reflect the goals of Totality.

Style Guide

One of my first jobs was to formalize a color palette and font scheme that could be used consistently across our forward facing marketing materials and tech stacks as well as our internal systems and even sponsorship documentation. I formalized this design language into a simple one page style guide for other team members to reference.

Colors and Logo

Totality represents a new type of hackathon. The primary icon, the Totality sun, has a dual meaning. First, the name Totality comes from the total solar eclipse. The negative space represents the moon blocking the sun as would happen moments before totality. Secondly, the sun also represents a new day in the same way Totality represents a new hackathon.

The sun logo is simple, memorable, and symbolic. Our primary gradient colors, Totality pink and orange, are eye-catching while also approachable. Moreover, these colors are not affiliated with many universities, reinforcing our independence.

The logo also provides immense flexibility. It can be black with a color or black sun on a white background (which is good for print materials and documents), all-white on a gradient background (which is good for web design), or white with a color or white sun on a black background (which is good for other promotional materials and swag such as t-shirts).

Fonts

I also picked out three font options to use for all materials: Ubuntu light all caps, Ubuntu regular, and Open Sans light. I chose Ubuntu light all caps for the most important headings because it’s eye-catching yet easy to read, and Ubuntu regular for secondary headings because it’s simple and modern with a twist. Open Sans Light is great for any body text because it’s easy to read, and it keeps large amounts of text from looking too crowded or overwhelming.

These style guidelines are used for designing everything from our website to sponsorship materials to internal meeting notes.

Website Redesign

The initial website landing page was all black to give a sense of mystery before opening up to the world. As we prepared to fully launch to the world, we needed to update our design to match our brand. The black was a bit too somber and serious, and from a design standpoint, the usage of pure black is often seen as too stark, especially in such large quantities. Therefore, I redesigned the front page to feature the orange and magenta gradient with white text, making it seem more approachable.

I continued this design throughout the login and registration pages, mobile application, and live website.