Why Odoo as Prototype tool?
A few months ago, we posted a tutorial about our responsive workflow in Odoo, although the post describes a general website process. Truth be told, every project has its own requirements and complexity. With new necessities, we had to look for new solutions.
Our older way was using the great tool of Webflow, that allowed us to create layout with drag and drop only. The issue here was, that the more complex the project got, the harder was to make it work. We need our prototypes to be flexible and dynamic enough, we work together with the stakeholders on the prototype to define features.
We thought of different possibilities, we needed a middle step between mockups and the development in odoo.
We decided to try with Odoo. You might ask what is the difference between the prototype and the actual project if they are both coded in Odoo? We try to keep as simple as possible, we build it as if we would do it in webflow or other prototyping tool. The difference is that the functionality is there. We start building our project style theme and we create only layout. If necessary, we use static demo-data. In this way, we can handle the versioning of the features (we use Git as well for the prototype) and the step to development is not as big as photoshop screens or even webflow.
Defining the idea
We believe that old school tools are irreplaceable. Collages and hand-mockups are still the first thing we do when starting a new project or a new feature. We first have a planning meeting where we decide main features, iterations and requirements. We then have one or two meetings, depending on the complexity, with collage and hand-drawn ideas. Once we have everything covered, we then move to digital.
Hands on Prototype
With a defined idea of what our goal is, we start creating a coded prototype. In this step we make a tangible beginning after all the planning and scribbling. It is something that we can use, show to stakeholders.
It is important to keep the prototype organized and apart from the project. The prototype and the project should never be merged together. We defined a flow to check how to handle new features or even new “subprojects”.
Using prints for reviews
We brought back this old methodology of putting all papers over on the wall, have a real overview of the prototype. The difference of having all views within eyes reach and a small screen is incredible. We build up the process of click, send email, click on email, go back to website, etc… we displayed it all on the wall.
We find this also useful because it saves a lot of time, one only on what is needed, what stand on the wall. It is much more faster to just make a list of the problems and improvements, since they are clear for the eye. In other cases, we might tend to try fixing it if we are in front of the tool we use to build: it is time consuming. In this way we focus on finding improvements and issues, writing them done and create the appropriate tasks, plannings, decisions.
Prototype into project
The biggest benefit of this workflow is definitely the translation of prototype into the project website. We have a strict structure for the prototype: we add a “pr_” (for prototype) before every addon and template we create. This will keep the separation and inheritance clean.
For every addon we would create for the project, we do the same in the prototype and its internal division. For templates, we create one per xml file and use one as base. This will simplify the process in case we need to update it later.
Since we have already our same addons structure, we have our static folder with all images, less, and js files. We can basically copy paste out static folder and then start working with our templates, removing the static for the dynamic, creating a functional site. We save so much time in this step compared to prototyping in external tools (like the one we used to use Weblow).
Deployment should be thought previously. It is still a prototype so the point of it is having it always online and accesible. That will require a well thought deployment.