2013 – early 2014

Hackathon template

Standardizing design and content for hackathon pages

Problems to solve

No consistent format for hackathons

For example, one hackathon clearly indicates eligibility requirements while another buries it deep in rules legalese. Managers should be prompted to enter necessary info so placement is standardized and participants can easily locate it.

No brand recognition for ChallengePost

Hackathon sites were so custom designed, users didn’t recognize they were hosted on the ChallengePost platform. To establish our “home for hackathons” credibility, a new template should look less like a custom landing page, and more like it belonged within an ecosystem of other events.

Amount of time spent designing hackathons

As the only designer on staff, I needed to create an attractive and flexible template that required much less of my design time to support, so that I could devote resources to other projects critical to business needs.













Sampling of hackathons I custom designed

Goals

  1. Utilize expertise on valuable hackathon content to direct information hierarchy.
  2. Design a template that’s instantly recognizable as a ChallengePost hackathon.
  3. Streamline custom options to reduce design time, but still allow managers to give their site a branded feel.

Solution







A few exploratory options for the new hackathon template

I designed around 70 options for a new template. After several internal rounds of feedback, we settled on a new layout.

Along with the new layout, additional fields on the backend improved the collection of important info. New prompts helped managers consider what to input based on common trends we observed.

Finalized new template layout

Technical challenges

Supporting two hackathon templates at the same time

We always have hackathons live, so the new layout couldn’t be released like a normal project (where it's deployed and instantly enabled site wide) because it would break open hackathons. Changing the entire layout mid-hackathon would be a jarring experience for participants and managers.

We continued to maintain the old hackathon template while building out the new one. The new template was enabled on a per hackathon basis. All new hackathons received the new template by default, and we migrated existing/old hackathons one by one when it was safe to do so.

Manually migrating old designs to the new template

We wanted to enable the new layout on all hackathons as soon as possible to remove the technical debt incurred by supporting two templates. But because of the visual change, this task couldn’t be fully automated. I manually transferred about 80 of our custom designed hackathons to maintain their styling in the new template. I tackled a small group each week to avoid total insanity!

Re-designing a hackathon from the old template (left) to work with the new template (right)

Lessons learned

Everyone wants to be a designer

Getting design critique on the new template options from everyone on the team was a bit overwhelming. Feedback is great, but can quickly turn into a battle of opinions. Looking back, I wish we did user testing on the new designs, but at the time we didn’t have a user feedback method established. Since then I’ve learned that when in doubt, let your users point you in the right direction. They’re who you’re really designing for.

Hire design interns

Just kidding... sort of ;) I definitely felt the pain of being the only designer on the team during the manual migration process! #startuplife