Online-first Financial Publishing Suite - Case Study



The challenge

With the emerging of the digital age, the need for print material became redundant, needless to mention the time and costs involved in the making of well-designed annual integrated reports.

JSE Listed companies became more reluctant to spend more due to the difficult economic situation that South Africa is going through, and many prefer not to opt for a print version at all.

A new publishing solution has to be conceived to accommodate the new needs of the market.

The solution

Create a digital-centric process for integrated reporting with PDF output (print).

My role

My role consisted of the following:

  • Finding better reporting solutions for our clients
  • Market and technology research
  • Design the digital process and create an optimal workflow
  • UI/UX design and prototyping
  • Web application development and integration
  • Team leadership

The old process

The usual process of creating an annual integrated report consists of a tiresome workflow in which the client and the agency work together to collect all the necessary financial data for the year ending.

The agency handles the writing and the design of the annual report for the next few months, the annual report is then finalised and sent to printers.

During the last few weeks of the process, the website, which is an online version of the annual report, is designed and built.

The website is pushed live on the same date on which the printed annual report is sent to investors.

The old timeline

The new process

The new approach would be to shift focus towards the digital side, this means that the publishing would be done on the website as a starting point.

The website had to be geared up with a tool to generate high fidelity custom PDF reports from HTML pages.

In addition to the digital report, an abridged printed report would be an option to consider for those who want to opt for it.

The enhanced timeline

The functionality

The functionality had to be integrated into the online annual report (website) in 2 parts:

  1. a button on each page allowing the user to add (tag) that page to the PDF converting queue.
  2. a user interface (main view) showing all the tagged pages, allowing the user to customise the selection of the pages and generate a final PDF.

UI/UX Design

  1. "Add this page" button: the button needed to be visible at all time, on all viewports and devices, it also needed to be responsive to the status of the queue.

    Once the user adds a page by clicking on the button, the latter transforms to a "Remove this page" button, which allows the user to remove this page from the queue, if needed. After removing a page, the button shows the initial status again "Add this page". The button was extended to a button group to allow a quick link to the main view.
    Button group(Adding/removing page & link)
  2. Main view (UI): a minimalist user interface showing a select list of all published pages of the report, the pages that have been added to the queue are shown already selected and ready for PDF export.
    Main View

Web application development and integration

Since we built our online reports on Wordpress, the PDF generator application had to be integrated with Wordpress; the application's architecture is designed to work like a Wordpress plugin for code consistency and future compatibility.

The main principle of the PDF generator is based on the Browser Session and the PHP library mPDF.

When a user adds a page to the queue, the browser tags its ID from the database into an Array that is stored in the Browser session.

Each time the user adds or removes pages from the PDF generation queue, their respective IDs are added or removed from the Session Array.

Once the user is on the main view (PDF generating page), the pages IDs present in the Array are used to pull the pages' titles into a selection list, this allows the user to edit the selection again - if needed.

When the user hits the "Build my report" button, the application pulls the selected pages' content with the IDs ( HTML UTF-8 encoded), feeds the content through a templating engine, and then pipes it through mPDF to prompt a PDF download window.

Main view - PDF Generating process


The tool allowed investors to compile their own custom report from an HTML selection and output it as a PDF, which could be printed or sent.


SPAR South Africa