Responses by TRY Apt.
Background: Statskog is a Norwegian state-owned enterprise responsible for the management of state-owned forests and mountain real estate totaling approximately 20 percent of the country’s area. Established several years ago, its initiative Statskogmillionen annually provides funding towards various projects around the country. Statskog wanted to make information available about the funds already released. With this, we wanted to create a transparent communication and motivate more people and organizations to apply. We also wanted to show what the funds were used for as well as create a platform where the recipients could share their projects with others.
Design core: The inspiration for the visuals comes from old-fashioned map presentations and topography. At the same time, we wanted to create a mood that honored the visual theme of outdoor activities and nature. The simplistic design and monochromatic color palette is an extension of this. Each project has its own case study page with the opportunity to share photos. For the projects that have not yet provided photos, we created a set of ink illustrations inspired by botanical and biological drawings. Then we updated them for contemporary times with animations.
There is a strategic thought process behind the animations and design choices on Statskogmillionen that you should get when first entering the website, where an animation of roots grow into a small sphere—a project that symbolizes growth and contributes to experiences and an appreciation of nature.
Challenges: One challenge we faced was that we weren’t able to style Google Maps or OSM to our liking. We created our own graphics, which meant that we had to convert the coordinates for the grants to a percentage value on our map image. Another challenge was to make sure that the map stayed performant and responsive as more grants are added in the future. We tried to do it with regular HTML elements but quickly realized that it wasn't going to work. In the end, we decided that by using WebGL to render the map and dots, we could control the user experience in a better way.
New lessons: WebGL still demands quite a lot from ordinary computers such as those used by state-owned enterprises. We spent some time trying to optimize the experience across all platforms, both new and old. In the end, we were quite happy with the result, but we’ve learned that we should have spent more time at the beginning of the project explaining the pros and cons of the technology being used to achieve the project’s vision.
Navigation structure: We offer two different ways of viewing fund recipients. One is an explorative mode that visually shows the recipients on a map, highlighting the diversity and number of funds being granted. Alternatively, the user can use the list mode or search to find specific recipients. We thought that there should be a way to quickly find the projects as well, so we made the alternative list view as well as a simplified search tool.
Technology: The site is powered by Craft CMS using a React front end to handle navigation and the user interface. For the main visual—the stylized map—we used three.js to render the graphics and map markers. We decided on using WebGL for a couple of reasons: we wanted to incorporate particle effects into the intro animation, and we didn’t want to worry about the performance impact of an ever-growing amount of markers.