Case Study: Junction Vietnam - A Hackathon-Focused NPO
🚀 Overview
Junction Vietnam is the largest hackathon non-profit organizer in Vietnam. After five years in business, it's time for us to rebrand with a new look that reflects our commitment to providing a professional and innovative environment for technology talents to develop and connect them with investors.
To establish ourselves as the premier non-profit hackathon organizer in Vietnam, our website is in need of a "cosmic makeover" to attract more investors and participants, with the ultimate goal of participating in the prestigious Junction Asia Hackathon in 2024. The updated website will emphasize our dedication to fostering tech innovation and nurturing talent while engaging a broader audience, from tech enthusiasts to potential investors.
Our transformation is akin to a spaceship launch, propelling us toward new horizons alongside our investors. It's a journey that mirrors my own growth as a product designer, where I've found opportunities to develop my skills and myself.
Tool: Figma
Plugin: Attention Insight, Color Blind & Redlines
Typography
Space Mono is a versatile typeface that's perfect for space travel-themed designs, and it's even available for Vietnamese characters (and it's free, which is important for a non-profit like ours 😂).
I've used 12 fonts for both desktop and mobile, naming them using a simple format: [H/P][number][D/M/DM], where H/P stands for Headline/Paragraph, and D/M/DM represents Desktop/Mobile/Desktop & Mobile. This naming system helps me keep track of all my fonts and makes it easy to switch between platforms for a product that's designed and managed by a single person.
Color
The blend of three neon colors - purple, green, and yellow - captures the galaxy's vibrant hues and evokes the spacey atmosphere of Junction's hackathons. With gradients and motion (available soon), we hope to create an experience that even people with color vision deficiencies can enjoy.
Our goal is not to have them identify the specific colors we're using, but rather to feel like they're on a spaceship with us, experiencing our spirit from their own unique perspective.
Spacing
For a product designed and maintained by a single person, a standard is essential to ensure consistency throughout the system, from font size, line height, spacing between components, and border radius. Therefore, a 4pt grid system is a great choice, better than the widely used 8pt grid system because it uses multiples of 4 instead of 8. This spacing system is stored in Figma Variables for easy management and consistency.
Button
Buttons are one of the few interactive elements that bridge the digital and physical worlds. As such, buttons are carefully designed with basic states like Default, Hover, Active, and Locked. In the future, we will add more states to better suit the scale of the product.
A rea o f Interest
After completing the design phase, I conducted a study aimed at gauging user perceptions regarding the Hero section of the website, which is the initial element users encounter. Ensuring its effectiveness is paramount since the primary objective of Junction Vietnam is to attract student participants to our hackathon and connect them with investors.
The study results revealed that the 'Ongoing Event' card received less attention, which is concerning because highlighting this information is essential to driving users to our hackathon. To address this concern, I plan to redesign the Hero section in the future, considering various potential solutions such as resizing the headline, adding neon gradient stripes, or adjusting the opacity of the card's Polycarbonate material (inspired by a heat-resistant, flexible plastic with numerous properties suitable for applications in spacecraft 🛰️).
💫 To infinity, and beyond!
The rebranding journey of Junction Vietnam was not without its challenges, but it was a rewarding experience. We are a pioneering technology NPO in hosting the largest hackathon in Vietnam, and we are committed to providing a seamless experience for students from both the digital and physical spaces.
We believe that everyone has the potential to achieve great things, and we are here to help them realize their full potential.
It's great to see you here! 😇
I hope you found some great inspiration with my Dribbble shot. Contact me for some fun conversations about product design, cat memes, and the bible.
Have a nice day!
