Providing opportunities, connections, and resources for minorities in tech.
Led weekly meetings with the design team to oversee the website, merch, and swag design process for a hackathon dedicated to providing a safe space for underrepresented genders in tech.
Designed a fully interactive website that led to 92 participant signups (the most we've ever had in our three years as an org).
Designed a pitch presentation that helped us receive over $1000 of sponsorship money (a total amount from six college sponsors: Oakes, Rachel Carson College, Kresge, C9/JRL, UCSC Alumni Council, and Cowell) that was funded towards providing hackathon winner prizes.
The Situation
Click to view image
As the Design Team Lead, my responsibilities were to facilitate the design process for GraceHacks' website, merch, and presentation designs. Although I've had previous leadership experience as a UX Design Lead, this was my first time being a team lead (and having a role) for a hackathon organization. This experience was a challenge that tested my adaptability and leadership in working for a fast paced, cross-functional environment where I'd be collaborating with the leads of our other teams.
Evaluating Previous Site's Usability
The design and tech team worked together evaluating usability issues within the previous year's site design.
Our major findings are that:
The website was cumbersome to scroll through due to the desktop and mobile display being too long.
Specifically, the team section of the page is taking up a lot of space and isn't important enough for potential hackathon attendees to scroll through to reach our social media and contact links.
The site did not feel interactive because most of its buttons do not hint an interaction when hovering.
There's a lack of accessible color contrast between the light text and the background.
Design Concept Ideation
After looking over the previous site's design and interactions, our tech and design team favored keeping the same lotus and koi fish theme for our hackathon. However, we ended up making changes towards the koi fish mascot designs to better represent our organization, which will be explained in a later section.
Our initial main goals for our site redesign were to:
Reduce friction in viewing site content by minimizing the need to scroll through large spaces.
Increase the responsiveness of site interactions to convey functionality of buttons easier for users.
Increase the color contrast between the text and the background colors to make our website more visually accessible.
Reducing friction in viewing site content
Turning the teams section into a carousel at the bottom saves a lot of space and allows users to navigate the webpage quicker!
Pinning the navbar allows user to choose a section to jump to - increasing time efficiency and convenience to view site content.
Increasing responsiveness of site interactions
We added hover interactions for site buttons to make it more clear for users that they can interact with them, which contributes to a more engaging experience by providing clearer user feedback and visual appeal for the site.
Increasing the visual accessibility of site contents
Our team utilized the Contrast Figma plugin to check whether or not the website text met accessibility standards in terms of color contrast and readability.
From there, our team would either adjust the font size, text color, or background color to ensure that these accessibility standards were being met.
Redesigning mascot to better represent organization values
The previous year's koi fish designs seemed generic and does not drive home the message that we're an organization empowering minorities in tech.
We decided to take action by redesigning the mascot to a more unique design that incorporates symbols and colors relating to women and non-binary identities. We do note that minorities in tech encompasses a broader range of people than just women and non-binary groups, and we wholeheartedly support them as well.
Left image: GraceHacks 2nd Year Koi Fish.
Right Image: GraceHacks 3rd Year Koi Fish.
The finalized site design
Here's a video of our launched site design! You can also interact with the Figma prototype that was used as the basis for the launched site.
Note: The Figma prototype has limitations with some of the intended site interactions that were communicated to the tech team.
Sticker Designs
For our merch design process, our design team had complete liberty to choose whatever designs felt representative for our organization.
For the sticker designs, our design team decided to individually make designs and then select the two most finalized sticker designs (the most recent iterations of the koi fish and lotus stickers).
T Shirt Designs
For the t shirts design process, we followed a similar process of individually creating t shirt designs. However, we decided that it'd be best to leave the selection process in the hands of a vote involving all active members of our org.
At the end of the voting process, the results for the top two voted t shirt designs were incredibly even. After much consideration, our team decided to select the option that was more affordable due to it using less colors.
Sponsorship Pitches
It was absolutely necessary to secure sponsorships to raise funding for venues, food, and prizes for hackathon attendees. As the design lead, I created and presented sponsorship pitch presentations for on-campus nonprofit organizations to make our event possible. The final results from our team leads presenting to these nonprofit organizations resulted in over $1000 of sponsorship money to fund our hackathon.
The key takeaway I realized from doing these pitch presentations is to be prepared to present relevant statistics to help organizations visualize the impact we make for students of diverse genders within our community. It goes an extraordinarily long way to have a detailed breakdown of data ready to answer any specific questions organizations have in funding our mission.
Reflections
Being a part of GraceHacks as the design lead has been an exciting, challenging opportunity to push myself both as a leader and a designer. As a leader, I've learned that it's critical to assert team members' needs and motivations to better delegate tasks and structure meetings towards our team members' strengths. And as a designer, I've gained invaluable experiences in developing my merch and brand design skills.
My major takeaway from working in an organizational structure like GraceHacks is that it's crucial to pull your own weight and frequently communicate when doing assigned work. When you're in a team, an individual's progress and commitment can be the difference between the entire organization facing a bottleneck or making an impactful step towards their goals. This lesson was hard-driven into me because I've found success in completing my tasks relatively early, which allowed me to contribute more to the team by helping out other teams or individuals that needed support.
I'm extremely pleased to be a part of this organization and helping it host the most successful hackathon it has had in its first three years of history :)
