HackDavis 2022 - UX & Visual Designer

Wireframing for Social Good

Designing for one of California's largest collegiate hackathons. New projects, prototypes, and prints! 

Role

UI Designer, Graphic Designer

Duration

3 months, Dec 2021- March 2022

Coding for Social Good

HackDavis is UC Davis’ 24-hour collegiate hackathon dedicated to empowering student hackers to collaborate and build impactful projects that improve the world. HackDavis 2021 featured 750+ student attendees and 150+ project submissions dedicated to social good, making the event a huge success and the second-largest hackathon in California.

Within 3 months, my team and I developed a website, user dashboard, marketing assets, and merchandise for HackDavis Hackathon events, workshops, and promotional stunts.

Projects

1. Design a website for HackDavis 2022 to inform viewers about the event and sponsors

2. Develop a user dashboard for attendees to form Hack-a-thon teams, find event workshops, and updates before and during the event

3. Create marketing material and in-event merchandise to promote the event and enhance the hackathon experience

UI Design // Website

Storytelling through a Home Page

To help our viewers navigate through these goals, our team took a narrative approach to our user flows. By creating a storyline with HackDavis Characters, we led viewers through different sections of information and calls to actions.

The viewer goals:
1. Learn about HackDavis
2. Pre-register for the event
3. Submit sponsorship forms

Low-Fidelity

★ Comic strip

Into the Moo-ltiverse

Viewers read through an adventure comic
while learning about HackDavis!

Pros

Distinct from past websites
Users can hit all user goals in one scroll
Innate understanding of Vertical Scroll 

Cons

Less opportunities for large hero images
Asymmetric shapes are more difficult to implement
Static card designs

Horizontal Scroll

Embark on a journey

Inspired by storybooks. Guiding viewers
through a treasure hunt!

Pros

Distinct from past websites
Opportunity for multiple hero images
Separating different content 

Cons

Very different from common user patterns
Lack of Innate Understanding from viewers
Higher mental cognitive load

Mid-Fidelity

Will it work?

Focusing our scope on functionality and responsiveness!

findings

Balancing type & visual
Maintain visual hierarchy

findings

The white negative space was distracting!

Final Design

Ready to launch!

Design Choices

Dark mode to reduce cognitive load

Responsive cards!

Animated illustrations to maintain interest!

Handing off to Technical

UX/UI Design // Dashboard

Connecting our Hackers

At HackDavis, hackers can develop their project with up to three other members. To help hackers find their teammates and register their teams within our system, the Design and Technical Team developed a dashboard for registered attendees. On this dashboard, they could manage their team status and find updates for the event. 

The dashboard viewer goals:
1. Register a New Team as Team Leader
2. Join a registered team as a Teammate
3. Look of updates

Ideation

Flow Diagrams

Why Flow Diagrams?

We created flow diagrams to map out the user flows of the dashboard.

A. Plan the complete user journey
B. Address potential loopholes
C. Build wireframe blueprints

Main Dashboard USer Flows

1. Joining a team
2. Registering a new team.

Final Design

Ready to launch!

Form your hackathon teams
with our new dashboard!

Design Choices

Checkpoints indicating completion
Warning pop-ups for ending/restarting flows
Card motif!

Print & Merchandise

Connecting our Hackers

I designed print flyers and materials using Illustrators and HackDavis brand design guidelines to promote in-person outreach and onsite event branding.

Print Flyer

Banner

shirt Design

Name Tags

Takeaways

Teamwork = Dreamwork

At HackDavis, I learned how to communicate my design process through active listening and consistent feedback. Having a team that is trusting and open minded goes a long way in practicing creative freedom and producing innovative design. As a team, we create a unique website design, high-developed user dashboard, and great branding for the event.

Look into the Details

Creating multiple website flows and design material required a keen eye. As a team, we used our attention to detail within our designs and work. By doing so, we ensured high quality within our work and boosted the credibility of HackDavis itself. As a designer, I will continue to review details in design work.