One of the most exciting things about our hackathon was seeing how each team approached its work. We had 8 teams, and each one exploited different technologies, marketing tactics and designs to achieve their goals. This is the story of Team Waffle Fry, and how we built Flare, the dashboard for Agile teams.
Everything Starts with Inspired People
As you can imagine, there was a mad rush for talent on each team, and we ended with a lean but very talented (if I do say so myself) team consisting of a designer, a UX strategist, a front-end developer, a sales-and-marketing pro and myself, working as a back-end developer and the product owner.
An Idea Only Gets You So Far. Now What?
We knew we wanted to build a dashboard that would present only the most fundamental sprint data to an Agile team, now we needed to bring this abstract goal down to actionable items. We identified our audience (developers, product owners and Scrum masters), formalized team roles, settled on a name for the product and decided to focus exclusively on the Agile tool JIRA to ensure we could reach a minimum viable product in 3 days.
With a five-person team, all of us had to step out of our comfort zones to make Flare a reality, learning skills that I know will absolutely carry over to client projects. We conducted user research, created content for our marketing site and our presentation, and generally collaborated across the project to knock out each goal.
The best part of hackathons is the amount of learning we have to do in addition to the actual development we’re racing to complete. Once Jason, our front-end dev, and I identified the right tools for the job, we quickly understood we’d have to do some learning. Namely, he’d have to learn D3.js for data visualization, and I would have to get serious about AngularJS.
Despite the mounting challenges, we were very energized and excited by the fact that we’d have to learn, execute, and iterate over the course of only three days.
Ready, Set, Go!
Armed with our research, design sketches, and a lot of excitement, we got down to hacking. Just like any Sprint, we prioritized tasks, but on such a short timeline, we had to start by determining which parts of the product we had to cut. Deciding what not to do is a fundamental step for any web project, which is why development teams are so critical in assisting the product owner with the backlog. It’s better to discard features up front, than go through the stress of running out of time and being left with the frustration of a mission not accomplished.
As a product owner I knew I could easily become a bottleneck if I tried to be involved in every decision. Instead, I made very clear to each team member that they would have final say on any decisions needed to complete their area of responsibility, and that they should seek feedback when they considered it necessary. This allowed for the right amount of collaboration without slowing down our progress.
Just like we had a lean team, we wound up with a lean backlog:
- Dashboard views for all three user types
- Focus development on making the product work on large screens (it ended up working pretty well on desktop and mobile as well, but only as a byproduct of using responsive design.)
- Design concepts for all three screen types
- Marketing strategy
- Pricing strategy
- Marketing website
The Nerd Bits
Let’s get down to the nitty-gritty. The back end is built on Laravel which is used for three main things: persistence layer, consuming the JIRA REST API, and serving the Flare API.
The front end has bits of AngularJS for data binding and polling, and uses D3.js for data visualization. It also uses a tiny bit of jQuery for the carousel.
Last, but not least we made use of some great tools that make our work so much more efficient and pleasant: gulp.js, Bower, Sass, Bootstrap 3, and Google Fonts.
‘Til the Next
If you use JIRA, we strongly suggest you sign up for the beta at getflare.io. We will be launching very soon and would love to have you along for the ride, providing us feedback and growing with us.