civ.hacks
—
Creating a resourceful and informative website for a campus hackathon.
—
Discipline Web Design, Graphic Design
Timeline December 2020 - February 2021
Tools Figma, Illustrator, Photoshop
Overview
As a web designer on the civ.hacks team, I created assets and designed multiple pages for the hackathon website. Given relative creative freedom and direction from our partner, ASUC, I took their simple request for a fun and inviting design and visualized it into the final product. Alongside my Co-Head of Design, we led the team through ideation, brand development, creative direction, and collaboration with the developers.
Background
The Associated Students of the University of California (ASUC), is the officially recognized student association at the University of California, Berkeley. Known as one of the largest and most autonomous student organizations in the nation, the ASUC is an independent 501(c)3 non profit organization separate from University governance.
They contracted Web Development @ Berkeley (WDB) to design the website for their event. As Head of Design for WDB, my team and I took their simple asks and visualized them into a cohesive and informative website.
Problem Statement
With the event coming up, ASUC lacks a platform to market their event and display necessary information regarding their sign-up, mission, Tracks, sponsors, prizes, and more.
Who is our user?
individuals looking to sign up or learn more about civ.hacks
Our users need…
an inviting, yet explanatory website that details the specifics of the hackathon, including the designated Tracks, sponsors, prizes, projects, sign up, and more
The Solution
After weekly discussions and design reviews, we arrived at a final design that reflects the light-hearted, playfulness our partner requested, while still maintaining a level of modernity and cohesion.
The Process
Design Sprint
We began the design process by doing a quick design sprint in Figma based on the initial requests we received from the ASUC team. In 20 minutes, we brainstormed ideas for color palettes, logo, and landing page designs.
Branding and Assets
Once we had a rough idea of which direction we wanted to go in, we split the team up into two: brand guide + assets, and wireframes. Pictured on the left are some of the assets we created to be used throughout the web design.
Wireframes 1.0
After we created a few assets to make the design more consistent, we started on the wireframes.
Wireframes 2.0
After reviewing the design with the developers and receiving feedback from the ASUC team, we added finishing touches to each page and arrived at our final design.