UI/UX, Branding, Visual
Hack@Brown is Brown University's annual hackathon. Aimed towards students at all skill levels, it is very beginner-friendly and aims to empower students from underrepresented minorities in tech to learn more about coding. As a result, our designs needed to be welcoming and inclusive. While this project was overall a massive team effort, the projects described below are some of my specific contributions to the team.
Design lead on hackathon application form, wayfinding, and most print materials including the booklet and a selection of posters. Contributed to branding (color, typography, theme, etc.).
The Hack@Brown 2016 Design Team also included Kevin Ma
, Koko Nakajima
, and Nate Parrott
Design team lead. Headed projects to do with registration workflow, day of website, mentor homepage, and wayfinding. Contributed to branding. Coordinated with various teams (dev, experience, sponsorship, media, etc.) to organize the creation of assets and to make sure projects created were in line with our mission statement.
The Hack@Brown 2017 Design Team also includes Miranda Chao
, Koko Nakajima
, Ryan Nguyen
, Nate Parrott
, and Gabby Widjaja
- How do you make technology more accessible to people from different backgrounds through branding and UX?
- How can you translate core values and branding into different themes?
For both years:
- A visual branding system
- A streamlined registration workflow that explored tradeoffs concerning data collection and user experience
- A wayfinding system to improve people's in-person experience
How do we make ourselves feel more approachable?
How do we iterate on this idea?
Hack@Brown has a very specific existing brand that is already recognizable:
The claw logo has been part of the brand since the first hackathon—it's something that hackers have come to recognize as being part of the brand identity.
While the theme changes every year, the overall design has always been cohesive and above all friendly.
As an organization, we are known for being very welcoming to beginners, which is something we try to allude to with our design.
With changes every year, we have to keep those three elements the same while still creating a new theme that makes people excited to attend the event. Our reputation for good design is evident in the much appreciated articles
from previous years and in the designs for other hackathons
that seem to emulate our design decisions.
Branding was a very collaborative team effort—we all participated in the ideation state, as well as evolving the brand guidelines as we translated it into various different forms.
Our method for ideation was to do team meetings and brainstorm different ideas, throw up various typefaces, and talk about different color palettes.
As a collective design team, we brainstormed possible ways to visualize the way Hack@Brown encourages people to learn more about areas of study that they had never explored. One theme that we kept coming back to was the idea of building blocks—Hack@Brown is an event that provides the starting support for interests in tech.
We played around with different color combinations—looking back at previous years, it's gone through various phases of sepia to pastel colors—but we ultimately decided to go with bold, fun colors. We focused on primary colors, with a more neutral blurple color tying them all together.
The theme was origami. Origami is the physical building of a product, often with a beautiful surprise at the end of the process. It's also something that anyone can pick up and try, with proper instruction—a sentiment we wanted to express in the hackathon itself.
We explored a wide range of typefaces, but settled on Circular as the main typeface. It was flexible enough to use as headers, as well as for short pieces of body type.
The main draw of Circular was the fun nature of it—it fit very closely with the exploratory nature of Hack@Brown.
While I was not in charge of the final website design, these were the first few mockups I made that were an exploration of what the form might look like. Parts of this first ideation made it into the final design that Kevin and Koko created—the splash screen that used a duotoned video playing in the background, the bright colored section backgrounds, and the color combinations.
One unexpected thing that came out of these first pass website mocks that I made was the creation of a new branding element—the confetti. Because I was exploring different ways we could make the page more engaging, I decided to break down the logo into parts and throw them over the page. The team liked the idea of deconstruction, as well as the confetti element, so we simplified the shapes and brought that idea into our branding.
Similar to the previous year, the entire design team took part in ideation. However, it was organized slightly differently this year—
These animations were part of my initial ideation. The theme I came up with was basic shapes that had specific behaviors associated with each of them. I found it useful to attempt these animations in order to see how different colors and forms behaved with each other.
This was eventually the overall theme that we started to run with, but borrowing visual cues from many of the other design team ideas.
Visual ideation based off the selected theme of simple shapes.
As a change from last year, we attempted to have a lighter palette—it felt more inviting and more playful than the dark theme we had last year. One other big change was that we defined as many possible use cases for the colors:
- How would they be affected if on a darker background?
- What set opacities should we use?
- What is the gradient of colors we can have?
Typography was important to us. We liked the feel of Circular from the previous year, but we felt that it sometimes felt a bit too geometric—we wanted something that felt a little bit more humanistic. Eventually we decided on Aperçu, which is still geometric but slightly more humanistic.
We changed the logo geometrically so that it felt more cohesive. Major changes were:
- Simplified the shape geometries so they were less confusing and easier to draw
- Increased claw size vs the 3 stacked hexagons in order to make it feel more balanced
- Use the colors more as decoration versus making them define shading and space, so it was more of a play on a color. This let us be a lot flatter with our logo in order to fit better with our theme of simple geometric shapes.
What is the best way to ask for personal information?
Applications can be tedious and annoying to fill out. We asked the rest of the Hack@Brown team, as well as our extended network of people who we knew attended hackathons, if they had any problems with signing up for hackathons. From these conversations, we found the following things:
There were some edge cases of people who filled out many applications at once because they try to go to as many hackathons as possible. They wanted something easy to fill in.
Our application form didn't really suit the rest of our personality as a friendly hackathon
Some people had a hard time being able to fully define themselves on various hackathon forms (e.g. people of mixed ethnicities/race, people with non-binary genders, people who were not American)
There were people who attempted to fill out application forms on their phones—sometimes this gave them trouble (e.g. when uploading resumes, sometimes forms were not optimized for mobile)
We wanted to be approachable—our application needed to not feel like a chore to do. We would only ask for the bare minimum information that we needed about our participants. We want to design with the edge cases in mind, which will help make people feel more comfortable—something we're committed to doing.
2016: Registration Workflow
During this year, I was in charge of designing the application form specifically, rather than the overall registration flow.
Idea #1: Ad Libs Form
This was an idea we came up with because it definitely met our criteria for being fun and approachable. However, we came across a few problems when testing it among other team members and these problems made it unusable:
Unconventional so it's harder to fill out, especially for those edge case users who are attempting to apply to many hackathons at the same time.
Specific form fields were hard to put into conversation in a way that felt conversational (e.g. URLs, resumes)
Bad usability on phones—when filling out forms, the screen zooms into the field that you're inputting information into. This is so you can see what you are typing. However, it removes the context of the input field (especially horizontally), which makes the adlibs form unusable.
The traditional form approach was therefore used because we knew the design paradigms would fit into existing use cases like phones. However, we tried to make the copy introducing you to the form seem welcoming and inviting.
One other function we added was the autosave. This allows their changes to be periodically saved to their account (tied to the email they enter) in case they get disconnected. However, to give users more certainty as to whether or not their information was saved, there is also a manual 'Submit' button at the bottom of the form.
Conventional Form Fixes
Some changes were made to improve usability:
- Form inputs were changed from red to yellow, as red made users feel like they were inputting wrong information.
- Required fields are marked to make sure there are no submit errors
- Input field labels were placed above the input fields, rather than to the left. This provides more space for the input field—important for mobile when inputs can be long, but horizontal space is limited.
- More spacing was added between input fields. This allows for bigger clickable areas and less frustration of clicking the wrong input field.
There was a bit of a back and forth among everyone involved in creating the application form about certain fields like race/ethnicity and gender—information we wanted to collect because we wanted to make sure we were following our commitment to encouraging tech education among underrepresented groups in tech.
We didn't want to have a drop down list, because it restricted people to choosing just one label for their identity, and their identity may not even be on the list. Similarly, even with checkboxes that allowed people to select multiple identities, it restricted us to presenting the most popular/common identities and placing an "other" label on the rest. Because of this, we went with the approach of doing an autofill-style form, where people could start typing. If their self-identified identity was used before, or was from a list of the most common identities that we could find (sourced from Facebook), it would appear on the form. Otherwise, they had the ability to add more to that field.
2017: Registration Workflow
As one of two design leads this year, I was in charge of the larger registration workflow—how do we get potential participants to apply for the hackathon from our website? This involved looking at 2 main sections in multiple states:
- The registration dashboard—what you see when you have started an application
- The application form itself
From last year, I had some ideas about ways to improve this process:
Designing last year was isolated to just the form—it was hard to design when I didn't know the context of where it was going to live
- Improvement: consolidate the entire registration flow onto a specific team within the overall design team
The application form still felt like a generic form
- Improvement: find ways to bring in delight—things that celebrate people applying
There were many pain points with coordinating designs with the dev team
- Improvement: finish wireframes to give to dev, then follow up with specific styling. This lets them build the basic structure of the page, as well as allowing them to raise specific concerns about various proposed design elements.
- Improvement: dual worksessions with dev to make sure both the dev and design teams knew each other so they could work together better
These were the final wireframes handed over to the dev team. They were tweaked from their original form through conversations with the dev team (about implementation and time restraints), the experience team (about content and how to ask for information), and the leadership team for final approval. Working alongside two other designers on wireframes for related screens that we were individually responsible for meant that all of us had a better idea of where our designs sat in the overall workflow.
From these three parts of the registration workflow, I chose to focus on the application form.
This was one massive improvement in the workflow from the previous year. Drawing on my experiences from my internship at Weebly, I realized how important it was to give precise information about all design elements on the page to the dev team. This made coding it a lot quicker, and it also allowed the dev team to focus on making things work versus trying to figure out how all the different states look.
However, we realized this year that the registration flow doesn't just end at getting people to say they're attending—it eventually turns into making sure that people who are registered to attend can actually find the information they need. We already had the day-of website for participants, but one pain point was that mentors didn't always have an online reference for information on the day.
This turned into a new page that I helped design and then eventually coded. It provided mentors with specific information that they would need:
- Easy links to HelpQ and the mentor Slack—we can now give them one central link instead of giving them multiple links to sign up with.
- There's an online version of the mentor guide, which they are expected to read over. This stops us from having to print multiple versions of this guide.
What's the best way of guiding people through an unfamiliar space?
Hack@Brown had a common problem for college hackathons—the buildings we were using for the hackathon itself was on Brown University's Main Green. This meant that it was easy to find for any Brown student, but for hackers coming in from other schools, it was a problem. Because there are no streets running through the Main Green, we couldn't give participants an exact street address to arrive at—even if they found the entrance to the Main Green, they wouldn't necessarily be able to find the building.
Additionally, the hackathon was split between three buildings—two of which were used for hacking. We had to find a way to let participants know which buildings were okay to hack in. It was also necessary to improve navigation of the buildings themselves so participants can find essential things such as bathrooms and food, as well as events such as workshops.
Furthermore, the time of year was important to consider—February in Providence, RI is very cold and snow is very common. In all Hack@Browns apart from 2017, we ended up ending the event with a snow storm on the night of the last day. If we were to do any signage, it had to be able to stand up to snow and extreme cold.
In order to give attendees directions through Brown University's campus, we placed flags in a path from the closest street address to the registration desk. They were blank, but in the Hack@Brown 2016 colors. We also placed a team member at the street address in order to point them in the direction of the flags.
This was the best solution we found that could work with physical limitations outside—the snow meant that posters and other paper products would not be a good solution as the information would easily be lost. With these flags, if one was missing or damaged, it wasn't as important as a single poster being damaged.
However there were a few issues:
Flags were not directional. Even if stuck into the ground facing one direction, the wind would inevitably make them face a different direction. This was an issue because the point of them was to be directional and guide people to the appropriate building.
Because they had to be in the snow, they were on one edge of a fairly wide walkway (shovelled snow only gets piled up along the edges). This meant that they were often missed by participants walking in, which meant they didn't serve their purpose.
As the snow started to melt, they got lost or buried—something that was hard to clean up.
Light blue signs were for common places that attendees might want to visit, especially those with multiple locations (bathrooms, food, sleeping rooms, etc.)
Yellow signs were directional. These were usually paired with the light blue signs, giving users a yellow path with a bright blue endpoint.
Blurple signs were event-specific signs, such as announcements for events, rooms that were for a specific purpose (such as workshops), as well as wifi and day-of website information.
White signs were used in two use cases: at registration to guide attendees, mentors, and sponsors to the appropriate tables, and to list events at specific rooms (e.g. a listing of all workshops and times in a room).
Red signs were for food signs. These were much smaller than the other signs and were placed next to appropriate food during meals.
Arrow signs used the basic triangle shape to point people in a specific direction. These directional posters were yellow—it made them easier to spot and therefore follow to the correct location.
Locations were marked by a bright blue poster with multicolored circles on it. Circles are often used to denote location, to mark a spot, so the basic circle shape was chosen to replace the triangle of the directional signs.
One large change we made that was that we posted large schedule posters in prominent places. There was at least one of these posters on each floor. This was massively effective for a number of reasons:
Hackers, mentors, and sponsors often forget that the schedule is in the booklet and on the day-of website. If they choose to go find a hack@brown team member, they will most likely pass the schedule poster on their way. This gives them the information when they need it, while also reducing demands on team members.
They were bright blue to attract attention. Colors and shapes along the timeline could also be used to quickly differentiate different events by type—green circles for h@b events, red squares for food, and yellow triangles for workshops. These shapes were scaled in size compared to the impact of their color on visual perception, but also in order to encourage participants to attend workshops.
Vinyl stickers and colored tape were used to guide hackers, sponsors, and mentors towards the appropriate destination for check in. This design choice was made because it allowed us to easily guide hackers to their destination without having to post volunteers at the entrance, as the buildings did not have a street address. It was also directional because the stickers along the line had content facing in the direction of the buildings. To read the content, you had to face the correct direction.
However, this approach was problematic for a number of reasons:
- Vinyl and tape did not stick very well to the floor. As well as that, due to the time of year, it was extremely cold during set up the night before.
- It was easily the target for vandalism, as it's pretty easy to remove (especially the larger pieces). This was evident on the morning of the first day, when part of the vinyl signage that had been placed out the night before went missing during the night.