HackDuke

Code for Good is a really special hackathon because of its emphasis on social good. Participants choose one of four tracks - energy and environment, inequality, health, and education - and create solutions that align with their track. Local experts and non-profit leaders give talks and inspire the participants. The winners of each category get to choose a charity of their choice to donate the prize money to. All these details (and more) demonstrate Code for Good's mission of making the world a better place, and I knew I needed to reflect that mission throughout my designs.

Beginning this project in Fall 2020, we saw firsthand how impact starts with one person. Whether that be doing your part to minimize the spread of Covid-19 or to support the BLM movement, your individual decisions add up and impact those around you. This idea that your individual decision might not have much weight, but your overtime your efforts and influence can cause change felt especially relevant in 2020, and it was the foundation of our designs for Code for Good.

We loved how this video gave so much character to abstract shapes, and thought it would work perfectly to use similar visuals to illustrated how one person's actions make an impact over time. We gathered futher inspiration for color, typography, animations, and interactions until we came to a consensus.

After settling on the rebrand theme idea, I started researching other hackathon designs. From my research, I decided I wanted the website to be one long page, as I noticed that the best hackathon websites kept their sites simple. Hackathon participants don't have much time to navigate a complex website, but hackathons should also be fun, creative, and inspiring, so I knew my designs needed to balance simplicity and fun.

With all this in mind, we began developing the design system, including typography, color scheme, and logos.

We designed some visual assets to be reused throughout everything we designed, which allowed for consistency and cohesiveness.

After Code for Good wrapped up, we had a few weeks of winter break, and then the Ideate planning began! I have also previously participated in the designathon, so I was super excited to get to help plan it this time around. As a participant, I loved the creative, collaborative atmosphere of Ideate. The designathon aims to explore how design and innovation interact across fields. Participants are encouraged to think outside the box to come up with creative solutions to real world problems, not just make a pretty interface.

Ideate also sees a lot of participants without a ton of design experience, so I wanted to make the website feel warm and welcoming to those outside their comfort zone. The team and I began gathering inspiration and brainstorming themes. We returned with visuals and concepts to discuss, and from there decided we all liked bright, vibrant color palettes and organic, fluid shapes, as we felt like it inspired creativity and curiosity. After agreeing on this idea, we found some visuals we all liked to make sure we were all on the same page as we started designing.

We then decided on a color palette and typography.

We experimented with gradients, opacity, color, and shadows. None of the below designs were used, but they helped land on something we really loved.