HackDavis
Explore your potential.

HackDavis 2022

Visual Identity, Web Design, Development Collaboration
HackDavis
SUMMER 2021 - SPRING 2022
View the website

How might we inspire students to explore their potential?

Summary

Project Overview

Timeline
June 2021 - April 2022
Team
Cheryl Cai, Fajar Akhter, Andy Do
Roles
Branding/visual design, UI/UX Design, prototyping
Tools
Figma, Adobe Illustrator, Notion, Pinterest, Slack, HTML/CSS
Mission
I set out to create a hacker experience that extends beyond the screen. I hoped to grow our presence on campus and reach students aspiring to be creators, leaders, designers, and developers.
Problem
Many students were both excited and overwhelmed with the return to the in-person college experience. The transition period was filled with unease and uncertainty as students with hopes and dreams were forced to adapt and compromise.

We saw our campus coming together to adapt, pivot, and move forward.

"How might we capture this unity and encourage our community to embrace this journey in the new post-pandemic world?

...How might we tell the story of our epic comeback?"

Contributions to the team
I quickly passed ideas and rationale back and forth between designers and developers during the development stage.

I learned the value of the technical perspective as I led communication between design and technical teams. Developer input is not a barrier but offers a new perspective that pushes me to refine my design for inclusion and efficiency.

We came together to work within limitations, address edge cases, and distill complex problems into simple, elegant solutions.

Acting as the bridge, I learned it's less about what you do, but how you bring people together.
Impact

I infused encouragement and delight into our products and promotional materials that built up anticipation for the big hackathon day.

I boosted Instagram content interactions by +1287%, reached 8000+ accounts, and increased our follower count by +21.5% within a year.

750+ students attended, 150 projects were submitted, and secured $14,000+ in sponsorships.

So, what is HackDavis?

HackDavis is the first major collegiate hackathon at UC Davis where over 700 students, hackers, and creators come together for 24 hours of hacking.

HackDavis is a student-run event that challenges its participants to hack for social good and explore the intersection between technology and society. Directors prepare all year for the event through teams including design, operations, technical, marketing, sponsorship, external relations, and finance.

We wanted people to build projects with a meaningful impact and hope to foster a community dedicated to social change.

My Role as Design Director

Working Cross-Functionally
I work closely with Technical Directors and engineers to develop the website, ensure feasibility, and deliver assets. I develop marketing assets and hackathon materials in collaboration with Marketing and Sponsorship teams to meet stakeholder demands.

The Design Team
I collaborate with three passionate designers to create user flows, wireframes, and UI components, illustrations, logos, and color palette to use throughout our design system.

Timeline

We recruit new team members in the Spring quarter and begin event preparation and design development over the summer break. In the Fall quarter, we deliver and push out our website designs and begin designing all hackathon materials such as banners, t-shirts, stickers, and opening/closing ceremony slides. In the Winter quarter before the event, we design all the social media and marketing materials.

Design Process

Brand Design + Visual Identity

The Challenge

Many students were both excited and overwhelmed with the return to the in-person college experience. The transition period was filled with unease and uncertainty as students with hopes and dreams were forced to adapt and compromise.

We saw our campus coming together to adapt, pivot, and move forward. We wanted to capture this unity and encourage our community to embrace this journey in the new post-pandemic world.

Change takes time, and we are all navigating this new world together. So be patient, look forward, and grasp onto opportunities where you will grow beyond, do the unexpected, and surprise yourself. Your adventure awaits.

We wanted to tell the story of our epic comeback.

User Research

Target Audience

Our target users are college students 18-24 years old. I created these user personas to guide our design process.
Fred, 18
the fresh unsuspecting hacker
Davis, CA
Fred is a freshman at UC Davis who is not sure what he wants to major in yet. He is excited about the new experiences and communities he will discover this year, but finds it difficult to meet new people on campus.
Chitra, 19
the quarantine hacker
Davis, CA
Chitra is a 2nd year at UC Davis majoring in Economics. After attending HackDavis 2021 virtually, she is thinking about switching her major to Computer Science.

