To the 2nd anniversary of the first hackathon that we’ve ever organized. To one of our best college memories. To my friends.
March 12, 2019
There were some moments in my college year that are memorable, with the excitement and joy of success by working with friends who are also passionate student developers and has the same passion and dream for growing this entire developers community. Like this one.
SWHacks (pronounced as “Southwest Hacks” or “S-W-Hacks,” also known as “SWHacks 2017”) was a 36-hour hackathon hosted by the Software Developers Association (SoDA)[1] at Arizona State University on March 10 ~ 12, 2017.
Starting in December 2016, I was part of the organizer and marketing team of SWHacks. I am responsible for the branding design of SWHacks, designing and making SWHacks marketing materials, including videos, flyers, handouts, and website design.
I. Videos
Visit SWHacks’ official YouTube channel.
SWHacks promo video: Interviews
This is one of the SWHacks’ promo video. It’s an interview video in a Q&A style. It has a piece of percussive background music with special editing and the use of typography and animation.
ABOUT THIS FILM
NAME Southwest Hacks 2017: Interviews
DURATION 2:25
LANGUAGE English; with English Subtitle (Closed Caption)
RECORDED by Raffi Shahbazian, February 2017
CAST Andrew Phillips, Devyash Lodha, Nikola Uzelac, Sagarika Pannase, Nathan Fegard, Raffi Shahbazian, (Name Unknown), (Name Unknown)
PRODUCED by Junshu Liu, February 6, 2017
In the beginning, with the collaboration of Raffi Shahbazian, the marketing lead of SWHacks, and all these interviewees from ASU, we decided to make a promo video in the style of interview, which focused on two major questions:
- What do you like about hackathons?
- What are your thoughts on the tech scene in the Southwest?
For the video production, I cut the interview into multiple separated parts and rearranged those in the order of those 2 questions. I also created a lot of animations with the use of typography to highlight those questions and the call-to-action part at the end. The typography animation part was inspired by the “Don’t Blink” video by Apple. These animations also strengthened the passionate feeling of this video with the purpose of advertising.
This video was played multiple times during the presentation promotion for SWHacks, includes the 3-minutes presentation before some Computer Science class and during the SoDA coding challenge event.
Opening Ceremony “Countdown”
ABOUT THIS FILM
NAME SWHacks “Countdown”
DURATION 1:33
LANGUAGE English
RECORDED by Junshu Liu, March 2017
PRODUCED by Junshu Liu, March 11, 2017
As one of the organizers, I also came with some ideas for the opening ceremony, like this one. Making this video was originally my idea. I thought that play a cool video right before the opening ceremony to warm-up and rock the whole room should be a cool idea, and it can be a “countdown” style video or something.
First thing first, this video should deliver goodwill for a hackathon that could motivate all participants right before the event. In this video, I added some screenshots and video footages, including a piece of code, some sketches for my data structure and algorithm class (yes, that CSE 310 class, you know), a screenshot of the Apple App Store with some app icons, in order to encourage participants to make apps like these.
While brainstorming this video, I realized that there will be a lot of students from anywhere in the state will come to Tempe for this hackathon. A lot of them did not even visit ASU before. Therefore, the second thing is, to show the most out of our beautiful campus (at Tempe, at least). In this video, I included a lot of shots on campus, including static shots, dynamic footages, and time-lapse videos.
And, of course, I made a “countdown,” contains a 60-second timer with all these scenes. The song I’ve used is “Reflection” by Polarfront, a Korean composer. That rhythm just fits the timer!
This video was played during the opening ceremony of SWHacks.
II. Brand
We were trying to make the brand that could deliver people a feeling of vivid full of energy and encourage people to join our hackathon, and also represent the unique style of South West as a specific area in the United States.
For the initial brand idea, we already have a “lizard” icon[2] and an “orange” background color. I personally like the orange color and did not make a lot of changes on that, because it represents the “Sun” and “Desert” theme in the Southwest area.
This is a general “orange” background image. This image and its alternations have been used for flyers and the website design.
General Background Image
Junshu Liu
Alternation based on the general image with ASU Palm Walk in perspective view
(created by our collaborated graphic designer, name to be confirmed)
Starting at this point, the first thing we discussed is the font. We decided to use Raleway, one of the most popular sans-serif font, that looks somehow familiar but also unique than any other familiar font that we see in everyday life, and it helps people quickly identify SWHacks with other hackathons.
Also, during the production of the marketing materials, I thought that we probably need a slogan. It should be brief and short, but with a powerful rallying point. We want to attract hackers, developers, designers, entrepreneurs. And, this is a hackathon. “Hack” is a word that we love. We ended up using this one:
Wanna Hack?
Next, the core of our brand – a logo. The first version of the logo is made up of the “lizard” and the word “SWHacks” with the S, W, and H boldened. Therefore, “SWH” is also part of our brand. This version was used in our promo videos and our pre-event promo T-shirt.
Pre-event promo T-shirt with the first version of the logo.
We also have another graphic designer collaborated with us (name to be confirmed) who helped on the design of our logo. The final version added some hexagon elements. This was used for our official website, T-shirt during the event and the opening ceremony video.
The final version of the logo.
III. SWHacks official website
Since the hackathon is over, some contents on the site have been changed, so the site now looks different than before. This article contains the original website design, which is supposed to promote the event. You can also visit the website at swhacks.io (This is a backup from the Internet Archive: Wayback Machine from March 15, 2017)[3].
The SWHacks Website Team
- Devyash Lodha. He is the premier web developer for SWHacks website.
- Michelle Capriles-Escobedo, the consultant.
- Another graphic designer (name to be confirmed), helped us for the website design and logo after the first version.
IV. Flyers, Handouts, and Banners
Flyers
This is an informational flyer for SWHacks marketing to highlight what is a hackathon, what you can do, and the time and schedule of the event.
(The picture below shows the final version of the design, but the content was changed. I will make an update once I found the released version from those stacked 2-year-old files in my hard drive.)
Banners
We had a few large vinyl banners set up in the Memorial Union, where the hackathon was located. This is the general banner.
We also have other banners on each floor as floor guides to help attendants find rooms and dinners.
Brochure
This is the brochure handout to the SWHacks attendees.
Information Graphic
Volunteer advertisement
V. Other
Slides. I helped a little bit on the Keynote slides for the opening ceremony presentation using Apple Keynotes. Michelle, Nathan, and Steve made a fantastic presentation!
Livestream. We also tried to do some live stream during the hackathon. This was the first time I was trying to live-stream a massive event.
I used Open Broadcaster Software (OBS) to design the live-stream graphics, including subtitles and a rolling message bar to display current & upcoming events, weather, and help & support information. It was live-streamed on our YouTube channel. Unfortunately, those live stream didn’t get a lot of attention, and I met some technical difficulties when I was live-streaming the opening ceremony that it doesn’t have the sound output (turns out a bug from OBS caused it). However, these live-streams helped us to keep a lot of footages, including some interviews that I made during the hacking session. In this video, I interviewed one team and asked them about their feeling of attending the hackathon.
Also, we live-streamed the hacking session and entertainment events, including the Lipsync Battle and the Magic Tournament.
(March 2019: Watching these videos feels like time traveling. For real.)
You can watch all these live stream videos by visiting SWHacks’ YouTube channel.
Interviews. During the presenting and judging session, I was one of the interviewers to SWHacks’ attendees. Each team introduced us about their project, their ideas, target consumers, how they built the product, and the major challenges they’ve experienced. Plus, their demos are surprisingly stunning. During the interview, I’ve met some really awesome, skilled and talented student developers and designers, and they encouraged me a lot. I think they also inspired the whole SWHacks team. The success of SWHacks couldn’t be accomplished without our 350 attendees. Thank you all for the fantastic times!
The interview video will be available on my YouTube channel. Please check back soon.
In a word…
Spring 2017 was a golden age. It was a crazy and beautiful time. The whole organizing experience, from designing the brand to promoting the event around campus, from the opening ceremony to the interview, helped me learned how an on-campus event works, and I feel lucky to get a chance to do this. Together, we wrote a fantastic page of ASU’s story. People will remember SWHacks and their incredible experience, and we will not forget what we’ve done as well. It’s not just an event. We made some impact – We gave people the opportunity to do the thing they love, and we made another step forward to strengthen the tech scene at ASU and even the Southwest. I enjoy the entire time, and I’m honored to work with people at ASU (includes SoDA officers) who have the same passion for the tech industry, organizing this big event, and contributing to the tech community at the Southwest area. SWHacks was one of our best memories in the year 2017, also our entire college life at ASU.
Following up…
In 2018, SWHacks, DesertHacks, and Emergentech were merged as a new hackathon, sunhacks, which is a 36-hour hackathon run by ASU students at Galvanize headquarter in Phoenix, Arizona. The organizer from these hackathons worked together for this exciting new hackathon.
As part of the sunhacks marketing team and design team, I was responsible for making the video for the opening ceremony, including the contents, video production, and working on the design of special effects with the collaboration of Excel Ortega and Annessa Iwamoto. I also participated in the initial logo design for Sun Hacks. Although the design team decided not to take my idea for the final design, designing a logo from scratch was a fun experience, and it’s been great to work with Excel Ortega, the lead of the design team.
For more about my video works, organizing, and UX judging experience at sunhacks 2018, please check back later at my website.
Notes
[1] SoDA, The Software Developers Association at Arizona State University, is the premiere software development club for university students. Learn more at thesoda.io. Not all SWHacks organizers are SoDA officers.
[2] I did not make the “lizard” in the logo.
[3] The SWHacks website is no longer available since it was replaced by the successor, sunhacks.
One more thing…
I’m drinking Soylent while writing this post. Soylent was one of our sponsors, and that’s why I got to know this brand and had a chance to taste the original one.
Copyright © 2016~2017 SWHacks. All rights reserved.
Copyright © 2016~2017 The Software Developers Association. All rights reserved.
Copyright © 2016~2019 Junshu Liu. All rights reserved.
POSTED March 12, 2019
EDITED March 12, 2019; November 9, 2022
Ted (Junshu) Liu 