Friday, July 11, 2008

Project Management, Workflow, Methodology Roundup

Good discussion on workflow for making applications, eg e-commerce and the stages you should go through. They're talking about FLIP methodology for Coldfusion. No idea what thats all about but its an interesting rundown of A work process.
http://halhelms.com/webresources/flipout/flipout_3.mp3

General Points:
  • Don't do briefing specification documents, either you or client. Because its too hard to describe. And they dont know how or what to ask for. Make a drawing like an architect does, make a model, then you can test it, no words... no lengthy emails. Make a 2hr wirefame model with real clickable links, then sign off on that as the requirements document. You can even sit there with them and make it.
Try this out
Wireframe Tool
http://www.bjork.net/index.cfm?fuseaction=content.display&page=wireframetool

DevNotes (a feed of messages actually on the wireframe page to go through iterative changes)
http://www.bjork.net/index.cfm?fuseaction=content.display&page=devnotesdeluxe

Stages of Production
  1. Initial meeting, 'what do you want to do?' jot down a narrative of the requirements, in simple english, in descriptive terms. Then email that back to the client to get confirmation that you understood the scope and what the point of what your doing is. At this stage you explain the design process you'll use, and what the milestones are so they know. This is the chance to educate them about whats involved and what their deliverables will be.
  2. Wireframing. A text based clickable front end in HTML with dummy text. No actual pictures no real layout. Just the functionality and content blocks. It can even become the functional code later. Client must use the thing at this stage, not be passive and just LOOK. They must use it. The great thing is they dont get all emotional about colours and shapes and pictures. They just refine the functionality bare bones.
  3. Prototyping is... making the design and getting it right, looking exactly how it should but without a database etc. (Here you make a 'working model' almost. But never 'present' the model to the client, the client MUST sit down with the application and use it, at each stage. Because when you show them, they dont really listen and just think its great. But when they USE it, they immediately see the problems. You use Devnotes here until its done. What I dont get here is HOW to make it look real, without having real database stuff coming in, or real code. Need to look into how that would work, because for small projects like little shopping carts, it would seem quicker to just make the thing, then see how it works and see whats missing, add extra functionality or tables etc.
  4. Prototype freeze is when they sign off on the look and functionality and they cant change anything after that stage - because the most expensive time on the job is the coders. (BUT if the coder isnt the one on the job whos time is most expensive, then the priorities are different). He says it is important that this stage is a ritual, and you treat it with alot of gravity, it needs to be a real signoff, and it needs to be signed off by THE decision maker NOW, not the lackey who thinks they're in charge. They need to understand that NO changes are made after this. If they do want a change it will cost ALOT. He used the example were he charged someone $12,000 to change one paragraph. He also at this stage removes the Devnotes so they see they cannot make any more feedback.
  5. Architecture. This is when he prints out another copy of the frozen prototype. To markup. Highlighting in one colour all outgoing links (and he names them if they are going to be code actions). Another colour all things on the page that are variable (a dynamic element), like a username, or a form field. He also gives all of the variables names. The objective is to identify dynamic elements and exit points from a page and where they go. Take this highlighted stuff into a mapping app like Mindmapper, or Visual Mind, Mind Jet, Mind Manager. So this is what I'd know as a sitemap but a complex one for database design. Purpose of it is to find holes in things you havnt thought of yet.
  6. Then he goes into coding and other stages but its looks like specific info to coldfusion. The interesting thing is that up until here, no real coding has been done at all.
Other stuff:
This article is an excellent description of what a wireframe is, and how to easily make it in dreamweaver.
http://www.sitepoint.com/article/wire-frame-your-site