She is still adjusting to living off-campus and is hesitant to bring herself to new events.
Cory, 21
the veteran hacker
Los Angeles, CA
Cory is a 3rd year Design major at UC Davis who enjoyed his first hackathon in person before the pandemic. He is unsure if he wants to attend this year because of health risks and changing circumstances.
Moodboarding

Gathering Inspiration

We arranged our collection of images and design elements into moodboards that evoked a diverse range of emotions, styles, and concepts. I was inspired to create a story that is...
welcoming, inclusive, and inviting.
Sketching with my team on campus! (just kidding, we were posing for our hackathon's promotional video) All of our brainstorming and wireframing happened virtually, but we hit it off when we finally met each other in person!
Sketching

Sketching toward our identity

Inspired by our moodboards, we took to our sketchbooks to visualize the branding direction. We placed our concept sketches into our early website wireframe that was inspired by storyboards of a comic or manga. As users explore our website, we take them on a journey and reveal our identity with each storyboard that appears. Our identity lies in our hope that they will embrace the adventure: that they would look forward, grasp onto opportunities where they will unlock their potential, and do the unexpected.
Visual Identity

Style Guide

Web Design

Register to be a Hacker.

Web Design

Hacker Registration Website

The Registration Website is the one stop shop where hackers can find all general hackathon information. The website is one of the most critical points of contact where we have the opportunity to empower and inspire hackers.
Ideation

Choosing our pathway

We structured our website flow to be intuitive and similar to most hackathon websites for hackers from other schools. I made sure to be mindful of how to represent the content using information architecture and where to place critical call to action buttons to motivate hackers to apply.

I kept our focus on hospitality, simplicity, and flexibility at the forefront of our design.

Responsive Design

In anticipation of changing website deliverables from internal teams and stakeholders, we implemented a modular layout to give our teams the flexibility to feature new information (see The Hub). The design functions like interchangeable building blocks that can be quickly rearranged to balance information with illustration, keeping users engaged at all points.

Delightful Interactions

One of our goals for the site was to play with micro-animations. We focused on the speed and fluidity of moving interactive elements to create a subtly immersive experience. It was fun to work with technical and adjust through feedback and feasibility — I got to see our vision gradually come to life and blend delightful interactions into our design!

Product Preview

Create your Profile

Sign in to personalize your profile with your unique skills and aspirations.
Interaction design

Assemble your team.

Interaction Design

Team Finder App

I was tasked to design an internal tool that helps users form well-rounded teams for the hackathon. Hackers! Assemble.

Product Preview

Create your Profile

Sign in to personalize your profile with your unique skills and aspirations.

Find a Team

Don't have a team? No sweat!

Browse and filter through teams to find teammates that you hope to learn and grow with.

Remember, you bring a unique perspective that will be invaluable to any team!

Create a Team

Need more people on your team?

List your team and highlight your team's vision and needs to hackers.
User Research

What didn't work last time?

In previous years, our extensive mobile application had usability problems, unclear elements, and juggled too many functions.

This year, we were determined to hone in on the purpose of the application and ensure that hackers are guided throughout the team finding process. I hoped this tool can be described as simple, intentional, and personal.

Users: Hackers without teams

Our target audience for the Team Finder are registered hackers who are looking for teammates to take on the hackathon with.

We conducted user research on our own technical team! Our developers are proud hackathon winners and one of the few who experienced the event both virtually and in person.

After learning more about specific hacker needs, I narrowed down several key insights. These insights inspired me to create six main goals to guide the direction of our app.


How might we bring people together and help hackers form balanced teams unified by common visions and aspirations?

Personalize

Create a friendly UI that helps the user to tell their own story and highlight their strengths and goals.

Spotlight

Distill and simplify team information with tags and a purposeful filtering system that highlights their visions and needs.

Guide

Offer users guidance on what to input in text fields. Direct users with confirmation and forgiving feedback.

Localize Flows

Create two separate flows based on the  goals that different users have when using the team finder.

Include

Explore solutions for edge cases to design for inclusion and accessibility.

Within-reach

Integrate this tool into the desktop website where most hackers complete their registration.
Ideation

User Flow

We initially expanded on features from the previous design (announcements, badges, application status, and team finder). Although it offers many delightful features, we realized that hackers are in need of a tool at this stage of registration, rather than a hub of information.
We redirected our focus to the Team Finder feature and restructured our flow. After creating a profile, the user can choose to either find or create a team.
Team Finder User Flow

Wireframes

Rapid prototyping in low to mid fidelity helped my team to map out the components of each screen and establish a foundational flow.
Prrototyping

My responsibility for this project was to help prospective hackers and teams quickly communicate information at a glance.

Build your profile

From our research findings, I learned that it is more efficient for teams to review applications from interested hackers, rather than to search for hackers themselves.

With this in mind, I created the Profile to give hackers a basic personalized template that outlines their skills and hackathon interests/goals. When applying to join teams, Hackers can quickly tailor their bio to different skillsets and tools that teams are looking for.
Sign in with Google and let us take care of the rest!

Personalize your Profile with your Discord username and a short bio about yourself.
Access and edit your Profile from all screens.

Find your team with Team Cards

Bringing people together

I noticed that the strongest teams that make impactful projects are unified by a common goal. I hoped that hackers would come together intentionally and be driven by common visions and aspirations.
Skillsets & Tools
Information at a glance
I optimized team information with hierarchy and categorized tags to allow users to scan and filter with ease. At a glance, hackers get an overview of what skillsets and tools that teams are looking for. 
Team Bio + Teammates
Personal and Intentional
I shifted the focus of the team card to highlight each team’s unique vision and potential teammates, creating a more personal and intentional application process.
Development Stage

Working with developers

The technical perspective was key to identifying edge cases in our design. Working closely with developers, we refined our design for inclusion and efficiency by tackling edge cases in the logic of the product. 

Here's a peek at one of our most prominent edge case discussions:
EDGE CASE
Situation
A group of 2-3 friends want to list their team to recruit an additional hacker.
Is the search feature necessary to accomplish this?
A user can still list a team without the search feature, and eliminating the search feature would allow the technical team to focus on developing other aspects.
Result
Yes, the search feature is necessary because all friends need to join the team using the Group ID number to properly display the team.
→ allows friends to join easily
→ teammates can review hacker applications
→ prevents “ghost members” and gives an accurate team count
→ displays all teammates and gives the applicant context
Web design

Hack for social good.

Web Design

The Hub

The Hub is a resourceful center of information built to help hackers find what they need at a glance on the big day of the hackathon.
Overview

All from one place

I designed the Hub to meet most general hacker needs so that directors can focus on their duties and keep the gears turning. The Hub gives hackers a general overview of events throughout the day, directs hackers to seek help from mentors, and encourages hackers to stay updated with us on social media. As one of the most critical points of contact we have with hackers, the Hub conveniently displays everything a hacker might need in one place.

I worked with the Operations team to figure out how to best assist hackers and anticipate things they may need during the hackathon.
The Interactive Schedule
Reducing Cognitive Load
Previously, the entire schedule was displayed in the middle of the website, making it difficult to reach information at the bottom of the scroll. I turned the schedule into an interactive feature to lighten the cognitive load as users scroll through the website. The Schedule’s scroll bar and filtering system allows users to focus on the most relevant events in the moment and localize interaction to one area. With a shorter scroll, busy hackers can swiftly glance through information on the website.
The Hub reduces stress on directors and allows them to focus on ensuring the event runs smoothly, creating a more pleasant hackathon experience for everyone.
A full house of 800+ hackers on the big day!

Product Preview

The Hackathon Experience

Explore your potential.

Arriving at the final destination

The hacker experience extends beyond the screen and into our reach on campus. I infused encouragement and delight into our promotional materials for events that led up to the big hackathon day. I boosted Instagram content interactions by 1287%, reached 7817 accounts, and increased our follower count by 21.5% within a year.

From the Fall to Spring, we reinforced adventure and journey as we helped hackers to build up their toolbox of skills with workshops and professional networking. I worked with my design team to lead design workshops that introduced prototyping design tools (such as Figma) and helped hackers to deliver impactful presentations that pitch ideas to potential stakeholders.

On the big day, we blended excitement into wayfinding and display elements that compose the venue's vibrant experience design.
Reflection

Takeaways

Move together.

In addition to an organized final handoff file with detailed development notes and a style guide to allow developers to jump in and implement our designs, constant communication was the key to our smooth development stage. We came together to work within limitations, address edge cases, and distill complex problems into simple, elegant solutions. We quickly passed ideas and rationale back and forth between designers and developers for the entirely of the development stage.

Why is it called a handoff file? Forget the idea of the ‘handoff’ and instead, work hand-in-hand. Adapt workflows to align timelines, touch base and offer insight, be flexible and open to input, be straightforward and ask for what’s possible, be specific about each request, down to the last pixel, and most importantly, drop encouragement, appreciation, and celebration.

Acting as the bridge, I learned it's less about what you do, but how you bring people together.

Entering the development stage was a pivotal moment in my design career. I learned the value of the technical perspective as I led communication between design and technical teams. Developer input is not a barrier but offers a new perspective that pushes me to refine my design for inclusion and efficiency.

The technical team went above and beyond to bring each of our visions to life, working around tight schedules, technical difficulties, and deadlines. Our final products are a confluence of our unified goals, time, effort, and collaboration.

Shoutout to the amazing team of developers who made this such a memorable experience — Alex Long, Justin Rusit, Trishna Sharma, Eric Ni, Cameron Yee, Alec Atienza

Look ahead.

I came into the role thinking I would only be the designer at the end of the ladder that receives deliverables. But I learned to be proactive throughout each step of the process to drive our vision and identity: by offering input, proposing new ideas, initiating conversations, and updating stakeholders. I asked questions to foresee roadblocks and make cross-collaboration more productive and efficient. Working cross-functionally, I learned to anticipate change and adapt to it. 

Be stretchy.

We each bring a unique, invaluable perspective to the team, especially in the midst of our growth. When I hit a creative block, my Design Lead, Cheryl, helped me view things from a different angle: that when I’m uncomfortable, I’m actually in the best position to grow.

Discomfort is actually a catalyst for growth.

You can either be comfortable and stagnant, or be uncomfortable and stretchy. Take risks, think from a different perspective, dive in, play, and grow. Seek out fresh experiences, and build up your creative and emotional resilience. I learned to approach challenging problems boldly, and make critical design decisions with confidence. In turn, I hoped to help hesitant hackers be confident in their unique perspectives and skillsets. It’s not easy to embrace the discomfort. It’s exhausting … but incredibly rewarding.

Stretch yourself, and you might like what’s possible.

Our adventure is just beginning

I have honed my passions for design and cultivated a deepened understanding and appreciation for collaboration and teamwork. Two things are certain: I love working with people + I love design.

I absolutely love it. I want to run after it, and dive deeper into it.

It was a privilege to work alongside such driven and talented directors, a melting pot of diverse interests and expertise. Organizing HackDavis 2022 felt like diving headfirst into the deep end, but I'm so grateful that I found a group of such truly amazing people that I can navigate through the deep end with and explore the depth of knowledge and experiences it has to offer.

I want to thank the incredible team of directors I had the privilege to work alongside this past year. Thank you for supporting me, affording me confidence and trust, and leading me to who I am today. You all made team meetings and Slack channel threads... not feel like work at all.

HackDavis 2022 holds a special place in my heart because it was my first time being a part of something so big, and I can't wait to do it all again.
First team photoshoot on campus!
Last family photo before all hands were on deck cleaning up the stadium after the hackathon

keep going

Mondavi Mobile

An experience redesign for a pleasant ticketing process at the door