Caloom 2015 – Helsingin Sanomat WX-widget scenario with FramerJS and Sketch

Making an interactive scenario with Framer Studio and Sketch app

This image above (Featured Image) is the only example I could find from a scenario I envisioned back in 2015 for Helsingin Sanomat. In this article I rework this image in Sketch.app and make it interactive with Framer Studio. Both applications are new to me. As usual I publish a start of a longer post and keep adding to it till it’s ready or I think it is ready.

MVP sketch

Let’s first look at an MVP, which was implemented by the fabulous Nick in a very short time. This MVP shows the admin side of things.

pdf version

A generic outline of an online newspaper or blog. We focus on the part inside the screen (rectangle). What we want to help the user with is understanding how this article relates to other articles and not in general terms or based on sentiment classifications or human-added categories. Caloom analyses the text and looks at all the appearances of “what” and “when” and “where” and “who” and “worth”. This is then compared against findings inside the Caloom networks.We have a widget that is easy to incorporate and style. The user clicks on the widget and gets some basic data about the frequency of links or relations this article has with other articles within the network.

The customer, the news site for example, can specify is articles are linked to outside the domain or not. The content owner can also say if the articles analyzed content can be shared and used by for example competing or partner organizations.

The original article is not shared, only arrays (lists) of words. No sensible story can be derived from these arrays alone.The WX widget opened. This opened widget can show some in the face information about the relationships this article has with other articles. It is not the intention to give statistical data on the frequency of “what” in this article. Hardly any one really cares.

WX is the abbreviation for What+When+… which gets cumbersome to spell out each time.

The WX widget opening, step 1
First the main WX blocks are presentedThe WX widget opening, step 2
Now the WX data animates. At this stage we could introduce also more details on the kind of relationships as indicated in the other sketches.