anêmona
PTEN
Lola

A WordPress theme and a publishing panel for Lola\TBWA Brasil.

We built the theme from scratch, in the design of the international Lola site, and a custom admin panel in place of wp-admin.

Client
Lola\TBWA Brasil
Scope
WordPress theme and admin panel

lolatbwa.com.br (in Portuguese)

0
third-party code libraries on the home page, compared with five on the previous site
85
mobile performance score, up from 65 on the previous version
32 ms
average server response time, down from 226 ms measured on the old site
The top of the lolatbwa.com.br home page (in Portuguese)
back to top01The problem

Brand, structure and security

The site still carried the old brand's name and theme.

There were two pages, the home page and the clients page, and no published work.

The home page loaded five third-party code libraries: Bootstrap, Splide, Swiper, Font Awesome and the cookie banner. jQuery and jQuery Migrate came from the site's own domain.

No CSP or HSTS security headers, and no protection against framing.

back to top02What we did

A theme from scratch and a separate admin panel

With permission, we reproduced the network's design in a classic WordPress theme in PHP, built from scratch.

A custom plugin stores the content and serves the admin panel.

The admin panel sits behind a login, at an address isolated from the site. Only the authorized team has access.

A work page on the new Lola site
A sample work page on the new site.
back to top03The mechanisms

1 The team's admin panel

Each page of the site is built from blocks, such as opening, manifesto, clients, testimonials, news carousel and video. The team picks the blocks, orders them and fills them in.

Work, news, awards, pay transparency and clients each have their own records, where entries are created, edited, reordered and removed. Logs record who made each change, when, and what changed.

The home page blocks in the admin panel
The home page in the admin panel, with the blocks in site order, with demo data.
The work list in the admin panelThe record of one work entry in the admin panel
Above, the work list. Below, the form for a new work entry.

2 One shared rule for the admin panel and the server

Blocks are checked one by one when a page is created, which keeps the wrong settings from breaking the site.

3 Media prepared in the browser

Logos and photos are cropped in the admin panel itself, with an optional 9:16 vertical crop for phones. The looping video is prepared before upload, and the full film comes in through its Vimeo address.

The media library in the admin panel
The media library, with images from the live site.

4 Saving is publishing

There is no publish button. Saving a work entry automatically refreshes every page and component that depends on it.

back to top04Performance

Metrics: before and now

home page (medians)beforenow
performance score6585
Largest Contentful Paint (LCP)9.16 s3.60 s
speed index6.57 s4.48 s
server response226 ms32 ms
third-party weight536 KiB0 KiB
back to top05Technology

Behind the scenes

site
  • WordPress
  • PHP
admin panel
  • React
  • TypeScript
video
  • Vimeo
back to top06The result