Alicehacks marked the second hackathon I ever attended and with the Best Design award within reach, I decided to team up alongside three friends – Anita, Laison, and Andrew – to take on the challenge. We went design only, which meant purely focusing on the product and user experience without the fuss of code. This hackathon went extremely smoothly and throughout our time working we were able to have some fun as well, remarkably facing little to no setbacks. Here’s the story on how our team won the Best Design award at Alicehacks, creating a beautiful and innovative product, Hopper Hangout.

As Alicehacks was an online hackathon, our team was able to meet up when necessary and collaborate remotely in the comfort of our own homes. Every good hackathon project starts with a good idea that solves a real problem, underpinned by thorough planning. A few hours before the hackathon started that evening, we started ideating on a shared document. We landed on an idea that would help teens plan hangouts with their friends. For many people, on many occasions it would be extremely time consuming and difficult to plan a day out with friends filled with activities everyone is happy with. We’ve all been there: one friend may hate a certain cuisine, another may groan at excessive walking (yesterday was leg day), and so on. Our solution was to create a mobile app that learns each user’s tastes and preferences, then finding locations using artificial intelligence curation system with online information to automatically create an itinerary based on the preferences of each person in the friend group.

To generate revenue and sustain our application financially, businesses or events would be able to pay for their listing to be featured and prioritised in the curation system. The curation system would still find the best matching places for a friend group, but if there are multiple similar businesses or events that fit the parameters, a sponsor would be prioritised.

Despite being a design project, it was still imperative to consider the technical and business dimensions of the application. Systems such as how each hangout spot is curated in the backend would be integral to the app’s functionality and is deeply tied with how the interface displays the generated itineraries. Moreover, a viable business model is essential for any project’s transition from concept to reality, as it requires financial backing to thrive. Ultimately, product design is not just about the user interface but about how the product functions and serves the user in every way.

With the hackathon underway, we started a FigJam session on Figma where we delineated the user needs and the features in the application. This was a crucial stage of planning as it cemented our idea and pointed us towards a clear end goal. During this step, extra features were introduced as well, making for a feature rich and well-rounded experience. We then populated a kanban board with project tasks and distributed responsibilities among the team. A particularly enjoyable part of this planning stage was coming up with the name of the app. There were certainly lots of different opinions, but we eventually settled on a name we all loved: Hopper Hangout.

Later that night we started the next step in the design process, working on preliminary wireframes. This step is focused on user interface design, ideating for an accessible and beautiful mobile app. I started by sketching out wireframes and UI elements on paper. I find that this approach of starting in a sketchbook has several advantages. It’s a tactile process that engages different cognitive pathways which leads to more creative and free flowing ideas. Drawing on paper is also a quick way to iterate without the constraints of software tools, allowing for rapid exploration of design concepts and layouts. The immediacy of pen on paper also means that ideas can be captured and communicated with minimal delay, which is important in the fast-paced environment of a hackathon.

After initial sketches, we decided to create a brand system for Hopper Hangout. We had to ask ourselves about the user persona and investigate the preferences of our target audience: youth. What colours do they like? What graphics are appealing? What typeface stands out? We are youth so it was easy to answer those questions. We decided to go with a colour palette that was bolder and more colourful than pastels but still neutral enough where it was friendly for all. This consisted of a primary turquoise and dark gray, alongside secondary red, purple, and green. To create a bold and playful aesthetic, Koulen was chosen as the primary typeface with its rounded and tall geometric letters. Manrope was chosen as the secondary typeface as it is easy to read at smaller font sizes while maintaining a modern look. For the graphics, seeing as we were at Alicehacks, the Alice in Wonderland themed hackathon, we chose Alice in Wonderland characters as our graphic of choice. These graphics would be used in the onboarding, friend group icons, and user profile pictures. These graphics were drawn by hand throughout the hackathon.

