Product and Feature Updates about Kinja
Product and Feature Updates about Kinja

The Root 100 & Beyond: Building Interactives At Kinja

Hello! We are the Interactive Team. Nice to meet you. Our team is tasked with elevating visual storytelling, providing a better reading experience and responding to an ever changing landscape of online content (amongst other highfalutin endeavors). These challenges encompass not only feature length editorial, but also our studio team and sometimes a full-blown custom vertical.

Collaboration Is Key

To say building an interactive feature is a team effort is an understatement. Designers, developers, writers, editors, analytics, social, and business partnerships all collaborated to bring our first project, The Root 100, to life.

Screengrab - Root 100 Honoree
Screengrab - Root 100 Honoree

The Root 100 is an annual list of the most influential African Americans, ages 25 to 45 curated by the editorial staff of The Root. This year’s list (the first to be developed natively on our platform) was the result of several months of work across three cities and two countries. We followed a pipeline from wire-frames to fully developed code all the while refining and revising our work as the feature took shape.

There are several stakeholders involved in an interactive project so being receptive and open to feedback is key to our success. We spent many hours collaborating as team Kinja but made sure to frequently share our work with The Root’s editorial stakeholders. Their feedback helped us know that we were executing their vision while making good on our own expectations.

Under The Hood

The guiding principle of all of our interactive features is to establish a clear user flow. This means that navigation must be intuitive and that a new reader can visit any of our features with no prior knowledge of how Kinja operates.

We wanted The Root 100 to be attractive, useable and elegant so our designer came up with a color palette of sectors representing each honoree. We then used that palette to bridge the menu and list entries creating a colorful visual connection for the reader.

Screengrab - A flyout menu with active sector filter
Screengrab - A flyout menu with active sector filter

We also needed to strike a balance between a splashy desktop presentation and the reality that a lot of our traffic will be on mobile devices. We always want to follow a mobile first approach to development and design while building these interactive features. The intuitive user flow must be apparent on both mobile and desktop platforms.

The flyout menu is an essential element of intuitive navigation. Not only does it provide filter options by sector, allowing users to group individuals, but it also provides a convenient way to visit an individual entry. Navigating 100 entries is no small task and we feel the menu options make the list useable and enjoyable.

Our developers built the entire feature using a combination of React and JSX. There’s not a single drop of html in the code. Our team wanted the challenge of seeing how efficiently we could build and maintain a single page app using modern tooling. React has robust support and ample documentation so it seemed an obvious choice for the Root 100 list. The verdict is out on how much we would adopt React for feature builds but it was a blast to get familiar with the code. We are also building some forward thinking components using React across our network. Stay tuned to this blog for more on that.

And Beyond...

We are excited that our work is laying a foundation for our established and growing network of sites.

In fact, the new layout of the story you are reading was recently launched by our team and will be receiving many more exciting updates in the months to come. Bye for now!

Senior Product Manager

Share This Story

Get our newsletter