This case study is best viewed on desktop!
Thank you for your understanding <3
How Far We’ve Come, How Far We’ll Go
DubHacks '24 Branding
Timeline
Feb 2024 - Oct 2024
My Role
Lead Visual Designer
Illustration & Animation
Web Design
Techical Communications
Celebrated the 10th anniversary of UW Seattle's largest Collegiate Hackathon with meaningful interactions.
Crafted an inclusive & approachable branding for first-time hackers.
Problem Scope
What is DubHacks?
As the largest hackathon in the Pacific Northwest, we partnered with Intel, Amazon, and T-Mobile to challenge 1,200+ students of all background to innovate technology responsively.
To celebrate DubHacks’ 10th anniversary, we reflect on our childhood dreams, aspirations, and nostalgic memories, looking back to where it all began.
To create a welcoming & inclusive community for underrepresented students, we chose a medium that is unconventional to our audiences — Illustrations
My Deliverables
01. Ideate:
Track Animals
A friendly visual branding fosters emotional connections with hackers. These track animals evolve to their adult versions throughout the event.
✴ Translates complex track information into engaging visual assets
✴ Evolutions of characters symbolizes growth and echo our nostalgic theme.
Sheepuff
Leaf Sheep
Angelfin
Sea Angel
✴ Simplifies character design into abstract symbols for prints.
✴ Make changes iteratively from internal & director critiques.
✴ Translate animations into code using Lottie and After Effect.
✴ Prototypes the website & interactive elements using Figma.
02. Contextualize:
Grow Your Track Animals!
To reflect "How Far We've Come, How Far We'll Go", we designed "Pokémon Cards" for hackers to place on their name tags for the event.
✴ A playful, Pokémon-inspired "Track Stamp" that "evolve" as hackers participate in events.
✴ Color-coded track system that enable hackers identify and connect with other who share similar interest.
✴ A key user touchpoint that makes information accessible.
✴ Allow customization with Track Stamps based on hackers' interests, improving track visibility.
✴ Simplify team formation and facilitate hacker networking.
✴ Show the evolution of Sponsors logos spanning the past 10 years.
✴ Align with our reflective theme while adhering to brand guidelines.
✴ Communicate with sponsors with detailed mockups for approval & feedbacks.
Hackers Love them!
03. Consolidate
Narrate 10 Years of DubHacks
Looking back in time, we curated DubHack's online presence and pictures from the past 10 years for hackers to learn and explore.
04. Amplify: Brand Identity Across Platforms
Collaborate with cross-functional teams to meet Sponsors and Hacker's needs in a fast-paced, Agile environment.
✴ A design guideline that unifies website & mobile experience.
✴ Swags to redeem throughout the event using DubCoin, which Hackers can earn by attending workshops, career fairs, & submitting a project.
05. Day-Of Communications
During the event, I mentored a student in using Figma’s variant animations, guiding them in creating interactive prototypes. It was incredibly rewarding to see their excitement and to share a mutual passion for motion design!
I also enjoyed answering hackers questions, helping them troubleshoot, and getting to know their innovative projects!
My Process
01. Theme Explorations
In the early ideation stage, I proposed a bakery theme to capture the celebratory, warm, and nostalgic feelings of 10th anniversary.
Ultimately, we agreed upon another designer's concept — children's book illustration & organic brush strokes — for its negative space & adaptability to future changes.
02. Then… Comes Critiques
Previous design teams raised whether the illustrative, children’s book-inspired style would resonate with the tech community. While the chosen theme is subtle and adaptable, it fails to communicate our vision.
To pivot, I led several projects over the summer to further develop the art direction, pushing conceptions to productions.
03. Embrace Ambiguity
I navigated the vague problem space of nostalgia & galaxy ocean, taking inspiration from sea creatures to create unique, evolving characters that evolve into their adult forms, paying tribute to our childhood memories of Pokémon Trading Cards. This project became my proudest passion project!
Navigate through ambiguity & constraints is hard
but deeply rewarding :]
04. User Research is what makes it “on brand”
Engaged a TCG expert to enhance card information for event appeal. Key questions covered overall tribute clarity, visual design appeal, and relevance of stats/abilities.
Through iterations, I switched the typeface to Gill Sans, softened the colors for the nostalgic feel, and cleaned up track informations for readability.
Test-printed samples to refine color grading and enhance text legibility.
04. Web-optimized Animation
Large file size hurts loading time, and has been a constraint for creativity. Stacking layers of high-resolution images and animate with CSS is unrealistic.
Using After Effect, I exported a mp4 under 2MB for the landing page while preserving high resolutions, saving developer's time.
What I learned:
✴ Designers are Team Players
Working cross-functionally, I adapted my tone and materials to effectively engage each team, bridging gaps across disciplines. With tech, I addressed concerns about loading times and presented prototype DEMO to explain the expected behaviors. With logistics, I used mockups to align our visions with merchandise. With sponsorship, I visualize logo use cases to reduce back-and-forth emails.
✴ Navigate through Constraints
I brought numerous ideas to production while navigating various real-world constraints. I learned that if I want something to happen, I must continually push forward and improve my presentations. Many challenges aren’t impossible; they often stem from inadequate communication.
Some Next-Steps:
✴ Advocate for Meaningful Interactions & Animations
I will continue to advocate for the value of animation in enhancing emotional user experiences, creating lasting memories for users that go beyond functionality. In the future, I'm excited to deepen my skills in Rive's state machines to deliver even more light-weighted and interactive interfaces that respond intuitively to user actions.
✴ Refine Judging Process UX
Post DubHacks 2024, I plan to survey judges and participants to optimize judging processes. Building off our Hacker Profile, which is currently used for redeeming merch, we can streamline table assignments and judging notifications in one place. This will distribute judges more fairly and reduce downtime & frustrations.