Simple Project Planning with Wireframes

With a new product concept (in this case, Creately plugin for FogBugz), the usual temptation is to dig into development right away. Coding should only be considered after the plugin's behaviour was identified. And this was attempted at via detailed diagrams.

While workflows led us to understand how the plugin works, wireframes helped us with the look and feel of the app, essentially in defining the plugin's graphical user interface. This diagramming process not only avoided re-work but helped our team understand how Creately would behave when integrated into FogBugz (visually, of course).

Below is a simple design diagram that we developed to understand the plugin’s behaviour.

And, then we used wireframes...

 

Wireframing was the best stage which helped us see the real navigation between pages. By planning the process prior to development, it gave us a clear picture of the functionality and usability of the plugin; and helped us identify any potential problems to prevent insidious scope creep.

The wireframes illustrate the interface and information by separating design from the user experience. This was aimed at solving user experience issues. The whole process was a tad bit hectic, so we set out to design wireframes and workflows for each of the process involved in development.

We wanted to explain the designs to the team quickly and easily. With the wireframes and workflows in place, everything was more like storytelling. We invited the entire team to collaborate and brainstorm on the diagrams and wireframes. They were asked to iterate over diagrams to reduce project turnaround times. This helped us arrive at concrete ideas even before we actually started with coding. This way, we were more focused on whether the plugin actually works rather than whether it looks flashy.

Below is a simple wireframe of the landing page of Creately FogBugz Plugin.

Learn How Creately Diagrams works

Learn How Creately Diagrams works