Freelance UX Design, E-Strategy, Templating

Nyrstar - Annual report 2012

A collection of stories next to the usual facts & figures

Project outline

  • Annual report concept

    An annual report optimized for tablets & desktops with a download basket for PDF's & Excel files.


  • How we achieved it

    Preperation took 3 weeks with 3 persons and we finalized it in 2 weeks with a small team of 5.

    Finished in 5 weeks with 5 man


How we achieved this in such a short time

After receiving the first final content we only had 3 weeks of putting it all together before deadline, while receiving corrections.
With a small 5-man team for production, the few weeks of preparation with 3 persons were crucial.

  • setting up the CMS, and the basic structure, preparing the table mapper, and basic templates
  • making design drafts, implementing them into our templates with CSS, creating different options & styling configurations for each template
  • making basic selections of photos we could use

Once the content arrived, we had 2 extra persons to fill in the content. In the meantime we:

  • set up the final structure, pages & content blocks and fine-tuned these so our content staff could fill them in
  • created new templates & styling, fine-tuned existing templates, made the website responsive
  • filled in the photos, created the infographics
  • prepared the pages for translation
  • optimized all the pages for equal column heights

A flexible header concept

We created a flexible header concept for the 2012 review & stories section that could include multiple elements:

  • main photo with optional a caption + control over the styling & location
  • clipart with infographics
  • navigation elements layered on top
    • related pages (right top) that linked to related facts & figures pages
    • inpage navigation (left bottom)

Frequent use of infographics

We received a lot of infographics from Nyrstar, which we improved, translated and prepared to be used on the website.

  • used in some page headers
  • full summary pages with only infographics to communicate key figures
  • reuse of infographics in the content to highlight certain key numbers


The in-house Comfi CMS which we built specifically for these projects, has a built-in cropper tool to easily crop photos from the image gallery in the correct dimensions.

Different caption styles

I created multiple class switchers in the image templates to place one or more captions above, under and on the photos.

Captions on the photos provided more fine-tuning options like the location & color for maximum contrast.

Multiple photo compositions

I created +10 photo composition templates that allowed us to maximize the use of photos on a small space.

Templates could be switched with 2 few clicks to try out new compositions. Each template had its own options to manipulate the height, and communicated that with the used grid space (width) to our cropping tool.

Template options for text styling

I created different text templates each with their own semantic HTML and styling. We also created a note connection into the WYSIWYG editor, to attach (reused) notes in the content.

Titles in the template have extra styling options that change title size without changing semantics. When nesting the title templates the HTML adapts (eg. H3 becomes H4).

Emphasizing the responsible manager

I created a custom template for the manager's review quote. We placed them at the bottom of the pages related to his achievements.

A few custom templates

For a few important communication points I created custom semantic templates.

Multiple table styles

It's easy to add styles to the WYSIWYG table mapper. The tool assigns CSS classes to the selected cells, rows & columns. I could reuse and tweak the default ones, and added a few custom styles for Nyrstar.

Project information

  • Client: Nyrstar
  • Agency: Comfi