The Software Developers Association (./SoDA) in ASU is the premiere software development club for university students. Since October 27, 2016, as the Director of Digital Media in SoDA, I am responsible for photography, YouTube videos, improve on SoDA’s branding, design our website, design and make flyers, banners, T-shirts, and TV slides.
Marketing Material Design and Creation
Working with Michelle Capriles-Escobedo, former Director of Marketing and now the President, we produced a lot of design works for our marketing stuff.
SoDA Official Website Design (Fall 2017 ~ Fall 2018)
A screenshot of SoDA’s website design prototype.
The purpose of the new SoDA website design is to provide more updated information about SoDA’s upcoming events, career services, hackathons, group projects, and more. The website is available since the Fall 2017 semester. You can visit SoDA’s official website thesoda.io and play with it.
(Updated Fall 2018: SoDA updated the site again with a brand-new design. However, this version kept some of my original ideas, and several design elements were inherited from the Fall 2017 version, including the “Card” design for the upcoming event and officer contact information, and the “New to SoDA” session. Besides, they kept the framework, which is basically the categories of contents, from the Fall 2017 version but with slight optimization. If you would like to visit the Fall 2017 version, please visit this Internet Archive: Wayback Machine capture, although with limited functionality and missing images.)
I also created a design guideline for our web developers, which is a convenient way to communicate with them about the design, and help them to choose the correct layout and font.
User Interface Highlights
- “Card” design. Inspired by Google’s mobile app, I designed the interface to have multiple “cards” in different sessions to not only sort different pieces of information in order but also gives an elegant and intuitive look. I’m also using this design for our flyers. As well as those “cards,” I used shade effects for the menu bar, title bars, and buttons.
The SoDA Website Team
My role. As a manager and designer of the SoDA’s website, I am responsible for design the website, and making a design guideline for developers, in order to use the correct layout and fonts.
Our Team Members. I worked with Azaldin Freidoon, who is the primary web developer at SoDA and spent a lot of time for developing this website, and Vincent Truong, the webmaster at SoDA, who also helped for the website development and responsible for the website’s maintenance (i.e., update the information). Michelle Capriles-Escobedo, SoDA’s president, is also part of the website team that helps us improve the website based on the contents.
Collaboration and Communication. Azaldin built the website from scratch following my design guidelines. Initially, we mostly communicate on Slack (a team communication tool) and the in-person meeting. Then, we started using Trello, a powerful team communication tool that could improve productivity in communicating and making design changes.
A screenshot of the workflow of our team on Trello.
Future Thought. For future updates, we will improve on our responsive design by making a mobile version of our website that is optimized for small screens on smartphones. The success of the SoDA’s website is for all team members. If we don’t have these two awesome developers, my design will never come true. Big thanks to Azaldin and Vincent!
II. SoDA Event and General Flyer (2017-2018)
This flyer design is used for our event. SoDA generally will post a flyer one day before the meeting.
SoDA Event Flyer.
We also have a monthly event calendar that will be posted before the beginning of each month.
SoDA Monthly Calendar Flyer (2017 ~ 2018 Version).
SoDA Monthly Calendar Flyer (2016 ~ 2017 Version) (feat. Michelle)
We also have a general flyer for marketing SoDA.
SoDA General Flyer (Spring 2017 Version).
III. SoDA Special Event Marketing Materials
The 3rd Annual SoDA Code Challenge
Flyer
This is for me the easiest BUT one of the best SoDA flyers I have ever made. For this flyer, I want to make a geeky style with an “output view” that we as software developers are familiar with. First, For most of the contents (inside the black “output view” panel), I used the Consolas font, which is a monospace font that is used for Microsoft Visual Studio, a developer tool. The monospace font is not enough. For the title of “CODE CHALLENGE,” I used a lot of ASCII arts that make these characters consisted of symbols like “=,” “_,” “|,” “\” and “/.”This unique design demonstrates one of the representation of the workflow for a software developer and shows our passion and love for our interest and career.
Flyer of the 3rd Annual SoDA Code Challenge.
Certification
1st-Place Certificate of the 3rd Annual SoDA Code Challenge.
TV Slide
Using Microsoft PowerPoint, I made a TV slide for this event that will be played on the big screen inside the College Avenue Common (CAVC) building. It has some animations including a scrolling SoDA logo and a website link.
A screenshot of the TV Slide (still version).
Download PowerPoint with Animation
Showing the slide during the opening ceremony of the event.
T-shirt
We also made a lot of T-shirts.
T-shirt design.
Stickers
Sticker.
For better printing results, I chose the font “Lazenby Computer” for the word “CODE,” and remain the Consolas for other texts.
Hack Arizona 2017
Hack Arizona 2017 is a 36-hour hackathon hosted by the University of Arizona at Tuscon, Arizona. SoDA offers free buses for the annual Hack AZ event.
Flyers
Yes, I “coded” this flyer.
SoDA’s Hack Arizona Flyer.
We also made a bunch of “Hackathon Story” flyers to let people know more about what is a hackathon, what participants do as their different roles (includes the developer, designer, entrepreneur, artist, project manager) and how they experience are.
“Hackathon Story” Flyer.
The 4th Annual SoDA Code Challenge
(a.k.a. SoDA Code Challenge IV)
Certificate
I used some icons from the Webdings and Wingding font series. And, guess what the meanings are behind those binary numbers?
Certificate of the 1st Place Winner.
Certificate of the 2nd, 3rd and 4th Place Winner.
Flyers
General Flyer.
“Team Forming” Flyer.
Other Marketing Materials
Banners (Vinyl Posters)
Sometimes, we will put a big vinyl banner for special events or marketing use. This banner was shown during the 2017 ASU Spring Involvement Fair. Nathan and Megumi were there at the Fair!
SoDA Banner (Spring 2017 Version).
(Note: This is the smaller picture. The actual size is 9900px * 23400px.)
Showing the banner during the 3rd Annual SoDA Code Challenge.
SoDA Banner (Fall 2017 Version).
Table Cloths
SoDA Table Clothes (Fall 2017).
The handout for production was a vector-graph with a black background.
T-shirts
I designed tons of T-shirts for SoDA and our events. These are my most favorites.
Our brand-new T-shirt for 2018.
Original Design Sketch (Front).
Original Design Sketch (Back).
The final version we uploaded for T-shirt production is a vector-graph with a transparent background.
Videos
Besides the design work as the priority, I made some videos for marketing use and uploaded these to SoDA’s YouTube channel. Those are our event footage, in order to let people know more about how our fun place looks like.
IV. SoDA-hosted Hackathon Marketing Materials
SoDA hosted SWHacks in March 2017. I was responsible for branding, marketing materials, website design, and videos. Learn more about my experience as an organizer. Moreover, the SWHacks organizers collaborated with DessertHacks and merge into a new hackathon, sunhacks, in April 2018. I am part of the marketing team and responsible for a countdown video, also a tribute to technology, that was played during the sunhacks opening ceremony.
Working, Socializing and Having Fun at SoDA
I wasn’t get involved in clubs or organizations on campus so much back to the old days. At the beginning of my Junior year, I feel that I need to make my college life more exciting by joining more squads, learn more stuff and know more people. I attended my very first SoDA meeting on August 25, 2016.
The Community
SoDA is a cohesive community. The officers hold excellent and useful lectures, tech talks and social events. Also, they are friendly to answer your questions about software development, programming questions, resume building and careers. Here at SoDA, you can come here and meet more people that have the same or similar interests with you, and you can even make a group for a group project, which looks like you are building a startup. It’s a great place to help you learn more and get involved in the technology industry.
Teamwork, Productivity, and Leadership
STAGE 1
I didn’t have any working experience since I came to the U.S., back to the day when I decided to join SoDA. It means that I did not get involved in a lot of teamwork. As a SoDA officer, I work with other officers, communicate and discuss (sometimes argue) in order to do perfect works with proper content and better ideas. It was a little challenge for me because I have more daily tasks than before in addition to the assignments from my coursework, but it has a lot of fun, and this experience definitely improved my time management, as well as my design skills using Adobe suites.
STAGE 2
After one year since I joined SoDA, with a lot of work done, I felt a lot of sense of achievement. However, I started feeling that I am doing the same things all the time, like making flyers and stuff. While I feel proud of my works, I kind of felt “boring” and felt like I need to do more things for SoDA. President Michelle is a great president that listens to every voice from any SoDA officers. When SoDA was planning to redesign the website, I became a lead designer and manager for this project and responsible for everything about design and collaborate with our developers. This is a new challenge for me as a leadership role, but it will definitely enhance my team collaboration skills as well as web design skills, and all of those will also benefit for me to build my career in the future.
Special Thanks
- Michelle Capriles-Escobedo. She was SoDA’s Director of Marketing (10/27/2016 ~ 3/31/2017), and SoDA’s President (3/31/2017 ~ 4/3/2018). We worked together for our marketing materials, and I appreciate all her help and support in my work. I also appreciate her leadership at SoDA. We could not host events and SWHacks 2017 this awesome without her.
- Nathan Fegard, SoDA’s President before 3/31/2017. I appreciate his help when I joined SoDA for the first time and became an officer.
- Alex Geschardt, SoDA’s Director of Communication. We are both majoring in Digital Culture concentrate on Media Processing, and he helped me a lot with running the position as a Director of Digital Media. Since 4/3/2018, Alex and Jona Joe (former photographer at SoDA), replaced me and became our new Digital Media Director. Congratulations Alex and Jona!
- Azaldin Freidoon and Vincent Truong from the SoDA website development team.
- Michael Rojas and Nikola Uzelac. We are working on another project, BitBite, starting in summer 2017. I appreciate them for this great opportunity they gave me. At the same time, we took CSE 310 (Data Structures and Algorithms) together, and they helped me a lot with that hard class. Thanks again for those great summer memories!
- Megumi Satkowski. She is a Computer Science student minoring Digital Culture. In summer 2017, by her recommendation, I was introduced to join in professor Robert LiKamwa’s research team at ASU Meteor Studio in summer 2017. It was a research project about augmented reality and holographic visualization, and I built an AR data packet generator using Max/MSP. It was a fantastic and meaningful work experience. Big thanks to Megumi and Robert for giving me this opportunity.
- Thomas Forrest. He helped me a lot with resume building and gave me advice on my application for jobs and graduate schools.
- Devyash Lodha. He was the web developer for SWHacks 2017 official website, and we worked together for the website design and development. Also, he is a bad-ass engineer!
- And all SoDA officers, also my friends. Socializing is one of the most important parts of my college life. It is significant for me to get involved with a community with these lovely people at SoDA that has similar interests and goals with me. Plus, it’s been a pleasure to work with these people for both SoDA’s business and even group projects. Friends are treasures, and it’s lucky for me to be here. I love you all.
Tool Used
Design Tools
- Adobe InDesign
- Adobe Illustrator
- Adobe Photoshop
Video Editing Tools
- Final Cut Pro
Team Collaboration Tools
- Slack
- Trello
Other Tools
- Microsoft PowerPoint
- Apple Keynote
Notes
- SoDA opened a new Photographer position since the Fall 2017 election on November 2, 2017, while I will still help on the part of the photography if needs.
- I did not design the SoDA’s logo. The logo was made before I joined SoDA, includes the symbolic blue (R: 0, G: 0, B: 255) and red (R: 255, G: 0, B: 0) color.
- SoDA did not design the general background (the darker one) used for our marketing materials. The copyright of this background belongs to its author. This background was widely used for SoDA’s old marketing materials before I join.
Copyright © 2016~2018 SoDA. All rights reserved.
POSTED January 1, 2018 (GMT+8)
UPDATED November 12, 2019 (EST)
Since I’m currently working at SoDA and will come up with more design and video production, I will keep updating this article in the upcoming months.
Since I graduated from ASU, starting April 3, 2018, Alex and Jona became our new Director of Digital Media. I will still keep updating this article for more design works and video productions for SoDA. Also, I will publish a few articles about my marketing productions and organizing experiences as an officer of sunhacks 2018.
Ted (Junshu) Liu 