Newspaper Published by Qconcursos

1.

Setting

In 2022, Qconcursos, a comprehensive test-prep program for civil service exams, acquired Folha Dirigida with the aim of transforming people’s lives through quality education.

The goal of this project was to revamp and modernize Folha’s news consumption platform and integrate it with Qconcursos’s question platform. In addition, it was necessary to unify and modify the internal system used by both organizations to publish news in accordance with the requirements of this new platform.

‍

‍

2.

Mapping requirements and tasks

Early in the project, the team held meetings and discussions with Folha’s stakeholders to better understand the scope and main objectives of the project.

Based on these discussions, we were able to define and plan the steps to be taken through epics and tasks. The two main initiatives identified were the redesign of the ADMIN tool, where the platform’s data was entered and stored, and the development of a news portal based on the structure of the Folha Dirigida website.

For the first initiative, we mapped out the requirements for each page of the current ADMIN interface, identifying what would be retained, removed, or modified. Based on these requirements, the design team created wireframes on the Miro platform with a basic structure that served as the foundation for implementing the final screens.

The same requirements mapping process was carried out for the initiative related to the news portal.

3.

Creating wireframes

The SEO team was tasked with creating mockups of the news platform that would demonstrate the most effective way to design the screen layouts from an SEO optimization perspective.

The wireframes they created were essential to the project’s development, as they allowed us to visualize the structure and layout of the screens clearly and objectively. This made it possible to make the necessary adjustments before moving on to the high-fidelity mockups.

‍

4.

Defining the components

In this project, we used a UI kit called Untitled UI as the basis for the interface components. However, we made several modifications to the design tokens to ensure that the final result was aligned with Folha’s brand visual language. To ensure that the implementation of the components was more efficient and consistent, we created detailed documentation for the developers. It contained information about each component, including its functionality, behavior, states, and appearance.

‍

‍

5.

Final screens

With the design components and tokens defined, we began building the final screens in Figma, in accordance with the mapped requirements and wireframes. All screens and navigation flows were designed and detailed to be responsive.

Throughout this process, there was constant communication with the developers, during which we on the design team tested and validated every screen, element, and spacing in the interface so that the necessary changes could be implemented in the code.

‍

6.

Results

The platform was successfully launched, generating strong traffic figures in its first few weeks and receiving a positive response from Folha Dirigida readers. Certain features and interface elements have already been mapped out for a future V2 and are on the team’s backlog.

‍

‍

7.

Teachings

I learned a lot from this project, especially in areas outside of design, such as SEO and business. It was a great experience working with a UI kit, which allowed us to be very agile in creating the interface.