The Rival || Building Custom Swipe & Edit Functionalities

Brllnt
3 min readJul 11, 2016

--

By Greg Parker

The Rival, a college news network run and read by students, launches their brand-new platform today. We custom-built lots of the site’s functionality to help set it apart from traditional school publications. The Rival is young and fresh, uncensored and in tune with its generation, so we wanted the platform for creating and consuming this content to be intuitive and innovative as well. We accomplished this by creating a design with enhanced mobile functionality usually only found in native applications and building a custom article composer tailored to the specific needs of writers and editors.

Enhanced Mobile Functionality

Since most college students are on their phones pretty much all day long, it was crucial that we build a mobile experience that was not only easy to use, but also fun and engaging. The website obviously had to be responsive and work on all screen sizes, but our goal for mobile devices was for it to look and feel like a native application. It had to be fast, utilize the full screen, and incorporate touch gestures that users are familiar with. We’ve seen several apps use the Tinder-like swiping feature for accept/reject functionality, although not in the editorial space, yet. Instead of using left-right for a user to decide, right then, if they want to read the article or not, we applied this to article browsing for “keeping” or “nexting” articles. Since mobile users are usually on the go, they might not have the time to read an article but would like to save it for later. This also provides helpful user data about what is most interesting to each reader.

Writing Articles

Since The Rival is a news network, it’s all about the content. Being able to create fresh and engaging articles quickly is paramount to its success. Rival writers needed to be able to compose an article, complete with embeddable images and polls, and their editors needed the ability to make revisions and leave comments for the author to revise before it is published.

When the guys at The Rival came to us, they made it very clear that one of their biggest issues was taking an article from rough draft through the editing process to publication on the site. As it was, the process consisted of back and forth emails between the author and the editor, so we knew we could figure out a way to keep everything within the application to eliminate the need for emails and Google Docs.

So we built them a custom composer/editor panel. Here’s how it works:

  • Writers can write their articles directly in the Rival article composer, and it autosaves their work just like in Google Docs.
  • When the author is ready, they can send it to an editor to review.
  • The editor then has the option to leave notes and send it back to author or, if no edits are required, schedule a time for the article to be published.

By building on top of the Draft JS rich text editor framework from the team over at Facebook, we were able to attach our custom functionality, like an image editor and embedded polls, on top of a composer with word processing capabilities. What that means is that you get multimedia content for your articles all in one place.

Brllnt Bottom Line

Building The Rival was all about prioritizing students’ experiences, whether as readers or as writers. By incorporating Tinder-like swipe functionality and taking the editorial process out of writers’ and editors’ inboxes, The Rival becomes a streamlined news experience for consumers and creators.

The Rival is the largest and most complex project I have ever worked on in my career. We’ve got plenty more cool things to show you about how the site works, so stay tuned.

--

--