Back to projects
Product OwnershipUX/UIAI prototypingAnalytics

News portals at NVGO

Three regional news portals led end to end, from client alignment and layout to a working prototype, development coordination, analytics and newsroom training.

My role
Product Owner and UX/UI Designer
Period
2024 – present
Client
NVGO clients
News portals at NVGO

Context and problem

NVGO builds news portals for media outlets, with a Next.js front end and Directus as the content management system. Each client has a different newsroom, audience and revenue model, but they all need the same things: publish fast, be easy to read and have room for advertisers.

Three portals show this work well:

  • Sociedade ON and De Olho na Cidade already had WordPress sites and migrated to NVGO's platform.
  • Portal Esfera was a brand-new project.

I did not build the first version of these portals at NVGO. I am the author of the current version of all three.

My role

I work practically end to end:

  • leading the project with the client, from initial alignment to delivery;
  • 100% of the layout and interface decisions;
  • a working Next.js prototype, built with AI assistance, to validate features with the client;
  • coordinating development and managing delivery deadlines together with the development team;
  • setting up Google Analytics 4, Search Console and Google Ad Manager;
  • training the journalists on the CMS;
  • coordinating ongoing support for the clients.

How each portal is defined

Every portal starts with the same questions, in this order:

  1. Style: a traditional structure, with featured and per-category sections, or a blog style?
  2. Publishing volume: how many stories does the newsroom publish per day? That defines how many story slots there are and which categories appear on the home page.
  3. Audience: who reads the portal and what they expect to find.
  4. Ads: how many slots the client's revenue model needs and where they fit without getting in the way of reading.
  5. Mobile: phones are the main access channel, so the layout is designed for them first.

Key decisions

Decision

How do you validate the portal with the client before development?

Options considered

  • Static screens and a specification document.
  • A working Next.js prototype that can be browsed like the final site.

Criteria

With static screens, the client has to imagine how the site will work, and many changes only show up after development starts. Browsing a real site brings those decisions forward.

Choice

I built the first versions of the front end in Next.js with AI assistance and validated the features directly with the client. Once the scope was locked, I handed the code base to the front-end developers for CMS integration and code review.

Trade-off

As a PO, I spend more time building, and the prototype code has to be reviewed by developers before going to production. In return, rework drops and technical decisions happen earlier, which shortens delivery time.

Decision

Traditional structure or blog style?

Options considered

  • Traditional structure: featured headlines and one section per category (Politics, Bahia, Sports...).
  • Blog style: a continuous stream of stories, with more emphasis on the text and on columnists.

Criteria

The style is agreed with the client, but the decision depends on the newsroom's publishing volume. Per-category sections only work if there are enough stories to keep them fresh. A stale section makes the portal look abandoned.

Choice

Sociedade ON and De Olho na Cidade use the traditional structure, with categories based on what each newsroom produces. Portal Esfera went with the blog style, with columnists and a featured stream of stories.

Trade-off

The blog style shows fewer categories at once. The traditional structure requires the newsroom to keep several sections up to date.

Comparison between the Sociedade ON home page, with a traditional per-category structure, and the Portal Esfera home page, in blog style
Sociedade ON (traditional structure with per-category sections) and Portal Esfera (blog style with columnists).

Decision

Should the portal offer service information beyond the news?

Options considered

  • Keep the portal news-only.
  • Add weather, forecast and exchange-rate widgets.

Criteria

Besides being a client request, the goal is to make the portal a daily check-in point for readers. People often wouldn't look up the dollar rate or the forecast on their own, but if the information is already there, they stay informed and have one more reason to come back.

Choice

Weather and forecast widgets for the portal's city, and currency rates at the top of the page.

Trade-off

The widgets take up space that could go to stories or ads, and they rely on external data sources that need monitoring.

Weather and forecast widgets on the three portals
The weather and forecast widget, adapted to each portal's visual identity.
Top bars with dollar and euro exchange rates
Currency rates and weather in the top bar.

Decision

Visual impact or clarity?

Options considered

  • High-impact visuals: text over images in story lists, and animations.
  • Priority on clear information, reading flow and accessibility.

Criteria

On a news portal, readers need to understand each story at a glance, including on a phone, in low light or on a slow connection. Text over photos loses contrast depending on the image, and purposeless animations slow reading down.

Choice

I avoid text over images in story lists and sections, and skip unnecessary animations. On the lead story, where text over the photo is a news-portal convention, I use a gradient to guarantee contrast. Headline, category and timestamp stay legible, with a consistent hierarchy across every section.

Trade-off

The look is more restrained. Each portal's identity comes through its colors, typography and widgets.

Mobile versions of the three portals
Phones are the main access channel, so the layout is designed for them first.

Delivery, training and support

  • Development: once the prototype is validated, I coordinate the developers on Directus integration and front-end review, and manage delivery deadlines with the team.
  • Analytics: I set up GA4, Search Console and Google Ad Manager. That is how clients track their audience and monetize ad slots.
  • Training: I run remote or in-person sessions with journalists to teach them the CMS, share publishing tips and answer questions. At Sociedade ON, training was one of the things the client praised most.
  • Support: I coordinate ongoing support for all three portals after launch.

Results

  • Three portals live, two migrated from WordPress and one built from scratch.
  • Faster client validation: the AI-assisted working prototype brought decisions forward and reduced development rework.
  • Self-sufficient newsrooms on the new CMS after training, with positive client feedback, especially at Sociedade ON.

Audience and revenue figures belong to the clients, so they are not shown here.

Learnings

  • Showing beats describing. With AI, I can bring the client a working site instead of a document. The conversation shifts from "imagine that..." to "click here". Today I can build the first complete version of a portal on my own.
  • Content volume drives layout. The most important question isn't aesthetic: it's how many stories the newsroom can produce each day.
  • Training is part of the product. A well-built portal the newsroom can't use delivers no value. Journalist adoption matters as much as the layout.

Related articles

Built with AI assistance. All content is reviewed by me.

Privacy ·