The finished mainsite:

Check out the site at
https://hackbeanpot.com/

The Design Process:

Stage 1

Theme:

Brainstorming & Ideation

One of the defining features of our Hackathon is our yearly theme changes. As someone who was initially prompted to participate in HackBeanpot because of the adorable and enticing design of the website, I was highly motivated to find a theme that resonated with HBP's core values of:

• community

• non-competitiveness

• beginner-friendly

• open communication

• diversity.

Our design team collaboratively synthesized theme ideas during brainstorming sessions, and iteratively developed prospective ideas based on feedback.

After coming up with a few ideas, I chose to expand on two theme concepts in particular:
1. Playground
2. Science Experiments

Drawing creative inspiration from Dribbble and Behance, I explored both directions, ultimately choosing Scientific Experimentation based on team feedback and my own connection to the concept.

Stage 2A

This consisted of:

• gathering inspiration from Dribble & Behance

• synthesizing brand identity: colors, fonts, taglines

• designing social media marketing materials

• crafting mock wireframes & design collateral

• brainstorming theme-specific events, activities, and decorations

Cultivating Potential Theme Concept

Over the next 3 weeks, I continued to cultivate the theme concept of Mad Experimentation, in preparation for pitching my idea to the entire team.

Stage 2B

Advocating for Potential Theme Concept

After thoroughly delving into the theme concept, I pitched my idea along with the other components of my system, aspiring to have my theme selected.

Stage 3

Finalized Concept: Facing "failure" with theme proposal

Despite my efforts, the team ultimately went in a different direction for the Hackathon's 2024 Theme: Under the Sea

One of my biggest strengths as a designer and team player lies in my ability to adapt quickly and fully empathize with and comprehend others' ideas.

While my proposed theme was not selected, I have great confidence in and respect for the visions of my fellow designers.

I truly recognize the brilliance of our chosen theme, Under the Sea, for the 2024 Hackathon. Its ethos of exploration, curiosity, and wonder aligns seamlessly with our core values. Even from the pitch's temporary filler design assets, it was clear that the entire design system had been meticulously considered, resulting in a comprehensive and engaging theme.

Throughout the last month of the summer, the design team worked on finalizing the brand identity for Under The Sea.

We considered design assets that could be utilized across the website, promotional materials, and more.

Stage 4

Finalizing Themed Brand Identity

Mainsite Wireframes

After developing themed design assets, me and the other UI/UX engineer on the team got to work, designing low fidelity wireframes for the main site according to the Under the Sea theme. To do this, we leveraged preexisting design materials such as the wireframes for the main site from last year.

As a designer, I've come to appreciate that, while it's enjoyable to build things from the ground up, there's merit in maintaining consistency. Recognizing the success and integrity of last year's hackathon wireframes, we decided to leverage them as a foundation for our current work instead of starting anew.

Our focus was on understanding how the website sections were originally organized and identifying opportunities for enhancing user experience, navigation, and interaction. As UI/UX designers, our role extends beyond crafting aesthetically pleasing interfaces; we also have the responsibility to advocate for and prioritize optimizing the overall user experience.

We split our responsability for the lofis based on sections. Notable changes I made to our low fidelity wireframes were:

• Arrow navigations for cards in testimony section

• Blurred cards for unselected testimonies in testimony section

• Labeled questions by type in faq section

In between iterations for low fidelity screens, I made sure to leverage my design team for critique and feedback.

*I've noticed that it is especially helpful when asking for feedback on new design features, to provide before vs. after examples, and explore multiple iterations of ideas.

Stage 1

Planning & Low Fidelity Wireframes

After several rounds of revisions, we were confident in the layout of our mainsite and ready to start implementing the themed design system.

Transitioning from low to mid-fidelity wireframes posed more challenges than redesigning our low-fidelity frames. We needed to navigate the intricate balance between creativity and practicality.

Pictured are some of the poor design decisions we made along the way (and subsequently rectified ofc!)
-misuse of colors
-clustered design elements
-suboptimal scaling of design elements or text

After exclusively getting critique from other designers, on the 3rd week of working on our high fidelity wireframe, we asked for feedback from the rest of the Hackathon team (Software engineers, Sponsorship coordinators, Social Outreach coordinators, Directors, etc.)

Despite our relative satisfaction with the designs, gaining insights into how other stakeholders interpreted them proved invaluable. We received a wealth of extremely helpful feedback, even uncovering areas for improvement that we hadn't considered. User feedback, in particular, played a crucial role in refining our design solution.

Check out the deployed site here!

Stage 2

Mid-High Fidelity Wireframes

Key Design Considerations

Throughout this process, I consistently asked myself critical questions:

• Is this color or button accessible?

• Is this the primary call-to-action on the screen?

• Is the chosen color and typeface the optimal choice to convey this?

• Is this element enhancing or detracting from the content/section?

• Does my design adhere to usability and information hierarchy principles?

First Iterations

Design Challenges

Through iterative A/B testing with cross-functional teams, we pinpointed these issues, gathering feedback to refine our design choices and enhance the user experience.

Cross-Team Collaboration & Final Revisions

Reflection & Ongoing Tasks

This UI/UX design project stands out as my most pivotal and foundational experience to date. It provided me with valuable practice in crafting a design idea and strategy from the ground up, advocating for my designs, and navigating the expectations of diverse stakeholders. Throughout the process, I honed my skills in iteratively refining designs and addressing unforeseen design conflicts with agility.

What makes this design project particularly significant to me is the dual role I play. In addition to shaping the site's design, I've taken on the role of a software developer within the team this fall. This unique combination allows me to not only conceptualize but also implement my designs. It represents my most substantial end-to-end project thus far, and the journey is still ongoing.

Currently, my focus lies on incorporating animations into our main site design, crafting wireframes for the live site, and conceptualizing designs for both internal and external event merchandise. This multifaceted involvement has provided me with a holistic understanding of the project's lifecycle.

Furthermore, the collaborative ethos within the team aligns seamlessly with our shared values of a close-knit community, diversity, and inclusiveness. I am grateful for the supportive professional and social environment fostered by my team, which enhances the overall richness of this transformative experience.

Team <3

Design

Tech

Excited to share more details about my journey with HBP as they come! ૮ ˶ᵔ ᵕ ᵔ˶ ა