Works > Web Development

SNU FactCheck

SNU FactCheck is a fact-checking portal where general people request an issue to be fact-checked and professional journalists fact-check it. This service is the first service in Korea that collects factcheck contents from various sources. At first, it started with 7 media outlets, but now there are 27, including the top 3 broadcasting companies (KBS, MBC, and SBS) and the top 2 newspaper companies (Chosun and Jungang). It was our mission to provide an effective visual summary for the factcheck contents from multiple journalists, which are often likely to be too lengthy to read. Therefore, my team suggested FactMeter, a gauge-like object showing the degree of an issue's factuality. Also, my mission as a front-end developer was to implement the card UI elements responsively to fit various screen types.

Period Jan 2017 - May 2017

My Role Front-end Developer

Client SNU Institute for Communication Researchㅡ (sponsored by Naver)

Director Prof. Joonhwan Lee

Vice Director Nahi Hong

Designer Cindy Oh

Back-end Developer Jinsu Eun

Link (The most part of the design has been changed as its business area expands, but the FactMeter remains as its original version.)


The idea of FactMeter was proposed by the director, and the designer developed this into realizable one. My job was to make this able to effectively represent the outcome of factcheck (the degree of uncertainty to which a given topic is fact). Basically, the needle of a FactMeter moves along with the issue's fact-score (1-5). An easier way might be to provide a static FactMeter with the mean of the fact-score. However, the fact-score cannot be pooled because an average score easily ignore how much the factuality of an issue varies. Thus, the needle should represent the distribution of the outcomes, which we chose to animate the outcomes.

There was a trade-off: a short period of time enough to present most of the outcomes vs. a long perioud time enough to recognize (at least glimpse) each outcome. This debate might be common issue when the movement (speed and direction) of an element is actually one of visual variables of a visualization. In order to obtain an appropriate speed of the needle's movement, we tested several spped options with groups of people, and applied the most agreed option to the final system.

Variation of Card UI

A card user interface is highly applicable to a system presenting a list of many information objects because it flexibly demarcates each piece of information. Since the service was targeted to general audience, the cards should appear responsively to the screen sizes. It was my job to match the hiearchy of layout and information objects, which I managed by precise/dynamic CSS posititioning.

Custom Grid System

A grid system is pervasive for responsive design, and 12-equal-width grid system is conventional. However, the existing Bootstrap and Materialize are often hard to cusomize, while our service required a more flexible grid system. So, I implemented a custom grid system that fit to our card design.