HackBAC
HackBAC is a Social Justice hackathon dedicated to empowering BIPOC youths (grades 8-12) to create design solutions.
Client
St. Andrews Episcopal School
Services
UI & UX Design
Industries
Ecommerce
Duration
2.5 weeks
The Challenge
We were tasked with redesigning the current site into a standalone platform.
The new site needed to:
- support registration
- show work from previous years
- provide prospective teachers and participants with all the information they needed to sign up.
HackBAC’s existing web presence was fragmented across multiple pages under a larger organization’s site, making it difficult for users (mainly DEI coordinators and school decision-makers) to quickly understand what HackBAC is, how to register, or why the program is credible.
While a prototype for a standalone site had been created in the past, it remained unpublished and outdated, requiring revisions to reflect current goals and content needs.
The Process
Research
With that foundation, we began our research by conducting a site audit of the existing web presence. This allowed us to assess the current content, structure, and user touchpoints, helping us identify how HackBAC was (or wasn't) communicating its mission, offerings, and credibility through its digital presence.
One of the key constraints in this project was the requirement to build the final website using Squarespace, a platform our team had no prior experience with. This added a layer of complexity, as we had to quickly familiarize ourselves with its capabilities while also working within its limitations in layout flexibility, fixed components, and restricted customization options.
Additionally, there were delays in receiving contact information for potential user interview participants from the client. Given our tight 3 week project timeline, we used this waiting period to study Squarespace’s features and limitations in-depth and began structuring the website framework early, ensuring we could move forward without losing momentum.
Once we received contact information for key stakeholders, we conducted interviews to better understand how users discover programs like HackBAC, what information they prioritize, and the challenges they face during decision-making and registration.
To identify shared patterns across different stakeholders and surface the most pressing issues, we organized the findings from interviews into an affinity map. Clustering quotes and observations allowed us to clearly define user needs, highlight common pain points, and uncover actionable design opportunities that informed the next phase of our process.
Synthesis
Through our research, we identified key insights that revealed shared frustrations among stakeholders, including hard-to-navigate websites, a lack of past program results or testimonials, and limited time or patience to sift through disorganized content.
These findings led to several clear design opportunities: prominently showcasing HackBAC’s mission and past success stories, surfacing essential logistics early (such as event details, cost, and eligibility), improving the registration experience with a clearer call-to-action and integrated form, and using visual storytelling, through photos, testimonials, and student projects, to quickly establish trust and generate interest.
Based on our research, we developed two key personas: Samantha, a DEI coordinator who wants to provide meaningful experiences for her students but needs clear, credible information before recommending programs; and Andrew, a curious and motivated high school student who seeks engaging opportunities but often struggles to find or access the right information.
After, we created a task flow that reflects how the targeted user, DEI coordinator, might navigate the site from first landing to registration. The journey begins on the Home Page, where users are introduced to HackBAC’s mission and value. From there, they explore the upcoming event details, build trust through team bios and past event highlights, and ultimately proceed to register their students. The site’s information architecture was intentionally designed to guide users through this flow intuitively while reinforcing credibility at each step.
Ideation
With our task flow and design opportunities defined, we created wireframes that prioritized both user needs and the technical constraints of Squarespace. The layouts were intentionally kept simple and modular to ensure they could be implemented smoothly within the platform’s limited customization options.
The wireframes underwent several rounds of usability testing with potential users, who were asked to explore the site, assess its credibility, and complete the registration flow. Overall, participants found the navigation intuitive and the structure easy to follow. Most feedback focused on improving the accessibility and visibility of specific content, which directly informed key revisions in our final design.
This leads us to our final site!
Link: https://www.hackbac.org