Product UI/UX Design System

Infrastructure first. Design second.

The meta description in production read "parallax one page," the name of the Joomla template. Fiter had editorial coverage in Folha de SP, Forbes Brasil, and CBN. None of it was showing up in search. Nine critical SEO issues before a single design decision was made. Two weeks. Sixteen pages, fully structured, tracked, and live.

Client

Fiter

Studio

Vellumwire

Year

2025

Duration

2 weeks

Role

Strategy · IA · Design System · Front-end

Live site

fiter.com.br →

Fiter website after rebuild — structured product pages, editorial trust signals, and two distinct buyer paths

Fiter before the rebuild · the architecture that made ranking impossible

HR Director corporate buyer EdTech Dean education buyer /produto.html H1: "Bem-Vindo :)" meta: "parallax one page" score: 22/100 Google can't rank two keyword clusters, one page, zero signal fiter.com.br × lab.fiter.com.br (blog) ← Folha SP · Forbes Brasil · Estadão · CBN backlinks isolated here

Top: two buyers with different intents arriving at the same page. Google couldn't rank for either. Bottom: editorial authority from national press stuck on a subdomain, contributing nothing to the main domain.

01

The situation

Fiter is a Brazilian HR and EdTech SaaS that uses AI to predict employee turnover, measure organizational climate, and reduce student dropout rates. They serve two completely distinct markets (corporate HR teams and higher education institutions) with separate products, separate buyers, and separate search intents.

Before the rebuild, the entire company sat on a one-page Joomla template. The homepage title tag was fiter: five characters, zero keyword signal. The meta description was "parallax one page," the literal name of the theme, live in production. Both products shared a single /produto.html page with no structural separation, and the blog lived on lab.fiter.com.br, isolating every backlink and organic signal from the main domain.

The company had editorial coverage in Folha de SP, Estadão, Forbes Brasil, and CBN. Over 500,000 people measured. Clients including the Brazilian Navy. A site that made none of it count.

GTM was installed but not configured. No GA4. No conversion events. No Search Console. Any future optimization decision would have been a guess: there was no baseline to improve from.

The brief we wrote from the audit: the site wasn't failing because of design. It was failing because it had never been built as a business asset. It was a visual presence with no architecture behind it. The brief: rebuild the technical and content foundation first, then design on top of it.

02

Separate the ecosystems

RH and Educação are different products for different buyers with different search intent. An HR director searching "software de clima organizacional" and a university dean searching "plataforma de retenção estudantil" are not the same query, the same decision maker, or the same conversion path. The site was treating them as if they were: one page, one set of copy, no path for either.

Google's ranking model is keyword-document matching. A single page can't simultaneously rank for two unrelated keyword clusters: the signals cancel each other out. The architecture wasn't just bad UX. It was structurally blocking both products from appearing in search.

One page, two products

Both audiences land on the same URL. Copy speaks to neither specifically. One keyword signal for two unrelated topics. Google ranks neither. Each buyer reads copy that wasn't written for them.

Separate pages per ecosystem

/solucoes/rh and /solucoes/educacao, each with its own H1, keyword strategy, value proposition, and CTA. Google can rank each independently. Each buyer lands on a page written for them specifically.

Rejected approach Two entirely separate domains: fiter-rh.com.br and fiter-educacao.com.br. Rejected: splitting the domain fragments all accumulated domain authority. The Folha de SP, Forbes, and CBN backlinks would have been divided between two root domains, halving the authority of each. Structural separation within one domain gives semantic clarity for both Google and buyers without sacrificing the authority already earned.

Five existing product landing pages were migrated and rebuilt within the same design system, with distinct color identities per ecosystem (purple for RH, teal for Educação) within a unified token foundation across all 16 pages.

New site architecture: 16 pages across three clusters — Produto, Blog, and Conversão
Site architecture · 16 pages, three clusters, two buyer paths
Buyer journey comparison: HR Director vs EdTech Dean — two intents, two paths, two pages
Buyer journeys · two intents, two paths, separate conversion goals
Solucoes RH page — audience-specific copy and conversion path for HR Directors
RH ecosystem · /solucoes/rh
Educacao ecosystem page — audience-specific path for university deans and EdTech buyers
Educação ecosystem · /solucoes/educacao
03

Rebuild the SEO foundation

Nine critical issues were logged before any design work began. Fixing the visible layer without fixing the structural layer would have been cosmetic: a redesigned site with the same architecture still scores 22/100 in a different skin.

SEO structure is invisible to the client but determines whether the visual work ever gets seen. We treated it as infrastructure, not afterthought.

Across all 16 pages: title tags with primary keyword near the front, under 60 characters, unique per page. Meta descriptions at 145–155 characters with keyword, value proposition, and CTA. One H1 per page with the primary keyword. H2/H3 structured by section hierarchy, not visual preference. Image alt text added across all pages: product screenshots, client logos, editorial badges.

Schema markup went from zero to 16 pages with type-specific structured data: Organization, WebSite, SoftwareApplication, FAQPage, ContactPage, AboutPage, Blog, BlogPosting, Book. A sitemap was created with 15 indexable URLs, priorities configured per page type, noindex pages excluded.

