10 Steps Online Development Process

A pragmatic approach to develop an online product with the Modular Pattern System (MPS) as underlying method.

by Pat Bloom - Version 1.1 / 10-03-2019


The first phase (after doing your research on, for example the target visitors and most popular pages) is to map the pages and create an overview of the User (Experience) Flow and after that the Wireframes should be made.

This can be done in various ways – with various tools, and as this is still a new area – feel free to set to your own hand in way that’s comfortable for you and efficient to create and re-use what’s been made.


The next phase of the process is designing the elements, Pieces and Pages (better known as mockups) – which needed to be shown to the client and developers what the look & feel is going to be like. Tho I only talk about 3 step this phase got – according to the MPS approach – 6 steps (or better say patterns) grouped in this 3 steps. Check the ‘Design Process’ for more details about this.

The 3 steps of this phase will force the designer to do proper research, dive into the brand guide and get the necessary assets from the client e.g. a vector logo and (stock) images. It’s advisable to document and covert these assets to a format which can be used later on by the developers.


Just as the Design phase this part also consist of 3 steps (made of 6 patterns – see “MVC Model” for details). The Develop phase includes the all facets of the actual development of the product with MVC as underlying concept.

This forces us to approach the process pragmatic – be aware of each part of the process and keep the overview, rather then ‘just installing stuff’ and start ‘building’.


Yeah! (make sure to have them champagne bottles ready) the project has been reviewed and is ready to be launched. (But don’t open the bottles – yet). In this stage it’s the moment to get the team together and ready on stand-by to be alert on issue that might show up when pushing the project to the live environment.

Get your website (SEO) checklist ready and test every single event to make sure it meets the standard that have been set. Run your ‘live check list’ (if you don’t have one – make one!) and check the SEO, IP-blocks and robots.txt to make sure search-engine spiders and Google can index the website properly.

Anyone experienced in developing online projects knows there can (will be) be issues small or big that needs to be fixed on the fly varying from front-end glitches to mayor back-end (domain or server) related issues. Key is get a complete overview of what needs to be done and spread the issues over minimal amount of people – most likely those who worked the most on the code, or those experienced enough – they know where to look

 If there are no (high prio) issues – good job. Open up them bubbles!

Plain Text Version
Social Share Buttons and Icons powered by Ultimatelysocial