Hacklytics 2024

Role
Director of Design, Chief Designer

Team
3 Designers, 4 Developers, 2 Orgs

Client
Data Science @ Georgia Tech

Problem

Hacklytics is a yearly Data Science hackathon run by Data Science @ Georgia Tech, and for the first time, Startup Exchange. Hacklytics is an event with a history of strong themes that tie projects around a central concept. For 2024, that theme is Around The World. After ImmerseGT, DSGT tapped Startup Exchange's brand new world-class design team to envision a new look and website for Hacklytics 2024.

Solution

Hacklytics was our first external collaboration project, and the final result was significantly richer for the experience. Together, DSGT and Startup Exchange designers and developers put together the most impressive hackathon website we've ever seen, and a brand identity that was honed over months to be the essence of "Around The World".

Process

User Research

Startup Exchange maintains a constant practice of user research. Through observation, interviews, and feedback cycles, we relentlessly keep a pulse on the student startup community, and reflect on every project we undertake.

For Hacklytics, we had a wealth of ideas and feedback. Combining our experiences through ImmerseGT with the super experienced DSGT team's prior Hacklytics events, we were able to hone in on pain points with prior brands. Our main deliverable for this project was the Hacklytics website, and after a handoff DSGT would handle much of the remaining marketing and asset production, so our focus was distinctly on the UX of the hackathon website.

Results

The points of improvement were clear:

1. Speed — Hacklytics 2023's website was beautiful, but a dynamic star simulation running in the background slowed the site down to a crawl. It was difficult to reach the FAQ without the website freezing up.

2. Theme — It was important that the website strongly reflected the yearly theme, but we received feedback that as a temporary site, the hackathon website could afford to be more dynamic in representing that theme.

3. Details — Prior websites often required participants to reach out to staff to find out more details. We wanted the hacklytics site to answer almost any question you could have.

4. Brightness! — Tech and hackathons especially are so prone to dark mode heavy designs. Data Science forces us to take a look at the world around us, and people wanted to see something that reflected the light of the world.

Prototypes

We started with branding pitches, none of which proved popular.

While polished, none of these reflected the theme strongly enough by themselves. I asked one of the designers on my team to brainstorm around the feedback we received from the first round, and while we didn't strike gold, we started to find nuggets of it.

In particular, these earthy colors and globe assets were really popular with the DSGT team—it was exactly what they had imagined. Unfortunately, these were example assets from the internet, and I wasn't confident I still had the skill or the time to produce work of that quality as the only designer with 3D experience. DSGT also brought up that it would be a clever idea to focus the Around the World idea on traveling the globe, and each section of the site could feature a different region.

The earthy colors, calm serif vibes, and airline aesthetic proved to be a good bet. Unfortunately, the globes were still *really* popular, so I set out to start modeling a scene that fit the theme.

I had also already started messing with exporting my C4D work to Spline, an excellent 3D tool for the web. If I was going to go through the efforts of spending weeks on a 3D design, we wanted it to be interactive and dynamic.

These globes were fine, but I didn't quite have the skill to pull off the background space, and everyone who looked at the globe gave the feedback that it felt too flat and at-odds with the rest of the design. I realized instead of a simple texture map I'd have to get to it and try to model a low-poly globe. I hadn't modeled something this specific before, so there was a lot of exploring to do.

My first approach was to layer two spheres, one for the ocean and one for the land, and see if just displaying the top layer of the land would give the illusion I was going for.

I wasn't actually that far off—this two sphere trick was actually essential to the effect. Originally, I just tried to eyeball which polygons to keep and which to delete off the outer sphere. Over a lot of experimentation (thank you DSGT for keeping up with me through every tweak! I admire your patience), I arrived at a half-decent solution that involved fractalizing a map of the world in Photoshop, using it as a depth map to deform the outer sphere, and then selecting and merging polygons so that I could create one final shape for the globe.

Up next, we wanted to add interconnected dots and spheres around the globe to signify travel, and a flight path around the whole globe to match DSGT's logo, which has a wave overlayed on top of a globe.

I started with the wave, because it seemed a lot easier. This was simple, because I used the same trick meta used for their new logo.

