Nurturing hackers' creativity and rebranding LA Hacks

LA Hacks  |  Branding, Web design and motion graphics |   Fall -Winter 2019   |   Team: 6 designers

LA Hacks

CLIENT: UCLA LA Hacks

ROLE: User Research, Motion Graphics, Web Design

DURATION: Fall 2019 - Spring 2019

As of one the biggest tech competitions for college students in US, 1500 hackers and designers compete for 36 hours to create and innovate digital and physical products in UCLA's biggest stadium, Pauley Pavilion. 

Throughout the branding process, I led a team of web designers and graphics designers to painpoint hackers' problems, produced motion graphics, print media and website UX/UI.

PROJECT DISCRIPTION

As the chief of design for LA Hacks for the 5th consecutive year, I l worked closely with a team of designers to produce 2D graphics and hands on animation. We started with using surveys to understand the problems students were facing when they joined hackathons, and then creating key design goals that drove the branding decision. I also created end to end animations using After Effects and establishing unified style guide for branding and visual design of posters and mockups. Lastly, I worked with the marketing team to produce videos that attracted more than 1000+ views and more than 20% increase in FB's likes. 

Problem: I was lucky to participate in Tree Hacks at Stanford before officially designing for LA Hacks. This gave me a lot of opportunities to ask them about their reasons for joining Hackathons and how they felt about LA Hacks. I then divided their opinions into two specific groups, those who were first time participants of hacakthons, and those who have a lot of experiences. 

Problems and Pre-assumptions:

1. Hacking is scaring: People who have never joined a hackathon before are scared about the idea of Hackathon because they have little experience in coding and are afraid of the intensiveness of the 72 hours of coding and designing without any sleep.

2. Lack of Creativity: People who have a lot of experiences with hackathons grow tired of hackathons because they feel like the same ideas are reused constantly and the winners always are those who do projects on either machine learning, AR or VR application. 

With the problems in mind, I narrowed my design goals into two big themes that addressed two groups of stakeholders, one that shows hackathon is fun and approachable, another shows that hackathon inspires creative thinking to create innovative digital products. 

LEARNING AND IMPROVING FROM PAST HACKATHON

2017 and 2018 LA HACKS: As you can see down below, the branding of 2018 for hackathon focused on joy, playfulness and vibrancy. Although it helped addressing the problem of Hacking is scaring, it did not give experienced hackers the feeling of creativity and originality as it seemed too unprofessional. 

In addition, while the animated characters looked fun and approachable, we decided to shift our focuses for 2019 hackathon, which is to foster the independent growth of individual, whether it is technical skills in coding, design or verbal presentation to potential investors and sponsors. 

 

Taking the original concept of starting a hackathon, we decided to leverage the growth part of the hackers into our branding. We then broadened our design scope to approachability, creativity and growth. 

2017 LA HACKS

Screen Shot 2019-03-06 at 8.51.37 PM.png
Screen Shot 2019-03-06 at 8.51.49 PM.png

2018 LA HACKS

Screen Shot 2019-01-18 at 13.23.12.png
Screen Shot 2019-01-18 at 13.08.59.png

DESIGN THINKING 

CreativityIn order to foster the creative thinking of the experienced hackers and dispel the myth that only popular devices like machine learnings or AR can win, we used a range of color schemes like red, purple and dark blue to symbolize the universe and shows the unlimited possibilities for hackers that they can think out of the box and create meaningful products.

 

InnovationInstead of using approachability as core theme, we shifted our direction to innovation since both hackathons in the past years emphasized strongly in their fun and approachable style guides.

Learn: In order to address the problem for new hackers to embrace LA Hacks, we used a mould to symbolize the flexibility as a new hackers to change their mindset and enrich their understanding with code and design through this 72 hours challenge. 

DESIGN GOALS

01

Retain color of vibrancy but add on the elements of universe and creative exploration 

02

Invest in reformable graphics that moulds the learning process of programmers

03

Let the typography be creative and techy

MOTION GRAPHICS

I believe that a successful rebranding cannot neglect the meticulous use of motion graphics. Thus, I led the marketing effort to produce a 23 seconds video to showcase the hype of LA Hacks using EDM for the background.

STYLE GUIDE

Screen Shot 2019-01-18 at 15.59.39.png
Screen Shot 2019-01-18 at 15.59.49.png

FACEBOOK COVER PAGE

Screen Shot 2019-01-18 at 16.04.15.png
Screen Shot 2019-01-18 at 16.07.14.png
Screen Shot 2019-01-18 at 16.07.06.png

MARKETING ASSETS

Screen Shot 2019-01-18 at 16.04.06.png

WEBSITE BRANDING

I believe the right tracks and themes will ultimately bring the right people to LA Hacks, so we leverage the power of three themes in an effort to bring cohesiveness to the overall Hackathon

LANDING PAGE

Screen Shot 2019-03-04 at 12.48.54 PM.pn

ABOUT SECTION

The about section reinforces all our design goals and also shows that we welcome both new hackers and experienced hackers

Screen Shot 2019-03-04 at 12.49.05 PM.pn

THEMES

Screen Shot 2019-01-18 at 21.39.23.png

MOTION GRAPHICS

2019 Recap Video

SELECTED PHOTOS

DSC00661.JPG
DSC00660.JPG

Demo Day 

Top 5 LA Hacks Project 

DSC00785.JPG
DSC00720.JPG
DSC00770.JPG
DSC00616.JPG

Outcome

1250+

Attendees 

24+

New Sponsors

5000+

Likes in the LA Hacks' Facebook page

"It is one of the most fun and intense hackathon I have participated!"

March, 2019

Anthony Chen 

UC Berkeley

"I really like the motion graphics and the design on the website which attracted me to come!"

Sep 14, 2016

Karen Li

Cal Tech

MORE PROJECTS

Premium Lenses
Collection
Frame 16
Screen Shot 2020-10-24 at 11.35.47 PM
ultraleap
StudySmart
Spatial