The blog was migrated from lab.fiter.com.br to fiter.com.br/blog. Those same press backlinks now compound authority on the main domain instead of isolating it on a subdomain. All external CDN dependencies (Tailwind, Lucide, Google Fonts) were eliminated, removing third-party request overhead from every page load.

Outcome 22/100 → 100/100 across all seven categories: Titles & Meta, Headings, Content, Internal Links, Schema, URLs, Mobile. Every category rebuilt from near-zero to 10/10.
SEO score evolution: 22 to 100 across all seven audit categories
Audit evolution · 22 → 100 across all seven categories
Keyword cluster map: five clusters distributed across the funnel — informational on blog, commercial on product pages
Keyword map · five clusters, intent matched to page type
04

Surface the editorial authority

Fiter had coverage from Folha de SP, Estadão, Forbes Brasil, and CBN: editorial backlinks that most startups spend years trying to earn. Over 500,000 people measured. Clients including Braspress, Kroton, Arcor, Marinha do Brasil, USP, and Fatec. None of it was visible on the site. A cold prospect couldn't know it existed.

The authority was real and already earned. It wasn't being put to work because it wasn't being shown.

Authority buried

Editorial coverage and client logos existed in press releases and elsewhere but weren't surfaced on the site. A prospect who didn't already know Fiter had no trust signal before or during the decision. Credibility was invisible where it mattered most.

Authority surfaced

Press section on the homepage with direct editorial links, positioned as the first trust signal after the hero. Client logos (Braspress, Kroton, Arcor, Marinha do Brasil) in a marquee above the fold, establishing scale before the prospect reads a word of copy.

Trust signals work hardest when placed near a decision point. A cold prospect who doesn't know Fiter sees Forbes Brasil and the Brazilian Navy in the first scroll and recalibrates their perception immediately. This was a placement decision, not a credibility-building one: the authority was already there.

Fiter homepage — client logos and editorial press badges above the fold
Homepage · editorial badges and client marquee positioned as first trust signal
05

Tracking and front-end

GTM was installed on the previous site but never configured. No GA4. No conversion events. No Search Console. The site launched with a baseline, not without one: GA4 configured with conversion events (demo scheduled, form submitted) and GSC connected from day one. Every lead from launch is tracked, attributed, and measurable.

The Joomla template had a heavy carousel, no lazy loading, and blocking JavaScript, directly impacting LCP and CLS on mobile. Core Web Vitals are a direct ranking factor. A template rebuild would have reintroduced the same constraints in a different skin.

Template approach

Faster initial setup, but reintroduces third-party CSS/JS overhead, opinionated load order, and limited control over rendering. The previous site's performance problems came from this exact trade-off.

Clean HTML/CSS build

Full rebuild: mobile-first, images in WebP with native lazy loading, no render-blocking scripts, semantic HTML throughout, zero external CDN dependencies. Full control over what loads, when, and in what order. Target: LCP < 2.5s, CLS < 0.1.

Tracking outcome 3 direct leads attributed to the site within the first weeks of launch, against zero attributable leads from the previous site. First measurable conversion baseline established from day one.
Fiter product demo — WhatsApp-based survey flow, 8 clicks, 2 minutes, 87% adoption
Product demo · conversion path from rebuilt site to first contact
Fiter homepage on mobile — hero section
Hero · mobile
Fiter homepage on mobile — trust signals and solutions
Homepage · mobile
Fiter data module on mobile — organizational climate metrics
Data module · mobile
06

Results

Two weeks. Nine critical issues resolved. Everything below was measured at launch or within the first weeks of the new site being live.

22→100

SEO score · all 7 categories

1→16

pages fully structured

0→16

pages with schema markup

What changed that isn't a number: the client went from a site a prospect could visit and leave without a single clear action available, to one where every page has a defined intent, a defined audience, and a defined next step. The editorial coverage that had been invisible is now the first trust signal a prospect sees.

Fiter homepage after rebuild — hero with two-path navigation, trust signals above the fold
Homepage · hero with two-path routing and trust signals
RH product — organizational climate and turnover prediction data visualization
RH data · turnover prediction module
RH product — organizational climate metrics and benchmarks
RH data · climate and engagement metrics
Fiter CTA section — conversion path close with dual audience routing
CTA · conversion path close
07

Reflections

The brief was wrong, and that was the assignment. Fiter came in asking for a redesign. The actual problem was nine SEO issues making two years of editorial coverage invisible in search. Auditing infrastructure before opening Figma is now a fixed step in every project scope I write.

Information architecture has a longer half-life than visual design. The 16-page structure and two buyer journeys will still be serving Fiter when the visual language gets refreshed. The decision that mattered most wasn't the homepage layout — it was separating corporate HR from higher education into distinct paths with distinct intents.

Press coverage without indexed structure is a wasted asset. Four major outlets had covered Fiter. None of it was building search authority. One structural decision captured all of it retroactively. Trust signal architecture should be a standard deliverable on every site engagement, not an afterthought.

The two-week constraint was the right constraint. Tight timelines force prioritization that longer projects defer until it's too late. I wouldn't change the timeline if I ran this again.