Redefining the design process for Purdue's hackathon
I joined the BoilerMake team in January 2018 as a design executive. BoilerMake is Purdue’s annual hackathon; we work to plan a weekend where hundreds of engineers, developers, designers, and entrepreneurs come to Purdue’s campus to create exciting, revolutionary, or funny projects. I was extremely excited to work with the team to build BoilerMake’s theme, branding, website, application, and marketing materials.
Though the team was exceptionally skilled, I was surprised to find a lack of common practices in their design structure. Designs were generally thrown together based on the theory of “looks good!” BoilerMake had never focused on creating an exciting, beneficial experience for users, let alone a full design system with design standards. I slowly but surely have brought these ideas and changes to the team, and I truly believe it has led to more cohesive design, more organized collaboration, and an overall improved experience for our hackers.
Check out our work at BoilerMake.org
in this case study
Development: 1 Lead, 3 developers
Design: 1 lead, 1 front-end engineer, 2 designers, Me - UI/UX designer
Communications: 1 lead, 3 copy
Sponsorship: 1 lead, 3 outreach
User experience design, user interface design, graphic design
Sketch, Affinity Designer, Invision, Google Docs, Slack
January 2018 - Present
I. Creating BM-Kit
Developing design standards and a design system
I believe in the power of design systems to create cohesive, collaborative, and continuous designs throughout a product. When I joined BoilerMake’s design team, the process was rigid, allowed for minimal collaboration, and led to every designer creating different designs. After consulting with the other designers, I started the BM-Kit initiative, which allowed me to work with the director, Comm team, and design team to create some standards.
BM-Kit turned into a set of design standards, a Sketch library, and a React.js framework. Its primary focus was for the website, but it also includes standards for marketing materials. We developed standards for the following:
Every component of BM-Kit was developed for easily duplication with the goals of BoilerMake in mind. Our color palette was selected to enhance the feeling of BoilerMake being a fun, creative, energized weekend, while still being general enough to use in a plethora of contexts.
Typography was designed to be readable and accessible, while still maintaining the same feelings as color.
Containers and rules
Containers and rules were important, because we decided to use a card-based system for the design; this allowed us to separate important information into groups and structure the website with minimal cognitive load.
Buttons and user input
Buttons and user input were designed with accessibility and user experience in mind, incorporating the color palette and maintaining the design.
BoilerMake now has a legitimate design process that allows for more productive collaboration between teams, focuses on intentional design decisions, and has the structure a team needs with the flexibility to remain creative. BoilerMake now has a legitimate design process that allows for more productive collaboration between teams, focuses on intentional design decisions, and has the structure a team needs with the flexibility to remain creative.
II. Rethink the application
How to simplify the process while still gathering the information we need
One of the goals of BoilerMake 6 was to retain hackers throughout the application, and to receive a large number of quality projects at the end of the hackathon. Looking at the data from previous BoilerMakes, we found that nearly 1/3 of started applications were not completed. The majority of incomplete applications were only incomplete by missing random fields throughout, without much notification that fields were empty. I set out to change that, with these goals of BoilerMake in mind:
- Get as many completed applications as possible
- Collect enough information to determine quality hackers from the people showing up for the free t-shirt
- Only collect the information we need, or the information that Major League Hacking requires
- Inform applicants our reasoning for collecting the information we do, and make optional information visibly optional
My process started by looking through the applications of previous years. The following example is the format the team used for BoilerMake 5. While aesthetically pleasing, it has a large cognitive load - the applicants have numerous directions to look to fill out the fields.
I started brainstorming other ways to build the application. Ideas I toyed with include:
Creating a game-like, story-driven application design: Questions are posed in the form of sentences with fill in the blank slots. The design and illustrations add to the experience.
Adds to the BoilerMake we're pushing
Considerable amount of work
Slows the application process for users
Difficult for the dev team to implement
One input displayed on screen at a time, allow for scrolling between them
Allows an applicant to focus on what they’re
typing - good for essays
Can involve fun motion design
Slows the application process
Difficult to review input before submitting
Difficult for the dev team to implement
Create a single-column input with each question - display them all at once
Quickly tab between questions
Easily review responses before submitting
Can easily integrate BM-Kit - great for Dev team
Applicants have one direction for flow of responses
Easy to convert to mobile devices
Not an extremely exciting nor memorable idea
After meeting with the design team, we decided to move forward with the single-column design. I started sketching and wireframing how to set it up. The single column already solves the problem of the fields left blank and higher number of incomplete applications; now my focus was how to inform the applicants of why we’re collecting certain information.
I separated the information we’re collecting into various categories because this helps the user keep track of where they are in the application, while also decreasing the cognitive load of a giant group of questions without separation.
Next, to inform applications as to why we’re collecting certain information, there are two options: display that information by default, or make it incredibly simple for them to find it. I created three variations: one with the information always displayed in a second column, one with the information easily accessible via hovering over a ‘?’ for each section, and one with a ‘?’ for each individual question. Displaying a second column makes the webpage feel off balance and makes the information readily available, but easily missed. Displaying a ‘?’ for each section is simple for the view, but makes sorting through the bulk of information difficult for the sections with numerous questions. For those reasons, I moved forward with the third option.
Creating the designs was rather simple after the development of BM-Kit. I used a card to separate the application from the background and illustrations, and used the spacing guidelines to ensure the information hierarchy was the most beneficial it could be. Using BM-Kit, the final design for the application looked like the following:
III. Integrating theming
Using color and illustrations to set the tone for the weekend
Our goal for the website and marketing materials was to enhance the BoilerMake brand, and to set the standard that BoilerMake is a fun-filled weekend of creativity and hacking. We browsed numerous illustration styles, and decided to incorporate bold colors; thick, broken outlines, and and incorporate a generally futuristic feel to match our yearly phrase “Forge the Future.” Below are some examples of illustrations and marketing materials that I created for BoilerMake VI. Here are some examples of designs that I created using these principles and the design standards set up in BM-Kit.
"Apply Now" Poster