Imagine a world where residual biomass and by-products are cleverly converted into a valuable carbon neutral solid biofuel – the Bioagro pellets. Well, in the heat of discussions about carbon footprint and biofuels in general, there is one innovation based company in Sweden providing these sustainable conversion technologies.

OUR TASK: Make it easier to update

The Bioagro project initially started out as part of EU Life initiative. Ecoera company had a project site which had to be converted to work on a more manageable platform. At the time, the www.bioagrolife.com project overview site didn’t have any CMS system behind it. We were asked to simplify the content update process and to create a more modern feel before the project will be commercialized.

In Cannedapps we work iteratively. We have noticed that it is more efficient to show each significant step to our clients before proceeding to the next. Here is rough outline of the process for Bioagroenergy.com redesign:

01 Old site audit

Before going to work on the new version of Bioagroenergy.com we took a closer look at what they already had and what the main problems were with current site. Firstly, it contained too much, too small text. Secondly, it was very difficult to update. We figured that Sandals would fit right into place here.

04 Scenarios of use >> Scenarios of use in the future

At present the main purpose of the site is to give information about the technology and a brief overview about the project. Soon, however, it will act as a sales gateway for Bioagro pellets. In the next larger iteration there might be a web application developed for that purpose.

06 Wireframes

First ideas usually appear on napkins, inside notebooks or just on casual printing papers. I usually have several A3 papers in front of me all the time.

When the main concept has had some time to consolidate, it’s usually a good time to turn to more advanced wireframing applications. Cannedapps likes to use Hotgloo for digital wireframes.

07 Graphic mockups The client requested that the European Union-like blue and yellow colors would remain dominant. Graphic mockups are realistic images of a user interface (web page). They are refinements of the previously made conceptual user interface. Graphic mockups do not function, they are merely static screen drawings, looking like the real thing. You guessed it, it was now time to open Photoshop.

08 Model development and implementation After the graphic mockups were approved, we started building the real thing. That, of course, means cutting mockups to pieces and sewing together again with the help of HTML and CSS (HAML http://haml-lang.com/ and SASS http://sass-lang.com/ to be more precise). To fill the updating criteria, we suited our preferred content management system – Sandals, to work with Bioagroenergy.com.

09 Launch Bioagroenergy.com has been live already since December, 2009. More content is on the way from the client who now uses Sandals to make fast updates and publish news.

Loading mentions Retweet