FACETOASTED: Reflections from MHacks

On dev, product, beauty, … from the Michigan hackathon

Published in

HH Design

6 min readJan 22, 2014

It’s been a few days since MHacks, University of Michigan’s “epic” student hackathon, and I’m still recovering. But while it’s still fresh in my mind, there are a few interesting points to share.

Team Formation + Ideation

I was part of team FACETOASTER with Luis Santos and Jaren “Glove” Glover. We were certainly a motley crew of hackers. Luis and I know each other from Startup Shell at University of Maryland, and from my brief knowledge of his skillset, he was dubbed the “front-end guy.” We randomly picked up Glove when he overheard us saying we would need someone to handle back-end dev. Backend of what? We didn’t know…

At first I was panicked. I’ve previously gone into hackathons with a solid team, a solid idea, and a solid workflow plan. This was certainly a new experience for me, and it shaped how the rest of the event went. We were forced to be hyper-collaborative. Not just working together, but thinking together, and doing it quickly. Our idea quickly took form through whiteboard chickenscratch.

I commend my team for trusting the first underdeveloped vision I pitched: something like “a website that lets you navigate through screens with your keyboard. I want a sexy, front-end heavy project.” We said, “OK, let’s do it and see where this goes.”

Tone

Our jump-started approach to the project led to a set a casual tone. We had no expectations or podium goals which let us have fun with it. It kept our project genuine, truly seeking to create a product that we enjoyed making and using. And let us goof off a lot, which ended up having a big impact.

Product

After a couple hours of coding, we had refined our pitch and overall product purpose. Our scope was narrowed (to avoid feature creep), and I focused on my experiences as a designer to hone our product position. We decided on the following:

A web app for communicating around the iterative design process.

This is important for designers for two reasons.

Designers will be able to better explain and collaborate with the engineers, devs, and marketing team around their creative thought process.
Designers can showcase their iterations in a portfolio format.

Tech teams are infamous for poor interactions between design and engineering. By making a pleasurable experience around visually exploring a designer’s iterations, hopefully that collaboration can increase.

When you see an app, you don’t see all the work that went behind it. A designer has countless folders full of app-1.ai, app-2.ai, app-3.ai… Finally, we can display those in a productive, beautiful way. Whether using this for job applications which ask for “comprehensive samples of your design thought process”, or just seek to display it as a portfolio item, this is a treat for pixel-pushers.

Product screenshot straight from the web, complete with a usage example from Hotdrop.

Branding

Namecheap was offering exclusive event coupon codes for free domain names. With this weight lifted, we wanted to purchase an absurd .com and brand our product to be super fun. And so was Facetoaster was born.

Facetoaster

We secured facetoaster.com, and while we disappointingly did not win Namecheap’s best domain competition (never forget…), we had a ton of fun saying facetoaster.com throughout the 36-hour event.

https://twitter.com/Namecheap/status/424707963136507904

After picking the name, we went backwards to justify our branding. Facetoaster. Well. Face = interface. Ok good start. Toaster: when you put something in, it comes out more well done. Cheesy? Check. Justifiable? Check… ish. Makes everyone smile when they hear it? Check plus.

From here, I worked on the logo. As a designer, this is often the most fun part of any project: pulling together all the different components (technical, semantic, etc.) into a concise visual style. Introducing, Facetoaster.

dsfasdhttp://dribbble.com/shots/1383357-Facetoaster

I drew back to my interactions with reddit founder Alexis Ohanian when he visited Maryland. He talked about how much fun it is to sketch mascots to represent web products. I went all in. After sending him a .png to look at on Twitter, I received an approval of silliness.

https://twitter.com/alexisohanian/status/424802034533941248

Development

We were certainly learning as we went along, and would like to thank Waj, Jacko, and Zach for helping in bits along the way. We employed a few awesome libraries and APIs, including impress.js for our keyboard sliding effect and dropzone.js for our drag-n-drop upload page. Luis was really close to implementing a pixel diff overlay feature using resemble.js, but we had to table that for post-hackathon improvements. A few more details, especially on Jaren’s back-end, can be found on our ChallengePost submission page: http://mhackswinter2014.challengepost.com/submissions/20088-facetoaster.

It’s important to remember that at a hackathon, you’re working on building a proof of concept. Our back-end was not fully built out and would not be ready for demonstration. So we focused on getting the front-end polished in a way that we could convey the purpose of Facetoaster without distractions from holes in the code. This is huge: if you can’t communicate what your project does, the demo is off, regardless of how close-to-complete your code is. We are continuing development back here in College Park to get Facetoaster out in the wild and ready for public use.

Beauty

Conventional wisdom of hackathons says that you’re only hacking code. From our point of view, we hacked the design, too. There is no shame in banging out some mockups or putting an hour into your logo. These are just on my priority list as any coding tasks.

Design can be hacked.

Every member on the Facetoaster team put particular attention towards our design and front-end. This was not polish, it was our goal.

Shirts

In the wee hours of the final night-morning, we decided to whip up a Teespring t-shirt campaign in an attempt to immortalize the Facetoaster logo that we had all come to love. teespring.com/facetoaster. Within 24 hours, we had reached our sales goal and received word that the shirts would be put into production. What a great way to seal off a great time. Can’t wait to wear my Facetoaster tee across campus, giggling to myself.

Facetoaster Teespring campaign. Props to Teespring on the awesome user experience. teespring.com/facetoaster

In the end, MHacks was a great experience (even as my third large-scale student hackathon). I’m excited for more from the MLH season (seeya at PennApps)!