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
Team
Cheryl Cai, Rachel Yap, Fajar Ahkter
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.
The Task
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
New year, new look!
Each year HackDavis's design team redesigns the organization's website. At our initial website design meetings, our team proposed multiple user interface designs for the homepage. I presented two ideas: Horizontal Scroll Website and Comic Strip Vertical Scroll Website.
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
★ 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
Low-Fidelity
Will it work?
Focusing our scope on functionality and responsiveness!
findings
Balancing type & visual
Maintain visual hierarchy
Mid-Fidelity
Kinks within the ink
Implementing our branding. Investing in our look and feel!
findings
The negative space was distracting!
Style Guide
Final Design
Ready to launch!
All from a comic strip concept
Handing off to Technical
Design Choices
Dark mode to reduce cognitive load
Responsive cards!
Animated illustrations to maintain interest!
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.
Prototyping
Low Fidelity
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.
Works
Be Bold.Marketing Campaign
T-Mobile MarketingVisual & UX Design
BeReal RedesignVisual & UX Design
Mental Health AppUser Experience & Research
Nice to see you again, let’s connect!
Connect with Andy!
View Case Studies!
ANDY K. DO
@Andy Do 2023