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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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%.