About:
Jarvics is the internal content management system behind the entire R7 ecosystem. This is one of the projects where I've been heavily involved since its initial stages, through benchmarking, color studies, accessibility, visual identity, and more. Since we work very closely with the editors, journalists, and technical staff who operate Jarvics, we are constantly able to refine its functionalities through deep usability tests, ensuring that the CMS supports the speed and complexity of live, large-scale news operations like those published by R7.
Working on this project from its inception meant a strong commitment. Using my prior knowledge in art direction and brand design, I was also responsible for creating the product's visual identity, even before considering a design system. Based on concepts also used by the R7 brand, a small user manual was created to guide the long journey that Jarvics would take to become the giant it is today.
Early in development, I was tasked with the creation of the entire color palette for the design system. Since dark mode was widely preferred over light screens by end users, an extensive benchmarking was initiated to understand how dark tones behave on similar products.
Through benchmarking, it was understood that most colors used in dark mode designs are always very close to black, forming a dark grayscale between them and the white highlights. The grayscale — including black and white — in digital media is formed by equal intensities of red, green, and blue; however, when used without proper analysis, it can create a very raw and unpleasant appearance. This graph was made to understand how a slight addition to the green and blue components of each grayscale shade would result in a slightly tinted color, aiming to avoid the aforementioned problem.
With this in hand, along with some initial sketches, we defined the color palette and some essential components to shape the design system.
As the CMS powering R7, Jarvics continuously evolves to support new features and communication formats required by website.
Every few months, a new tool or functionality is added to the product, increasing its complexity and generating the need to constantly revisit processes and components. This greatly increased my ability to expand projects based on existing components, even if the requirements for the new tools are completely different from what already exists.
The importance of maintaining conciseness — not only visually but also functionally — through different processes proved extremely valuable in facilitating the work of editors and technicians who use Jarvics, even more so in an environment where news and events need to be published and updated quickly.
TV Schedule
After registration, the program appears in the footer when creating a new schedule, allowing for easy drag-and-drop to assemble the week's programming. If the event has any special features, such as premiere episodes or the finale of a championship, it can be accessed directly on this screen so that special tags can be added to inform the viewer.
To facilitate the editors' work, the schedule can be copied to subsequent weeks if part of the programming is repeated, shortening the task and allowing small changes to be made to adapt the schedule for future broadcasts.
Polls
Additional settings allow the voting experience to be customized. These include enabling multiple selections or restricting users to a single submission, showing partial results before the poll ends, and choosing whether the result is displayed as total votes or a percentage. For the counting team, email addresses can be added to receive vote notifications at defined time intervals.
The poll’s end time can be scheduled, and a custom message can be set to inform viewers when the poll has concluded.
Scale and Evolution
Due to its scale and complexity, it’s impossible to fully convey the size of this project within a portfolio, much like the overview I present for R7 here. What I’ve shown represents only a small portion of the system and its ongoing evolution.
As new technologies and communication formats emerge, the product must continuously adapt to meet evolving platform needs and audience expectations. For example, at the time of creating this portfolio, Jarvics includes over 20 distinct tools, such as Championship Tables, Election Coverage Management, Real-Time Event Tracking, Livestreaming, Photo and Video Galleries, Newsletters, and more. Designing for this constant expansion has been a defining challenge throughout its evolution
