The 352 Hackathon began in 2010 as a one-day R&D or improvement project in a race against the clock. Employees break into teams to create something new for the office, learn a new skill, or build something of interest. When the clock strikes 3:52, the entire company reconvenes to share findings and celebrate a day well spent. Former winners include Marinara Timer and Planning Poker.
In recent years, 352 Inc. has undergone rebranding, focusing the hackathon on the company’s five core values: inspiring people, teamwork, building relationships, smart solutions, and celebrating wins. This year’s winner was MixFrame, who was chosen for their strong focus on building a proof-of-concept that could win over industry experts and influencers. It was a highly functioning product that addresses a real need – an immediate product with real value. The marketing team took a very growth-oriented approach throughout the hackathon, reaching out to leading voices in the design and front-end community to prove the value of the product (which currently has no direct competitor). The team received praise and interest from influencers, which set them apart from the other teams.
MixFrame is a first-of-its-kind UI prototyping tool for designers and front-end web developers. While most prototyping tools provide value at the beginning of a project, MixFrame plugs into a site’s CSS and live style guide to build responsive, drag-and-drop mockups using real HTML and live elements. This allows teams to keep client-facing design comps in sync with real-time development, while ensuring that all members of the development team remain on the same page.
How’d You Get The Idea For It?
The live style guide movement has been growing in the front-end development world, and it’s something we’re really excited about. Through our practical experience, we’ve found that a living style guide has sped up our development because it allows all developers to help create beautiful pages; even those without much front-end knowledge or experience have been able to pitch in. MixFrame builds on that idea and removes even more inefficiency in the process of creating and growing web applications.
It can be very difficult to actually keep your mock-ups relevant and useful when you’re on a months-long project. It’s easy for design and development to fall out of sync – if a designer is making design comps in Photoshop, updating the live style guide on a separate server and then trying to stay up to speed with development work, it’s easy for things to fall apart. So we built a tool that ties the entire team together. If we can plug directly into the live CSS, we could easily build responsive mock-ups for clients or build prototypes for new content areas. And if you tweak the look of an element on your site, all of your mock-ups should instantly get the new look as well.
MixFrame is the first tool to take the living style guide that many teams already have and bridge the gap between design and development to build truly useful prototypes and mockups.
Who will your competitors be and how will you stand out?
Currently, there is no product like MixFrame. Obviously, that could change tomorrow, but we remain confident that we’ll stand out in the industry. Through past hackathon projects, we’ve learned that no one can build a tool quite like us – a tool that we’d actually want to use and that solves real problems. One of the great things about this hackathon is that we own the direction of the project. We can set features, we can cater specifically to our audience without outside interests directing development. We can build a project guided by the development community and our own experiences, and we think that will help us resonate with designers and front-end developers looking for a solution like this.
What do you need to launch this thing further?
Since we won the hackathon, we’re ready for Geoff – our CEO – to provide us with a few weeks of time to build a working product and get it to market. We’ve already begun building support within the design community.
Meet The 352 MixFrame Team
Associate Design Director and Front-End Developer with expertise in interactive design, graphic design, and front-end development. Previous projects include: MarinaraTimer, Dungeons & Developers, Emyet, and ScoreRef.
Scrum Master with expertise in entrepreneurship, front-end coding, and system architecture. Previous projects include: Planning Poker, Marinara Timer, TradePMR (software for financial advisors), Blackstone Shoes (importing high-end European shoe brand to the US), collegesportschallenge (college football pick’em), whatkeys (keyboard stickers for Mac users), and GINsystem (communication tool for college student organizations).
Software Developer. Previous projects include: Marinara Timer, ScoreRef,Dungeons & Developers, and emyet.
Software Developer. Previous projects include: Marinara Timer andDungeons & Developers.
Sr. Marketing Strategist with expertise in analytics, writing, and marketing automation. Previous projects include:Marinara Timer and Planning Poker
Interactive Designer with expertise in video, branding design, and UX design.
Sr. Content Strategist with expertise in content development and social media management. Previous projects include: Planning Poker