Knight Hacks

Branding/Visual Identity, Product Design

Knight Hacks is a student led organization founded at the University of Central Florida, with the goal of educating students about the fields of computer science and technology. The organization holds an annual hackathon geared towards beginners who have a desire to learn about designing and building their own applications. I was fortunate enough to be a part of Knight Hack's first design team, as the Product Designer. My role was to design and prototype the applications used by the development team and hackers during the live event. Unfortunately, the event was postponed due to COVID-19, but this experience allowed me to collaborate with a team of talented designers and developers to ensure that we create the best experiences for our hackers.

The Goals

Since this was Knight Hack's first design team, there was no foundation in place for building products, or a consistent visual brand. I sought to alleviate this issue by creating a design system specifically for Knight Hacks products, and use those guidelines to build the products needed.

The first product I worked on was the live application that would provide hackers updates during the event, as well as hosting information for events/workshops. The second product was the back-end interface that the team would use to input information for the live app.

Design System & Style Guide

When thinking about the brand for Knight Hacks, the team determined that our focus would be on encouraging beginners to get involved in tech. I wanted to create a visual identity that reflected on our values of diversity, innovation, and collaboration. This style guide would also be the foundation for our design system, which could be build upon by later Knight Hacks Dev & Design teams. Avenir Next, a clean serif font, was a fitting font for branding and UI. The color palette is a playful combination with cool colors and a complimentary accent orange.

Knight Hacks Design System fonts, colors, and contrast guidelinesKnight Hacks Design System components

Knight Hacks Live

The Live App was a website page I designed to provide information and updates about the Hackathon to the students that attend. Features include a timer to indicate when the hackathon will end, the hackathon schedule, the workshop schedule, status updates, a list of sponsors, and a map of university campus. In order to aid the developers with responsive design, I created a mobile version as well. The goal was to make information easy to find, while establishing a proper hierarchy for all the of provided content.

Design of the Live App for Knight Hacks Hackathon

Knight Hacks Admin Portal

The goal when designing the back-end application for Knight Hacks Live was to allow the event coordinators and other team members to easily input information for the live app, while also viewing the information for the hackers. I worked with the Product Manager and Development team to design the simplest experience for updating and editing content. We agreed that tabbed menus allowed for easy switching between views of information, and the card interface allowed for easy addition and removal of entries. For the "Hacker View", I designed a dashboard where the admins can view overall statistics from the group of hackers that have applied to the event, and use data visualizations to analyze this information.  While designing this application, I learned how important consistency and simplicity are when creating reusable interface elements.

Design for Knight Hacks Admin Application

Takeaway: Dev & Design Process

During this project I learned more about effectively communicating designs with developers and the importance utilizing the right methods in the process. By using Invision Studio to create my design, I was able to present interactive prototypes for the developers to reference. The elements for the branding guide, including colors, icons, and font files, were hosted in Notion using a template that organized the information effortlessly. This provided a central location for team to reference and download these assets. The brand guide and design system were used to create consistency in the visual design, and made it easier for developers to translate the design to code.