The development phase starts when you approve the design PSDs and the team starts to work on converting the PSD into HTML pages and actual flow design. Here is where your SOW is going to come in very handy, and in our case a well defined SOW made it a lot more easier to navigate through this phase. This phase is when you will want to have well defined internal milestones where you run the testing of various flows as they are getting built and put in place. The well defined testing milestones are important so that you can discover any issues in the flow that you have defined or uncover any gap between your and your teams vision. You want to identify it sooner then later, because it will involve a lot more to change it once the backend is in place,
Also the thing that you should keep in mind is SEO and how you want to use any mark up language or Rich snippet. We used various tools while navigating through the development phase
- SOW – A well defined SOW is very essential during the whole project life cycle but during the development phase you are going to get the maximum usage out of it.
- Basecamp – To keep every one informed about all the steps being taken and all the comments or conversations being done.
- Bug Tracking System – A good bug tracking system is very essential to keep track of all the open issues and check how the progress is going – we had to come up with our own that we developed using google docs and google spreadsheets
The first milestone we had defined was converting the PSD to HTML and just have the page to page flow. This is done by simple linking between the pages with no backend. This process is very similar to the tool “Axure: Interactive Wireframe Software & Mockup Tool”, if you are familiar with it. The only disadvantage with Axure is you are not able to take the “HTML” pages that Axure creates directly into your project, where as in when we used this approach we already had HTML pages ready to be used directly in our project. Just as an additional note, it would be a good idea to use some SEO tools to help you with any markups or Rich snippet. As you already have some HTML example pages defined.
By first defining the basic flow with just HTML links – we were able to examine each flow and refine and correct it if need be without putting a lot of work on the back end. This was a great way of eliminating a lot backend changes for simple design tweaks. And it also gave us a way to make sure that the offshore team and us were on the same page as far as the basic flows were concerned. Very important when you are working with the offshore team.
Once we had refined the basic flow – the development phase milestone 2 work began. The milestone 2 was defined at putting the backend for those flows. But we wanted to work through one flow at a time. For example in our Toysshare project there are 5 main flows,
- Sing up/Login/Logout
- Listing Toys for Sale/Swap
- Searching for Toys
- Contacting the Sharer
- Admin Panel
Again as each flow was put in place one milestone was achieved and we tested each flow individually as they were put in place – this eliminated any refinements still needed in each individual flows without affecting the others.
And as the last milestone we put all the flows together and tested the whole project making sure that all those flows interact with each other the way it was expected. At this point after any fixes you should do regression testing to make sure the fix does not introduce any new bugs or while merging the files some old bugs don’t come back. – This is where we had to develop our own bug tracking system to make sure we are on top of each bug and we are doing regression testing at each level.
Also here is when all the mobile devices come into play. We wanted our site to be responsive – meaning now the testing had to be done on Windows PC, MAC , IOS, Android and Windows Phone. It helped a lot on how we had designed the milestones and testing setup – as most of the corrections and refinements were done way ahead of this final testing phase. In the next post we will go over Testing, Bug tracking and Beta launch in more detail.