Hack@Brown
Design co-lead for the event’s brand identity, 3D modeling and animation, and web design
ROLE
Design Lead
DURATION
Aug- Feb in 2021 - 2023
VISIT SITE
TEAM
Ashley Cai (co-lead)
Carrie An Cheun
Yuki Hayashita
Tiffany Huang
Christine Jeong
Jacob Wismar
Ryan Yan
Joel Yong
DISCIPLINES
Branding
3D Modeling & Animation
Web Design
TOOLS
Cinema 4D
Blender
Figma
OVERVIEW
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.