Works > Web Development

SNU Card NewsBot

SNU Card NewsBot is a automated slide news service for the 7th local election of South Korea. Slide news (or card news) is a pervasive snack news format in South Korea due to its convenience and low amount of data usage. Users can swipe news slides horizontally to read more news. However, generating quality slide news is challenging because it demands another way of involving visualization, verbal messages, layout design, and storytelling at once. Thus, my team applied robot journalism technology to automate this process. In addition, this automation process was also personalized, which was wonderfully done by the text-generation team. Because people have different concerns about local elections, automated personlization was an appropriate choice to cope with those diverse needs of users.

In this project, my main job was to render news slides from raw JSON source. To do this, I first organized API output format to effectively communicate with the back-end and data management team. Then, I implemented a front-end API to render news slides from data in the API format. In addition, another mission was to design and implement a webstie to reach to general audience. In this case, I applied a card UI for two reasons. First, higher fluidity of the elements was needed because the end-product (a web app) should be available on desktops and smartphones. Second, there was demanded a user interface that was appropriate for both lists of news articles and contorl panels for personalization.

Period Jan 2017 - May 2017

My Role Front-end Developer and Designer

Director Prof. Joonhwan Lee and Prof. Bongwon Suh

Back-end Developer Joonseok Kim, Sion Baek, and Jinho Seo

Database Management Gibeom Park and Jinhan Choi

Text Generation Sanghyuk Lee (chief), Youjin Hwang, Seongmin Park, Younah Ahn, and Woobin Choi

This project was granted by IITP (Institute for Information and Communications Technology Promotion)

Demo Video

Video made by me with Keynote.

Card Rendering API

To make the system reusable and reduce the back-end process time, card rendering had to be done on the front-end side. Thus, I designed various layouts based on previous slide news works and obtained a reusable and extendible data format that works for various slide formats. Major types of information elements were text, image, graph visualization, comparison data, and map visualization. To make the API generalizable, I let various methods able to be joined to the core generating method. For example, the core method sets position and size, and then each corresponding method generates the content. I also utilized vue.js as a front-end framework.

API I/O Structure

To fully utilize the card rendering API, it was key to set an API I/O structure. I requested the data management team to provide card layout type (e.g. map+text, vis+text, text, image, cover, and closing) and information element types (i.e. text, image, vis) for each slide. Then, I matched those types to the card rendering API language.

Card UI

Main Page





News Slide Viewer (using slick.js)





Personalization Setting Page





Archive

Fluidity lied on the core of the app design in order to deal with various device types. For example, the confirm button could be placed on top because the space is large and the button was highly accessible at that position. However, it should be at the bottom of the page on its mobile version to lead users to discover various personalization features. Another concern was to provide various elements (articles, control panels, and alert messages) in a consistent format. The card UI was also effective because many of the control panels had to be foldable.

Concept Art

The contents of news slides were highly political, so using image was not very easy. Thus, I created various illustrations in order to vividly provide news contents.