Hack bac

Building a discoverable event website resulting in increased student engagement and a 25% increase in event registration.

My role

UX Designer, Researcher, and Interaction lead


Design, Research, and Client Leadership


Figma, Illustrator, Optimal Workshop, Asana


3 week design + 1 week build
A page design for the event details section of a hackathon website.
A design for a page outlining the organization's mission and history.


Setting clear goals

My five-person design team entered this project with a few key goals in mind. From the beginning of the project, we understood the importance of seamlessly integrating with the provided registration portal and organization branding. We recognized the mission of our client, The Black Alumni Collective (BAC), and set goals to ensure that we created a discoverable, organized, and intuitive standalone website for their event while also understanding and showcasing HackBAC's mission.
An illustration of three characters creating goals.

Finding a first impression

To begin, our team looked into last year's HackBAC website by completing a heuristic evaluation, or an audit, of the strengths and weaknesses of the site.
The first issue we found was that the HackBAC interface was unable to be found on the D!Lab webpage or the school's portal. The only way to find the page was through the search function.

When the page was located, the menu on the right side of the page was inactive and event registration was only available through email, complicating the registration process and decreasing potential engagement.
A screenshot of this organizations original hackathon interface.

Checking out the competition

We decided to complete a competitive analysis including other competitors that offer similar resources and events as our client in order to gain insights and obtain inspirational design ideas. The chart below shows our feature inventory of different competitors. The common features found were registration, tracks, about us, about the sponsors, and FAQs.
A feature inventory for five competing hackathon events.
We also conducted Pluses and Deltas, and found that most of the sites have a clear navigation system, call to action, and consistent branding of their organization and what they offer.
A plus delta chart for five competing hackathon events.

What users are saying

After looking at competitive websites, we decided it was time to speak with real-world users to hear and learn from their past experiences. We conducted user interviews to understand the target audiences’ experience and their needs when registering students for an event. These participants included division directors and DEI coordinators who had experience finding and registering students for events. After compiling the information from these interviews, we began synthesizing our data with an affinity map that included the key themes and insights gathered.

15 user interviews with our target audience showed a need for

Organizational structure

Registration functionality

Discoverable information

Past student

Partnership &

Engagement opportunities


Envisioning our users

After examining our affinity map, we moved into creating user personas at the request of our client. These personas were created as stand-ins for real users of the site, using information given to us in interviews, to generalize the target audience and humanize our approach to our design. We further defined our users by synthesizing quotations from our target audiences.
An illustration of three characters and important quotes that they are saying.

Each audience has unique needs

With the users in mind, we created problem statements. We used these problem statements to effectively inform the rest of our design process and considered the various goals of our project through the eyes of both our target users and our client.

HackBAC needs a central landing page for their event so that more schools and students will register.

Educators need to have access to necessary registration information so that they can easily register.

Students need to have access to organized, thorough event expectations so that they can actively participate.

A map to success

To combat the disorganization problem faced by users, we created a card sorting survey. Our 15 participants created 4 main categories with between 70% and 100% of people placing information in these categories. Using information collected from card sorting, we created a site map for the HackBAC 2023 website. We placed these topics under the categories mentioned previously to give ourselves a roadmap for when we began designing the site itself. Using our site map as a skeleton, we created two user flows showing the ideal route users would take to complete a task and, using these frameworks to guide us, began the drafting up designs.
A flow chart detailing the site map for a hackathon website.


Setting a strong foundation

As one of the design leads on this project, I aided in creating the style guide for our design system. We were given the hex codes and the initial branding graphics, but we also added our own graphics throughout the design. This design system ensured that all aspects of the design were seamlessly integrated together to fit our client's vision for the site.
An illustration of two hands sketching out logistics.

Sketching it out

With our initial design plans in mind, we conducted a design studio. We each had 30 minutes to sketch up our initial ideas for the key screens that users would be interacting with on the site. Following these initial sketches, we came together to share our ideas and agree upon the layout and elements for these pages. During this sketching studio process, I took time to investigate if each decision made was achievable within the no-code constraints that the client gave us by consistently checking SquareSpace’s limitations.
Low fidelity sketches for pages of a hackathon website.

Making the design digital

After agreeing upon our initial screen design, the other design lead and I moved to Figma to turn the screen into a digital reality. We laid out mid-fidelity wireframes to bring these screens to life and created a clickable prototype to use for our usability testing.
A low fidelity screen for the home page of a hackathon event.

Time for a test run

Using this prototype, we conducted 12 usability tests with adults & H.S. students, gaining insight from both of our target user groups. We asked these users to discover relevant event information and complete event registration. All 12 users were able to complete the two assigned tasks successfully and praised the way we organized information in a digestible manner. That being said, we also came away with 3 key insights to improve upon from our usability tests by identifying areas of confusion for our tested users.

5 Users
were confused about “history” as the title for the previous events page.

3 users
felt that font sizes were abnormally large and that page spacing was off.

2 users
were confused about the design and layout of keynote speakers on the contributors page.


Applying user feedback

Based on the feedback from our usability tests, my design lead partner and I implemented these changes and created a high-fidelity prototype. We started by changing the titles on our primary navigation from "History" to "Past Events." This decision was made to clarify the information available on that page. We downsized the fonts and call-to-action buttons to make the pages cleaner, while still maintaining legibility. Lastly, we revised the overall layout of the contributors section to limit visual distraction and increase consistency.
A screen including contributors for a hackathon event.

Designed for success

Our team was asked to build out this website for our client using SquareSpace. Though we did implement minor visual improvements when transferring our design from Figma to Squarespace, it was a seamless process that we were happy to see through to the end.
The home screen of a website design for a hackathon event.
Our team successfully completed our goals of creating a standalone website for the hackathon that supports registration functionality and provides users with access to organized information supporting the credibility of the HackBAC program and increasing this year's registration by 25%.


Time to reflect

With this being a client project, I was able to learn the importance of keeping stakeholders involved and updated as much as possible. We met one to two times a week with our clients and it paid off. Our team shared our progress and the research-based decisions we were making, while our clients had room to ask questions, provide suggestions, and feel included in the decisions made. This allowed us to develop a strong partnership that led to a successful design execution. Our site build was fully adaptable and no-code, ensuring that our clients can easily update the site as HackBAC continues to grow.
An illustration of a character on stairs with a pencil drawing her path upward.

Check out my other work