Freelance UX Design, E-Strategy, Templating

Janssen - Report to the community 2013

The first report with the our brand-new Contend CMS

Janssen asked us to do the website part of their second CSR report. This would be a nice way to showcase our new CMS, so we took the challenge.

An agency provided the moodboards, the Janssen communication team the articles, and we created a good looking website in just 216 hours (templating, webdesign, programming, project management & content input + page optimizations of the 3 languages).

Project outline

  • CSR report concept

    A report structured in 3 main categories, collecting diverse stories about social, economic & ecological sustainability initiatives. 


  • How we achieved it

    We improved the structure of the previous report. Our biggest challenge was optimizing all the pages in a short amount of time

    Multiple adaptable elements


Adaptable elements to create a detailed report in a short period

We didn't need a lot of preparation for this project. We copied the structure of the previous report, and improved it based upon Janssen's feedback.

Our own CMS, built upon IA foundations, works with a structure that extends into all the page elements: an in-page element can become page or a section and vice versa. In-page blocks can hold more in-page blocks and all nesting is controlled by rules. Changing orders and positioning elements on other pages etc... is a piece of cake.

While waiting on the content & design, we already created the first templates in HTML5 & CSS, ready to be fine-tuned later.

The communication agency delivered us a general look & feel (mood board) of the website, which we used as a guideline to start the design of the website in CSS, improving template by template. Gradually we received final content which we put directly in the CMS and we could start fine-tuning the styles further, place photos and optimize the pages.

Responsive breakpoints are built in, so we could easily check tablet & website versions during the creation process. By using a combination of adaptable templates and a built-in grid system, we could quickly and easily optimize pages with minimal feedback from the client.

Multiple text styles

We made 5 different text templates with each their different semantic meaning & styles and 2 additional templates (PDF file & automatic in-page navigation). The HTML5 contenteditable editor and live previews of template switches (before saving) made it very easy to detail the content of all the pages. Most templates allowed nesting, so we could maximize the usage of our grid system.

Multiple photo & image styles

We received hundreds of photos, sorted them by topic in folders and uploaded them to our built-in image gallery. When the text on a page was ready we chose related photos for each article (the header image was chosen by the communication agency). 

With the built-in image gallery and the grid-aware configurable cropping tool, it was easy to fine-tune and place our selections in the articles. Our photo template has multiple options for placing and styling captions.

Infographics & charts

Janssen briefed the infographics, we made small improvements where possible and hired Peter Eeckelaert to design them.

The charts are interactive and controlled with Excel sheets (easy updates & translations).

Our built-in note system allowed us to put notes on both the infographics and charts.

Detailed tables driven by Excel sheets

Our built-in table-styler allowed us to select an Excel file and design the table with a WYSIWYG interface on cell, row & column level. The table-styler saved all the styling rules in a hidden sheet, and prepared a translation sheet in the Excel fle.

The CMS translates the numbers automatically and the text based upon matching cells in the translation sheet.

Project information