Structuring Components with API Data
SERIES OVERVIEW
This is part two of a three-part series describing how user research produced insights to develop new UI components; informed the design of bots that automate content publishing; and improved the search experience.
With new research areas emerging at Princeton University, the engineering school wanted a way to advertise and manage open faculty positions on its website. This post focuses on automating the publishing process and discusses the design of new UI components.
THE WRITERS
Our writers produce some of the best science stories on the web. Asking them to manually enter and duplicate content that already exists elsewhere would be a time sink for them. Instead, I decided to automate the process by using an API.
DATA ARCHITECTURE DESIGN
Before automating anything, I designed a data architecture to ensure that the bots can map the external JSON data to our internal “job content type” so that:
The search experience returned the right results for the right job hunter.
Departments and Centers concentrate in specific areas, so specific job queries should return jobs related to the appropriate department or job. This is handled by metadata.
A job post is published to a specific page based on its tag. It’s also assigned additional metadata to support the search experience.
For example, a job tagged with “MAE” would be published on the “MAE page”.
The page that lists all jobs is created and contains a filter.
USING FEEDS FOR AUTOMATION
With the data architecture in place, I customized the awesome Feeds module to manage the publishing. Specifically, the module:
Maps the JSON data to the content type
Tags it with a category and metadata
Publishes to specific pages on the site based on their tag
Unpublishes when the job has been filled
THE COMPONENTS
A new card component and two new page templates were created.
CARD COMPONENT
We wanted to emphasize the most important content and decided the card should contain a direct link to the original listing and a one sentence description.
The job card component.
THE MAIN TEMPLATE
The main jobs page aggregates all the card component. It provides a filter for users to narrow their selection.
The main template that lists all jobs.
THE JOB TEMPLATE
Although we redirect users to the original job listing, an internal page is created. This is important since users indicated they are likely to use search. The internal page contains the full job description and links to the original listing.
Next in this Series
Every industry has its own lexicon and people search for information using these terms. In this third-part, I talk about improving the search experience with “user lexicon metadata” assigned by the bots.