Deforming a torus around the globe produced the simple path shape with the motion I wanted! Materials work on these objects would take a LOT of tuning, however, and come much later.

Up next were the dots and flight paths. Initially, I had no clue how to do this, but it turns out some people on the internet have discovered a really clever way to do this! Unfortunately, most of the technical help is quite old, so I had to implement the basic principle myself in the most recent version of Cinema 4D.

The principle is simple:

1. Place little dots on a sphere's surface, and link these dots with paths

2. Turn these paths into rope simulations, and add a repelling force in the center of the sphere.

3. Increase the strength of this force to push the "ropes" outwards until they look like flight paths connecting the dots, outside of the sphere. All that's left is to fine tune!

From here, all that remained was tuning the paths, materials, and exporting everything to Spline.

The Website

Now outside of the globe, there was a whole site to design. We had a list of sections and key info to include, and from our discussions and brief we knew the key point was to have each section "transport" the user to a different location.

This initial concept was solid aesthetically, particularly in terms of typography, but I got feedback that the website still felt too same-y. The airline windows didn't feel transformative so much as like little accents.

After many iterations, I continued to receive the same feedback and realized I had dug myself into one vision of the site, and I needed to think differently. When a project continues to stay stuck in one place, I find it's helpful to delete everything and take a *wildly* different approach. About the only thing I kept was the typography and the cute little airline separators.

The idea here was for each section to become a full screen page, taking the whole viewport, where background assets and a bold color palette make the pages visually distinct, and tie you to one region.

The biggest challenge with this brief was the conflict between the ideas that the page should feel consistently part of one theme, but each section should feel transformative. I struggled with this for a while — how do I make each section feel completely different, but still part of the same website? I'm really happy with this solution, which solves this problem a few ways:

1. Background images that are entirely different in form and style, due to the varying architecture of different regions, but partially match in aesthetic by maintaining this black and white, overlayed and heavily layered implementation.

2. Bright, bold colors that take the whole page and make each section its own—but the way these colors blend with each other and the background images is similar enough to feel the same.

3. Typographic and stylistic flourishes, like large headers and the scrolling coordinate dividers that both focus the user's vision on one section, but make the user realize when a new section is seen.

I was really happy with this vision, but the client pointed out that this design felt too bold for their brand, and that they wouldn't feel comfortable with this wildly different shift in graphic style. However, elements of it were well-liked, so we decided to compromise on a style that replaced the bright colors with faded, blurred flags on top of a similar background.

I felt this shift began to diminish the uniqueness of each section, so we found a solution where we doubled and tripled the size of the background images so the architecture itself would be more transformative.

With all parties satisfied, I moved on to an iterative process of carefully arranging and designing each section, gathering feedback, and refining until each page felt just right. Some of my designers went in and added gorgeous flourishes to fit with the theme where they made sense, that really tie the whole site together:

Of course, while I wrote about each section separately, all of these processes, including the globe, were happening simultaneously, and constantly influencing each other. This is one of my favorite parts of complex projects like this.

Once we had the core design spec finalized, we began a handoff to the DSGT dev team, and a developer from SX who joined them to help out. During the development process there were a few more exchanges to help translate the design, and especially the globe, to a dynamic live website, but design was mostly hands-off aside from providing feedback.

I'm incredibly impressed by the final product they produced, and think it's one of the best hackathon websites I've ever seen.

Final Product

View the website here.

Reflection

Hacklytics was a complicated, large project that involved managing a bigger team than I had before, working across not just multiple departments of SX but with a whole new org, and involved a level of skill development that not every project can push me to. I'm thrilled with the result we came up with, and learned a lot.

1. Collaboration creates friction, and friction polishes diamonds — I won't lie—working with so many asks and perspectives was frustrating at times, and made everyone feel like the project was taking more time than it really should. However, the whole team is proud of the final result, and I'm so glad we didn't just stop at the earlier pitches. The constant iteration over months led to a brand and website that is much stronger than most hackathons.

2. Push yourself to tackle the unknown — I had no idea if I was able to make the globe when we started, but I'm incredibly glad that we pushed for it and didn't settle for the simpler map style. I learned so much on this project that I'll get to take forward to future work.