Roblox 2023

Hack@Brown is Brown University's annual hackathon that welcomes high schoolers and college students around the world. We aim to foster a welcoming environment for first-time and experienced hackers alike.

For two years, I co-led the design team to create a brand identity for the event– including art direction, web design, illustrations, and social media.

⚠️ THE PROBLEM

Virtual = Isolated?

Due to the pandemic, we had to transition the hackathon to a fully remote event. Our goal was to actively combat the inherently impersonal and possibly intimidating nature of a virtual hackathon. Specifically, we wanted to encourage hackers of all backgrounds and levels to register and to recreate a way for sponsors and participants to interact – one of the most notable opportunities of an in-person hackathon.

✅ THE SOLUTION

How can we fix this?

In order to promote an engaging online experience, I tackled two main aspects: the homepage and registration process.

PART ONE

The Homepage

I was tasked with sketching and designing elements for a welcoming home page that wouldn't alienate first-time hackers. In the ideation process, I focused on tying in the theme of Afterschool with elements of technology to create playful graphics. In order to create a more visually engaging website, I intended each graphic to be animated as well.

SKETCHES

FINAL DESIGNS

Deliverables

In the end all three my sketches ended up as final animations on the homepage of the website. I used Cinema 4D, Adobe Photoshop, and Blender to bring to life the designs from above.

PART TWO

How can we get users excited about the event?

Along with two other members of the design team, I designed the dashboard and registration flow for the hackathon. Our team was given two goals to keep in mind:

Keep hackers engaged in the weeks leading up to and during the hackathon.
Allow sponsors to interact with participants

THE SOLUTION

A Virtual Playground

After a user registers, they gain access to the Hack@Brown Town, which is a hub of information for all the sponsors and events that will be held.

Through H@B Town you can see various announcements and read up on the sponsors that will be at the event. During the hackathon, hackers are able to use H@B Town to schedule coffee chats with the sponsors or connect with them via email.

PROCESS

We brainstormed many versions of this and looked at various other virtual hackathons to see what worked. For example, one idea was to be able to create an entire virtual space (like gather.town) that users would be able to walk through and build in. However, it was too extravagant for our needs and did not fit our time constraint.

DELIVERABLE

Final Registration Flow

CONCLUSION

Outcome

We reached 1500+ users, facilitated 300+ signups!
Secured $10K+ USD of funding from sponsors
Had more users participate than when the hackathon was in-person!

Takeaways

Be ambitious in brainstorming, but be realistic during execution.
New software isn’t a limitation.
Focus more on mobile optimization next time!

2023 Campfire

In 2023, we finally had our first in-person hackathon since the pandemic and the theme was campfire! We doubled down on our efforts to make the hackathon welcoming to newcomers through our visual branding, and an in-person hackathon as meant lots of merch :)

For the website, we decided on a horizontal layout that sets the scene of a campsite as users scroll across to find more information about the hackathon. The website includes starter kits + templates as well as FAQs about what a hackathon actually is.

Each year, we choose a playful theme to encourage students of all backgrounds to join. "Greenhouse" represents a safe space where students can grow and it hopes to center the event around eco-friendly hacks. We paired a playful serif font with bright colors to evoke feelings of growth and greenery.

In order to differentiate our hackathon, we decided on creating our graphics in three dimensions. Although 3D modeling has a steep learning curve, we took on the challenge of learning these tools in the spirit of growth and learning that our hackathon promotes. As lead, I taught our design team how to use Blender and Cinema4D and set standards for our workflow.

DELIVERABLES

We designed the registration pages and dashboard, marketing graphics, and merch for the event.