With our brand system now in place, we dove into creating high-fidelity wireframes. Typically, the product design process would include a medium-fidelity phase, but the fast-paced nature of the hackathon demanded a swift transition to a fully functional and final product. We used Figma for this wireframing process, setting up components to streamline our workflow. Thanks to the groundwork laid on paper, translating our ideas into a high-quality wireframe was seamless. We opted to design everything from scratch, including buttons, switches, and cards, to create a truly bespoke application. This stage sparked the creation of the innovative adaptive app action bar. This innovative element of our application would display a primary action and a secondary action simultaneously without taking up too much screen space. The buttons for primary and secondary actions would be adaptive, meaning the primary action could become the secondary action in some contexts, and vice versa. The actions could also be labeled with text, which would lead to a higher click-through rate from the user. These actions were contextually adaptive, allowing for flexibility in their roles. Text labels for the actions further enhanced user engagement. We chose Google's Material Icons for their simplicity and adaptability to our app's visual style. Throughout this process, we also integrated our custom-designed graphics, adding a fun and unique touch.

After a few hours of wireframing, we took a well-deserved break. We indulged in a light-hearted critique session, roasting some of the less-than-stellar graphic designs from school accounts on Instagram. This “exercise” wasn’t just for laughs; it served as a little review of design principles and helped us identify common pitfalls to avoid in our own app design.

We returned to our Figma project, continuing to work on our wireframes. Simplicity and intuitiveness were our guiding principles. We organized the app's features into three distinct tabs on the bottom navigation bar: home, map, and profile.

Upon opening Hopper Hangout, users would be greeted by the Home tab, a dynamic dashboard displaying upcoming hangouts, recent friend groups, and personalized suggestions for new places to explore. This central hub would encourage user engagement and subtly promote sponsored events or businesses, ensuring a sustainable revenue model for our app.

The map tab presents suggested locations, each tailored to the tastes and preferences of specific friend groups. For instance, a burger joint might be recommended for Friend Group A, while a hiking trail could be suggested for Friend Group B. Users have the option to filter these suggestions by category, choosing from parks, food, entertainment, and more. Additionally, if they choose to share their location, users can see their friends' locations on the map as well. This tab not only enhances local discovery but also strengthens connections between friends.

Finally, the profile tab serves as a hub for managing friend groups and hangouts. Users can view and edit their groups, as well as add new friends via a link or QR code. This streamlined approach ensures that all essential features are easily accessible, contributing to a user-friendly and enjoyable experience.

Early next morning, we crafted the onboarding experience. This critical phase of the user journey sets the initial impression and establishes the app's value proposition. Our objective was to design an onboarding flow that was both informative and engaging, effectively guiding new users through the app's functionalities and benefits in a visually compelling manner. The onboarding also had to learn about the user’s tastes and preferences. This was done with generic questions like “do you enjoy Chinese food” with a slider going from hate it to love it. Users would be able to slide through these questions on cards and tell the app what they like.

After the design was complete, we linked our wireframes into a Figma prototype. This interactive mockup allowed us to simulate the user flow and experience the app as it would function in its final form. Animations were added between page navigations, breathing life into the prototype and adding a touch of polish. The smooth transitions and subtle animations not only enhanced the app's visual appeal but also contributed to a more intuitive and enjoyable user experience.

With our prototype complete, it was time to prepare our submission for the Alicehacks closing ceremony. Andrew created a state diagram to show how all the features and interactions were connected. We opted for a slideshow presentation, narrated by Anita, along with videos on our Devpost highlighting the main features of an app to showcase our project and share our vision with the judges. We poured our hearts and souls into the presentation, highlighting the app's unique features, its potential impact on teen social lives, and the innovative design choices we had made.

Finally, the moment we were all waiting for arrived. The judges announced the winners of each category, and our hearts were pounding with anticipation. When they declared Hopper Hangout the recipient of the Best Design award, we were filled with joy and accomplishment. We had done it! Our hard work, dedication, and innovative design had paid off. We had accomplished our goal while delivering a new and beautifully designed mobile app.

Here are my key takeaways from this experience: A great hackathon project needs a spark of brilliance, an idea that's not only creative and innovative but also addresses a real-world problem that resonates with people. That's what catches the judges' eyes. And of course, in the fast-paced environment of a hackathon, working swiftly is key. But for design, focus on planning out the experience beforehand, iterating early ideas on paper, and creating components in Figma. But above all, it's the shared vision and the proper planning with your teammates that truly ties it all together.

Alicehacks was an absolute blast, and seeing Hopper Hangout be successful was such an amazing experience! I'm hooked on hackathons now and can't wait for the next. Until then, I'll be honing my design skills and working on some other projects. Cheers!