Annual report....in web version
Cifor is a non-profit, scientific facility that conducts research on the most pressing challenges of forest and landscapes management around the world. Headquartered in Bogor-Indonesia, they needed annual report in digital format to inform Cifor’s work during 2013 to more than 100 partners over 30 countries.
The main challenge was to crunch many data and fit them all in a microsite without sacrificing any detail. User experience was also the main focus here, how to display scientific report in a pleasant and comprehensible way.
UI, UX, Art Direction
Above the fold landing page
We decided to split the content into several project case. Each project case is colour coded within one row, with left and right column to display project title, imagery and its brief information. User will be brought to detail page if they’re interested to find out more about that specific project.
How below the fold row look like:
Wait...Do I have to scroll that long on mobile?
What is shown above are only examples of 3 project case. The actual landing page is super long, varied with research highlights, global issues, project cases, Cifor organization profile, research methodology, and even financial statements – in total there are 12 rows of content.
This long landing page could be an issue on mobile view, scrolling vertically 12 rows times 2 (for left and right column) seems tedious. So we came up with solution to have horizontal scrolling on each row container, here is how it works:
1. Project case’s main image
2. Swipe to the left, users will be presented with its brief information
3. Swipe to the left once more, users are presented with specific options for them to look for specific information
Moreover, once you tap into project detail page, it is divided into left and right column. One represented image will float on left while all content information is scrollable on the right.
The content are diverse in images, text, graph, data table, number chart, and video – each is segmented with varied background saturation within the same colour tonal. This way, user may create contextual grouping in their mind to digest informations bit by bit.