Card Suggestion Engine

Overview

Wouldn’t it be nice if there’s a recommendation engine that suggests a card template based on the context of the given content? That’s exactly what the Content is driven Card Suggestion Engine does by enabling the collaboration of content creators and UI authors by making card templates discoverable, sharable, and reusable with minimal effort. The core of the solution is a multi-model directed knowledge graph built with the details from the card templates and the content JSONs received by the suggestion engine. When the UI author uploads the template from the studio, the suggestion engine parses the key information like attributes and context of the template and populates the graph with the context of the card and the template content as vertices and the attributes as edges connecting the context and the template. When the content creator submits the API response, the suggestion engine queries the graph and recommends the matched UI templates based on the template score matching UI and functional attributes.

Challenge

Micro UI/Card-based designs have become inevitable for modern user interface development. But in the real-world scenario, there are a few gaps in optimizing the card-based UI to make the development quicker and more flexible. Following are a few of those gaps that need to be filled.

• Content creators, who are data providers, product owners, or API developers (not visual designers), need to learn how to design a Card to visualize the content.

• UI authors, who are user interface designers, had to rewrite almost similar kinds of Micro UI/Cards to similar kinds of data repeatedly.

• Front-end Application developers need to code from scratch to parse the content and bind it to the Card for every new card they want to display.

Solution

Wouldn’t it be nice if there’s a recommendation engine that suggests a card template based on the context of the given content? That’s exactly what the Content is driven Card Suggestion Engine does by enabling the collaboration of content creators and UI authors by making card templates discoverable, sharable, and reusable with minimal effort. The core of the solution is a multi-model directed knowledge graph built with the details from the card templates and the content JSONs received by the suggestion engine. When the UI author uploads the template from the studio, the suggestion engine parses the key information like attributes and context of the template and populates the graph with the context of the card and the template content as vertices and the attributes as edges connecting the context and the template. When the content creator submits the API response, the suggestion engine queries the graph and recommends the matched UI templates based on the template score matching UI and functional attributes.

Outcome

This solution increases productivity drastically for the content creator, front-end application developer, and UI author. The content creator can get a wide range of appropriate suggestions for their content.The UI author need not create a similar design for multiple contents. The front-end application developer can avoid the effort of parsing the content and associating the values in the UI. They can call a simple binding API to populate the card with the content.