Mike Cushing / Digital Strategy / August 28th, 2015

Building a Winning Hackathon Product

At our annual company retreat last week, 10 teams presented products built during our annual hackathon, the Race to 3:52. From new office and productivity apps, agile tools and DevOps systems, one product emerged victorious: MixFrame.

MixFrame is a first-of-its-kind UI prototyping tool that allows development teams to build responsive mockups using its existing CSS and live style guide or component library. You’ll hear more about MixFrame soon, so we wanted to take a look at the team’s winning hackathon formula.

Screen Shot 2015-08-27 at 3.08.58 PM

Refining Goals

Each hackathon product was judged on a number of factors: marketability, development progress, a product roadmap, user experience, technical execution, design execution and a presentation to judges. Rather than focusing individually on each of these criteria the team simplified its hackathon mission to just three key tasks:

  • Prove the idea is technically feasible.
  • Prove the idea has market-viability.
  • Be able to communicate the above effectively.

From day one, the team avoided anything that didn’t feed into those three goals.

“We only wrote code that would answer the big questions of complexity and reinforce the product demo, and avoided the obvious “in between” bits,” said Lincoln Anderson, MixFrame product owner and front-end developer. “We focused our market research on real people in our market and avoided speculation. We focused on our presentation’s flow and wording, and didn’t worry as much about special effects.”

POC Over MVP

Screen Shot 2015-08-27 at 11.45.30 AM

For MixFrame, the first task was particularly important. Though industry leaders like Ian Feather and Brad Frost and many others have preached the live-style guide movement for years, there is no existing tool that allows designers and front-end developers to easily leverage the style guide in a production environment.

Since MixFrame held the unique position of introducing a new, complex idea, the team decided that a proof-of-concept was more important than a minimum viable product. They decided that through focus on the features that seemed hard or unsolvable, they’d be able to win over cynics and prove the worth of the product.

“Since this application is pretty complex, finishing the MVP by the end of the hackathon would have been difficult, or impossible. So we strategized on the features that were harder to prove. – Chris Burns, Scrum Master”

After all, any dev worth his or her salt can build a login screen, but what about pulling in external CSS or creating bitmaps of each element – the backbone of the project? So, rather than building a full MVP, the team built a developer preview to show how MixFrame plugs directly into your existing CSS style guide to build responsive mockups using real HTML and components.

Building Connections

From the beginning, the team valued industry outreach and feedback. Since the three-day development timeline made actionable user testing unlikely, the team took deliberate steps to contact industry leaders to gain exposure, validation and traction. The MixFrame team believed in its outreach so strongly that it actually included more marketing personnel than development.

Through the presentation, Lincoln Anderson channeled his inner Elon Musk to connect with hackathon judges with real evidence. He added judge photos to the developer preview (seen above) and highlighted the industry reception from Feather and Tim Wright. Driven by social media outreach, these connections transformed from a simple product idea to one with industry validation and support.

Have a Path to the Future

mixframe-integrationObviously, MixFrame was built with the intent on finishing production and launching to market. Hackathon teams often struggle with the transition from hacking to building – occasionally because they choose a technology stack that lends itself to quick development, rather than intentional development. Ultimately, this leads to a project that must be rewritten for performance, clarity and quality.

Since actual development was limited to proving its concept, the MixFrame team was very intentional in its technology choices to ensure a solid base for future development – unit testing with Jasmine and confirming code standards with editorconfig, jscs and jslint. Most importantly, Browserify allowed the team to easily build the project as if it were normal server-side Node and properly bundle it for the final product build.

Don’t Work to the Last Minute

Though it may seem counter-intuitive for a 3-day hackathon, the team committed themselves to not completely overworking themselves, but spending every minute dedicated to the strategy it thought would win.

“We were honest with ourselves and knew how much progress we could make during the hackathon and leading up to the presentation. We brainstormed as a group and prioritized tasks by impact and likelihood they’d be finished in the initial three days and the 3 weeks before the presentation. Once we were all satisfied, we got to work.”

Just as it simplified its hackathon mission, the team also simplified its workflow. Rather than expanding scope, they focused solely on the ideas that seemed hard or unsolvable and committing to building them without working tirelessly. Of course, even with an intentional approach and a strong strategic vision, winning the hackathon was still a real challenge.

According to Chris Burns, “It was 1 part planning, 1 part effort, 5 parts luck.”

  • Paul Traylor

    SOOOOOOO proud of the entire MixFrame Team. Great work. Great product. Can’t wait to use it!