WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME WELCOME
gracechen ☹ ui/ux&design gracechen ☺ ui/ux&design
HACK@BROWN
3D Animation & Design
Theme
Afterschool
Context
Hack@Brown is Brown University's largest, annual hackathon that welcomes high schoolers and college students around the world. Although the format this year was digital, we aimed to have this year's event to be anything but isolating. The theme of "Afterschool" was chosen to communicate a playful, innovative space inspired by the after school hours of our childhood. As one of six people on the design team, I helped develop this year's visual identity across the homepage and registration process. Visit the website here.
My Role
As one of six people on the design team, I helped develop this year's visual identity across the homepage and registration process by creating 3D animations, social media graphics, and miscellaneous UI.
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.
Where and how can we fix this?
In order to promote an engaging online experience, I tackled two main aspects: the homepage and registration process.
Homepage Homepage Homepage Homepage Homepage Homepage Homepage Homepage Homepage Homepage
I was tasked with coming up 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
Deliverables
In the end all three my sketches ended up as final animations on the homepage of the website.
Using Cinema 4D and Adobe Photoshop, I brought to life the third sketch from above and created the following gif of a juice box acting as a battery or "juice" for an ipod.
Social Media + Zoom Backgrounds
Registration Registration Registration Registration Registration Registration Registration Registration Registration Registration
Along with two other members of the design team, we designed the dashboard and registration flow for the hackathon. To emphasize the Afterschool theme, we decided to use various games from our childhood to accompany each section of the registration form. We also decided to include a virtual space where you can interact with sponsors in the dashboard.
Sketches
Virtual Space
Problem
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
Solution
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.
Features
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 also did not fit our time constraint.
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 and include more basic hackathon information.
gracechen ☹ ui/ux&design gracechen ☺ ui/ux&design
EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE EXPLORE MORE
