Design Executive
@ The biggest summer hackathon
As the design executive of the biggest summer hackathon, I designed the event sticker, worked with other designers to key the new brand, created marketing assets, developed the style guide for the application, and worked with the UX and web team to deploy the hackathon website!
2 design leads
3 UX designers
2 visual designers
8 months
Jan - Aug 2021
Adobe Illustrator
Figma
%20(2).gif)
As the biggest summer hackathon with more than 600+ hackers every year, we started the process of rebranding Hack the 6ix to attract more talented hackers!
With COVID19, everything has gone online. How can we portray our brand as a remote-friendly hackathon?
The moodboard helped us find a fitting theme: a dreamy and connected virtual universe with a touch of isometric realism.
By brainstorming as a group, we keyed this year's central message: empower everyone to connect and dream big no matter where they are.
This idea turned into our website's main illustration.
.gif)
After finalizing our theme for the year, I designed the hackthon sticker, which is mailed to every hacker.
This sticker keeps true to the multi-cultural theme while subtly including the hackathon logo as an isometric statue.
We went through a series of iterations to arrive at our final website design, including researching users, developing personas, critiquing designs, wireframing, and testing.
Based on last year's hacker survey and user interviews, I helped identify two types of hackers: first-timers and veterans.
We created their personas to help guide our future design decisions.
Since there are two types of hackers, the website content needs to address both of their concerns.
This survey provides insights into what hackers care about and their relative level of importance.
The survey and personas guide the website layout and content placement.
As such, we diverged during our wireframing processes, where Gillyan, Flora, and I each created a website layout.
Even within each content section, we explored different ways to present the information.
Specifically, I explored variations for the "Why Us" and "Speakers" sections.
Through a series of user interviews and preference testing, we examined how knowledgeable people were after reading the website, their layout preferences, likeliness to apply, and more.
After an extensive affinity diagram session, we pulled many actionable insights to perfect our wireframe!
By applying the actionable insights, we converged upon our final wireframe!
From here, we worked extensively with the visual designers and developers to arrive at our final website design!
To keep hackers engaged and announce important messages, I worked with the marketing team to deliver the social media assets!
To help hackers keep track of what is happening where and when, I created the hackathon schedule to share on social media!
With a remote hackathon, we rely heavily on communication and conferencing tools.
This social media post communicates what the tools are and when to use them.
While Flora worked on the UX portion of the application, I worked on the error messaging and visual design, including the style guide, layout, and hi-fidelity prototypes.
Historically, applicants often give up and forget to save their work when they see the numerous questions on the applications.
While Flora worked on making the user flow transparent with a save function, I made a clean and simple style guide to reduce the mental strain for the applicants.
I also designed a clear and quick-to-fix error messaging system.
When people make mistakes, the message lists out the items with a scrolling link to quickly navigate to and fix the mistake.
After Flora and I combined our UX and UI work, the application became three simple pages.
Applicants can quickly see every question by navigating between tabs to allow for more transparency.
More than 934 applications were submitted with an 81% completion rate, which is a big improvement from last year!
Working on a multi-disciplinary team allowed me to grasp visual design knowledge from experts! I learned how to work with isometric designs, create clean and accessible style guides, and maintain a consistent theme.
The toolkit is content-heavy and touches many sensitive legal topics. Through pair writing hosted by the content designer, I observed first-hand how to write simple language without losing the legal meaning as a team.
Upon reflection, we didn't research which platform is the best for a hackthon. Our operations team found the virtual platforms that were within our budget and easy to set up. However, we could have examined the entire user journey, from sign-up to the ending ceremony, and choose the fitting virtual platforms accordingly. For future projects, I want to examine the entire user journey and let people's needs guide the procurement process.
