Website generator for data visualisations

Koponen+Hildén
Koponen + Hildén is one of Finland’s leading data visualisation companies. They bring data to life with graphics that impress anyone. At Koponen + Hildén information is competently transformed to insightful art. In their spare time they host a blog about data visualisation (http://informaatiomuotoilu.fi) and there is also a splendid book (https://datavizhandbook.info) available about the subject written by the founders.

1

Monorepo

2

Launched projects

Challenge

Koponen + Hildén was keen to find an alternative solution to Wordpress for publishing project based data visualisation websites. They were looking for lightweight, easy to deploy and customisable project template that would also serve as a base for their own website. Our challenge was to combine the technology and design into a truly working body.

Approach

We started with clarifying the use cases where and how the project websites would be used. This helped us to understand the key features that the client values the most. We spent a certain time discussing the aesthetics of design for building a shared vision of the brand image for the website. 

Luckily Koponen + Hildén had experience from web development, which gave us the opportunity to ditch monolithic CMS-providers and build something using a modern headless CMS. This client wasn’t afraid to get their hands a little dirty when needed and we pushed forward a solution that would take their current know-how to limits. 

Technology

For starters we had to figure out how to create a solution that would be easy to replicate, has automatic deployments and where modularity is built-in. We chose to go with monorepo architecture, where a common folder is used for reusable frontend components and styles that can be shared among different projects. 

Every new project website is created by using custom node.js script that creates a boilerplate website and sets all the necessary configurations for automatic deployments. The frontend is written in React and content is served from Prismic CMS.

Every time code is pushed to master branch in Github, a build pipeline is launched making a new deployment in Now’s cloud infrastructure. All deployments have secure TLS certificates and custom domains can be easily added.

Design and UX

As a visual starting point we got requested to take a minimalistic path. Koponen + Hildén had chosen the main brand colour and typeface, Fakt Pro, that would work as the basis for the design. We defined a design system with a warm, flat color palette with one accent color which we put to use throughout the website to communicate professionalism.

With the brand guidelines in hand; it was time to design a landing page that coupled the identity of Koponen + Hildén. We focused on simplicity with the site structure and bringing out the stylish data visualisations and graphics. As always we started with a pen and paper, followed up by rough wireframing and built up from there.

We chose to use section blocks with low-key approach to meet their aesthetic standards and let the content speak for itself.

Tools of choice
Now platform
Prismic
Node.js
Docker
Sketch
React

Our website now runs on state of the art web technologies, and is easy to modify, extend and update.

Jonatan Hildén

Co-founder, information designer

Results

At the end we launched Koponen + Hlidén’s new website with minimal and sleek brand identity that accurately transmits the company’s values. Their own website was built using the generator from start to finish. More data visualisation project websites are coming up.

Want to know more?
Joonas Uotila
Joonas Uotila

0405959162

joonas@distrikt13.fi

Related Work

Modern eCommerce platform

Interfloras service is highly valued by customers during holiday seasons. By examining peaks in load we noticed that queries increased approximately 63 times in relation to the normal load while writes needed capacity for 12 times more. More than a third of Intefloras customers want to have their greetings delivered during the same day and cutoff time for service regions differ. Customer data ownership was at a third party service provider, making sense of the data was a communicational burden rather than technological. System development had stagndated due to will of paying for it since IP's would remain at the provider and higher customer expectations created challenges for the way of doing business today.

Read more

Efficient route planning with Data

Finding an optimal route planning model for delivering goods and their related payments while simultaneously keeping the end customer, florist members and head quarters satisfied. Every party wants to save money while raising the bar on service level. Routing of orders to correct shop based on variables provided by business while making sure the same day deliveries are fulfilled consistently.

Read more