HackDavis's UI/UX

Summary

HackDavis is UC Davis's first major collegiate hackathon, hosting over 700 students every year.

As the Director of UI/UX Design, I designed interfaces for our 700 hackers by collaborating with our Director of Brand Design to establish our visual aesthetic, creating wireframes to address various use cases, and discussing implementation with our engineering team to facilitate the design handoff.

Timeline

April 2018 - February 2019, 10 months

Team Involvement

Design Team: Michelle Gore, Henry Moore
Engineering Team: Josh Arnold, Cyrus Goh, Kaelin Miko, Thomas Munduchira

Skills and Tools Involved

UI/UX Design

Branding

Engineering Handoff

Slack

Adobe XD

HackDavis Principles

  1. We are an event promoting "Hacking for Social Good".
  2. We are a beginner friendly event.

Developing a Visual Style

steps

Isometric Utopian City

The "Isometric Utopian" theme reflects a city that uses technology for social good. Michelle and I landed on this idea by creating moodboards and getting feedback from our team through meetings and Slack. Once the idea caught traction, we started coming up with Brand Assets and Guidelines.

steps

Website Design

steps

Temporary Informational Website

While our developers focused on creating a system for us to manage applications, Michelle and I designed a temporary site to capture early interest, sponsors, and to hint at our utopian theme.

Final Website

I designed the layout and content of the website through frequent meetings with our team. I also worked with Michelle to design the graphics, which connect back to our utopian theme. Below, you can see some preliminary work and the final site.

Hacking Interfaces

Live Website

The live website is the interface that hackers use to keep track of updates and information during the event. After designing the interfaces, I handed off the design specs to Kaelan over Zeplin for implementation.

Here, you can see how Zelpin helped us with styling elements:

And here is the sitemap and the main interfaces on the live site.

Mobile App

Since this was a beginner-friendly hackathon, I wanted to find a way to encourage newbie participation. Sometimes it can be daunting to compete against seasoned hackers, so I wanted to create a seperate motivator for this audience: learning as much as possible. I came up with a badge system that would reward workshop attendees with prizes.

Unfortunately, I was busy working with Kaelan on the Live site, so Josh had to spearhead the mobile app on his own. He made an awesome app for iOS and Android.

The Event

Impact and Reflection

Overall, the event was a success. I was so happy to see a years worth of work pan out into an event like this. Here are were of the outcomes for the event:

$90,000+
Sponsorship

700+
Hackers

$10,000+
Prizes

75+
Projects