BostonHacks

Boston University's largest student-run hackathon.

UX Design

UI Design

Art Direction

Project Overview

Role: UX Designer
Team: 5 UX Designers
Tools: Figma, FigJam
Timeline: 7 months (2024)

BostonHacks is an annual 48-hour hackathon at Boston University that brings together 300+ students nationwide to build technology-driven solutions. Organized by five teams — Design, Tech, Sponsorship, Marketing, and Logistics — the event fosters technical creativity and collaboration.

In 2024, the focus expanded to developing a strong, unified theme that aligned the hackathon’s online presence, participant experience, and sponsor engagement under a single, visually cohesive brand.

The Challenge

How do we design a cohesive visual identity that aligns with BostonHacks' mission of technology innovation and excites participants and sponsors?

Solution & Impact

We began the design process with a team-wide FigJam session to brainstorm potential themes, and narrowed down our choices to four choices:

After doing a vote, the majority vote decided on space, specifically the idea of “Interstellar Innovation”— a space-inspired theme to hackers to explore the future of technology through creativity and imagination.

🎨 The theme would guide our visual identity and branding, informing everything from the color palette and logo to social media and interface design to the hackathon tracks and activities.

Brand Guide

After finalizing our theme and conducting user research, we developed our brand guide. Our visual identity is inspired by a futuristic space aesthetic infused with vibrant, energetic reds and neons, evoking the feeling of movement, depth, and digital distortion.

User Research

Who is our target user? What might they want to get out of a hackathon?

To better understand the needs of typical BostonHacks participants, I conducted UX research by reviewing past participant feedback, analyzing social media engagement, and asking about common behaviors among hackathon attendees. From here, we developed a persona.

Initial Design

Because of we already have an idea of our theme & assets, we skipped making low- fidelity wireframes, and went straight to making the high-fidelity ones. Every year, we have an established user flow as our guideline.

Referring to the user persona we created, we wanted our wireframe to address and solve a few pain points:

After this, we created our first mobile high-fidelity wireframe!

After refining our design and testing it by showing drafts to our team (engineers, product managers, marketers, and sponsorship recruiters) and incorporating their feedback. This review-and-revise cycle led to the following improvements on our two sections:

Final Design

After finalizing these changes, we handed the completed wireframes to our engineers who built them into a working website. We then fleshed out our mobile wireframe to a desktop version as well.

Sponsorship Packet

Using the information our sponsorship recruiter sent, I designed the sponsorship packet, applying the "Interstellar Innovation" theme and brand guide to it. Our final packet contributed to securing $5,000+ in funding from various organizations.

Other deliverables

I also designed a few social media posts, as well as stickers that were then distributed to all of our hackers!

Key Outcomes
Reflections

Designing for BostonHacks reminded me how much design influences the way people experience and connect with an event. From setting the tone with our theme to shaping each visual touchpoint, I saw firsthand how thoughtful design can create energy, clarity, and excitement.

This project pushed me to:

  • Collaborate closely across teams—tech, marketing, sponsorship—to align on a shared vision

  • Balance storytelling and usability in everything from logos to landing pages

  • Design with accessibility and scalability in mind, knowing our work would reach hundreds of participants

It was rewarding to see our design decisions come to life and contribute to such a vibrant, mission-driven community. This experience deepened my belief that great design brings people together, and that it starts with being intentional!

Want to connect?

Create a free website with Framer, the website builder loved by startups, designers and agencies.