{This is a post from David Lesches on Firehawk Creative that I am reposting for your viewing pleasure}

We’re pumped to announce that we’ve just released the Firehawk Creative Imaginarium, our internal collaboration and brainstorming tool for client projects.

Over time, every devshop and startup develops its own processes and methods of operation. As these processes evolve, third-party organizational tools like Basecamp, Asana and Trello become less and less useful, as their methods and processes don’t mesh well enough with your own.

When that happens, it’s time to roll your own organizational tool. Ours is the Imaginarium.

The Most Important Things

Every great product is driven by a small set of defined, core principles. There are three principles that drove every design decision in the Imaginarium:

  1. The client is king. Many freelancers and devshops believe (with some justification) that a client is best served when he/she is relegated to observer status. We believe the opposite: we are the creatives, but only the client should approve tasks or mark them as satisfactorily complete.
  2. One big room. All bases of the Firehawk process need to be covered: everything from wireframing, stories, and tasks to file uploads, billing, and messaging should take place under one roof.
  3. But it’s just a website. The real magic of collaboration happens face-to-face. It’s important to us that while the Imaginarium needs to be a perfect tool for collaboration and review, it should not replace real-life interaction. The Imaginarium therefore purposely avoids overstepping. It never becomes the method of primary communication between Firehawk and the client. We prefer meetings and conference calls for that. So do our clients.

So, ready for the tour?

Meet the Client

Unless you’ve been living under a rock, you’ll be familiar with Game of Thrones, the epic TV series and book saga about the the civil war for the Iron Throne of the Seven Kingdoms of Westeros.

If you have been living under a rock, do not fear! Here is all you need to know: In Game of Thrones, the Lannister family are the richest people in the kingdom - so rich that practically everyone is indebted to them in some way. They are also not a particularly friendly bunch. (Surprise, surprise.)

For this theoretical run-through of our Imaginarium, the Lannisters are our client, and we are building them the Lannister Ledger, an app to keep track of all the money they’ve lent out.

Process

At Firehawk Creative, our process (outlined in detail here) follows five steps.

  1. Discovery - strategy sessions to get everyone on the same page.
  2. Wireframing - general mockups of the pages and workflow.
  3. Storyboarding - outlining all functionality as user stories.
  4. Design - transforming the wireframes and stories into full design mocks.
  5. Development - coding the app.

The Imaginarium is modeled directly on this process, with one section per step.

Wireframes

Work begins with wireframes. Great wireframes communicate layout and flow without getting caught up in design. We draw our own wireframes using Photoshop. While wireframing programs like Balsamiq are popular, the wireframes they render are cutesy rather than communicative. For the same reason, we never use fake “lorem ipsum" text in wireframes: text has an enormous influence on layout, and using real text changes the feel of the page.

Wireframes that have been approved by the client are overlayed with a green check. Each wireframe also has a details page which displays metadata, like the current state of the wireframe (draft, second draft, etc), and detailed comments. When the client is happy with the wireframe, he/she approves it.

Storyboarding

Great user stories make or break a product. After our client strategy sessions, we convert every single piece of functionality into a user story. The client then approves the stories they wish to build.

Our storycards are intelligent: using an algorithm, they automatically detect which stage of execution they are in (New, Client Approved, In Progress, Pending Signoff, Complete), and then update their state automatically. They also change color depending on their state, giving the client an easy way to visualize the overall status of the project.

Cue The Party

At this point, the client has approved the detailed wireframes and user stories, and everyone is on the same page as to how the final product will look and function. The design stage of the project begins.

Design

The Firehawk team begins working on the final design mocks, with intense emphasis on the design being beautiful, meticulous, clean, and user-friendly. As the mocks are completed, they are uploaded to the Imaginarium for immediate client feedback.

Cool mock, huh? I know how badly you want to see it close-up, so here ya go:

You’re welcome!

Development

As the design mocks are tweaked and approved by the client, the project moves into the development phase.

Within the development stage, the stories remain the core focus, and our attention never wavers from them. Each story is broken into smaller tasks, which are checked off as the story is coded.

You’ll notice that the stories themselves have been split into weekly sprints, allowing the client to foresee exactly what will be coded when. Also, unlike Basecamp and Asana, every task must be directly assigned to a specific person for completion. This ensures that tasks don’t fall through the cracks.

Vault

Every project also has a vault, which is a general file upload bucket. This is very useful for quickly sharing important documents with everyone while keeping everything together in a central place.

Dashboard

What would a project management app be without a dashboard? The Imaginarium dashboard affords a unique birds-eye view of the project, while doubling as a communication panel and message board.

The dashboard’s most important feature is the Watercooler, a live real-time chat system for a project’s collaborators to brainstorm and discuss ideas. The Watercooler doesn’t replace meetings, standups, or phone calls, but serves as a useful place to leave notes and general feedback for the entire team.

Underneath the Watercooler is a detailed Activity Feed which tracks every single action occurring in the project. This is a great way for clients to see a quick rundown of everything that has been happening: items uploaded, comments submitted, wireframes approved, tasks finished, and stories completed.

To the right of the Watercooler are general project statistics:

  1. The Overall Progress panel gives a clear representation of where the project is holding overall.
  2. We use errbit to track and catch errors in production. The Health panel queries our errbit server in real time and fetches the latest statistics on whether new bugs have been found.
  3. The Github panel provides statistics on the latest code items pushed to production.

Ultimate Collaboration

We spent the time to build out the Imaginarium as we know that the surest way to build the best product is through maximum collaboration with our clients. We felt that we weren’t able to achieve that through the existing solutions. As you can tell, we are incredibly excited about the Imaginarium as we know it is going to be a tremendous value add to all of our projects going forward.

Have questions or feedback? We’d love to hear it! Use the comments or shoot us an email to david@fireahawkcreative.com.