LA Hacks (2016)
Illustrator & UX Designer
Our website, copy, and branding successfully increased the amount of applicants who were female or from non-technical backgrounds, compared to previous hackathon years.
LA Hacks is UCLA's annual weekend-long hackathon with 1500 student participants and various company sponsors. I had the chance to work on a design team within the larger student-run team of organizers, many of whom had been part of LA Hacks through multiple years. LA Hacks 2016 organizers had the goal of drawing in a range of participants, from students new to coding, to skillful returning coders, to minorities such as non-coders and females. Participants would feel not only welcome but important to the hackathon experience, and integrated in a non-imposing way to experienced coders.
My co-Designer and I followed launches of other schools' hackathons as well as events targeted at minorities in the coding community, and paired this market research with participant feedback from LA Hacks 2015, to craft an identity, website, and goals for 2016. As the event weekend neared, we brought in two designers to focus on apparel, event space design and videography. Together we incorporated the event's goals and user research throughout the hackathon experience.
Participants' shirts had the diving coding bear, familiar from the website, and playful yet professional on a dark blue shirt. Us organizers wore a white, approachable shirt color with a bright pink bear character that stood out in the dark pavilion event space. Shirt backs had the mandatory list of event sponsors, to which I brought creative, relevant attention with company-inspired bear illustrations. On day one of hackathon weekend I helped hand out participant shirts at the pavilion doors and had the pleasure of seeing delighted faces as they recognized the bear. The event was off to a positive, inviting start.
We took advantage of having so many bear illustrations floating around and turned them into stickers, for participants to collect and trade at and after the event. From digital to physical brand recognition and participant interaction, my bear illustrations allowed room for diversity and various user types while communicating that personal human touch that is central to hackathons.
With every design decision, from the website down to the shirt colors, it was important for my co-Designer and I to allow our large team of LA Hacks organizers to learn about their participants and how our decisions help users perceive LA Hacks as inclusive and encouraging. We focused validation on event goals, target users, and best practices from our research and previous years' hackathons. These organizers would be advertising the event, so it was important for their messaging used on social media, on-campus recruiting, and website updates to reflect our goals.
My co-Designer and I worked alongside our two developers to communicate any timeline constraints and to iterate on new features side by side, as the website went from a splash page teasing the event, to a site with detailed information about the event, to a day-of Live section with quick links that could be saved to view offline (above).
I wanted to keep learning after event go-live when my traditional 'Designer' role was done, to see how our organizers had executed this year's values and inclusivity goals. I stayed for much of the weekend, embodying and wearing my organizer shirt with the inviting pink bear, walking around the event floor during project demos, and attending lectures by women and minorities in tech to hear participants' and lecturers perspectives.
After the event, my co-Designer and I worked on design documentation (below) for future LA Hacks team designers. The documentation highlights how UX/UI reflect event and user goals, as well as our learnings from working with the hackathon timeline, developers, large organizational team, and market research. Other members of our team would also reflect on LA Hacks 2016 success metrics and had a thoughtful open-minded attitude of what to improve for 2017.
We concluded from our research that the landing page design and copy should generate excitement and curiosity in users familiar with LA Hacks, while also being playful and engaging enough to get shared around to new users. These messages were emphasized in the landing page experience because digital users are converted into hackathon participants when they sign up through the site. We reached an identity of bright UI colors with reference to Los Angeles and UCLA, round approachable shapes, and animal mascots playing off of UCLA's 'Bruin bear' rather than people. The visual and written identity we had fostered should inspire inclusivity in the participants themselves. Ideation and initial design directions documented below.