Web Design · Desenvolvimento Front-end Web Design · Front-end Development

Redesign que virou rebranding: quando o site precisa crescer junto com a marca Redesign that became rebranding: when the site needs to grow with the brand

Uma agência que mudou de nome precisava de um site que fizesse jus à nova identidade. Fui o designer e dev responsável por essa transição. An agency that changed its name needed a site that matched its new identity. I was the designer and developer behind that transition.

UI DesignFront-endBrandingHTML/CSSJavaScriptWordPressUIkit

O contexto

Quando entrei na 2t's em 2017, a agência estava no meio de uma mudança importante. A 2t's Comunicação estava se tornando 2t's Agency — uma virada de posicionamento que ia além do nome: era uma declaração de que a agência havia crescido, amadurecido, e queria ser levada a sério também fora do Brasil. O problema é que o site ainda contava a história antiga.

Eu era Web Designer lá, mas ainda tinha o pé fincado no front-end — estava naquele momento de transição de carreira em que você começa a enxergar os problemas de interface com outros olhos, mas ainda resolve tudo no código. Foi nesse contexto que o projeto caiu no meu colo.

O problema

O site anterior tinha alguns problemas sérios. A identidade visual era datada, com aquela estética meio genérica de agência pequena que não comunica nada específico. A estrutura de informação era confusa — difícil entender rapidamente o que a 2t's fazia, para quem, e por quê isso importava. E o site era monolingue: num momento em que a agência estava expandindo sua atuação e buscando projeção internacional, não existia uma versão em inglês.

Além disso, havia algo mais difícil de nomear: o site antigo parecia infantil. Não no sentido de feito com descuido, mas no sentido de que não transmitia a seriedade e a especialização que a agência já tinha conquistado no mercado de healthcare. Os clientes eram Eurofarma, Sandoz, Daiichi Sankyo — e o site não estava à altura desse portfólio.

O desafio era claro, mas não simples: recriar a presença digital da agência de forma que o novo site contasse a nova história, sem apagar tudo que tinha sido construído.

O processo

Trabalhei junto com a fundadora da agência e dois outros designers do time. A direção criativa e as definições estratégicas vinham da fundadora — ela sabia exatamente o que queria comunicar com o rebranding. Meu papel foi pegar essa visão e transformar em interface e código.

A escolha estética mais marcante foi a linguagem dos hexágonos. Ela já estava presente na nova identidade da marca — o logo da 2t's usa um hexágono como forma principal — e a gente decidiu levar isso para o design do site de forma sistemática. Os hexágonos aparecem em fotos com tratamento em overlay, em elementos decorativos, na composição das seções. Não era decoração por decoração: era a identidade visual ganhando dimensão espacial no layout.

A paleta roxa e amarela também foi uma escolha que me marcou. Era agressiva o suficiente para ser memorável, mas com o equilíbrio certo para não soar like um site de gaming. Para uma agência especializada em healthcare — onde a comunicação precisa ser ao mesmo tempo criativa e confiável — esse equilíbrio importava.

Na parte técnica, o stack foi WordPress como CMS com UIkit como framework CSS/JS, mais HTML e JavaScript vanilla para os comportamentos específicos. O UIkit foi uma escolha pragmática para o contexto: um framework menos ubíquo que o Bootstrap, com componentes mais clean, que não brigava com a identidade visual customizada que a gente estava construindo.

A implementação bilíngue foi uma das partes mais trabalhosas. O WordPress não tem suporte nativo a multilíngue elegante — a solução foi estrutural, com páginas espelhadas e uma lógica de navegação entre os idiomas que precisou ser construída do zero em JS. Não foi bonito por dentro, mas funcionou, e funciona até hoje.

O resultado

O site foi ao ar em 2018 e está em produção até hoje — sem grandes alterações. Isso, por si só, já diz algo. É raro um site de agência sobreviver tantos anos sem precisar de uma reforma completa.

A versão em inglês abriu caminho para que a agência se apresentasse em contextos internacionais. A nova identidade visual comunicava um posicionamento mais sofisticado e especializado. E a estrutura de informação reorganizada tornava muito mais fácil entender o que a 2t's oferecia — dos serviços ao portfólio.

O que eu aprendi

Rebranding não é trocar o logo. Quando o projeto começou eu achava que era "só" redesenhar um site com uma identidade nova. Mas na prática, cada decisão de layout, tipografia e hierarquia estava reforçando ou contradizendo o posicionamento que a agência queria construir. A interface é uma declaração de intenção.

Trabalhar num produto que vai representar a empresa onde você trabalha é diferente. Você tem um comprometimento diferente com o resultado porque vai ter que olhar para aquilo todo dia. Aprendi a valorizar esse nível de stake — e a buscar ele nos projetos que aceito desde então.

O front-end que você escreve hoje vai ser mantido por outra pessoa (ou por você, anos depois). Nesse projeto eu ainda não pensava muito nisso. Hoje eu penso o tempo todo.

The context

When I joined 2t's in 2017, the agency was in the middle of an important shift. 2t's Comunicação was becoming 2t's Agency — a repositioning that went beyond the name: it was a statement that the agency had grown, matured, and wanted to be taken seriously outside Brazil too. The problem was that the website still told the old story.

I was a Web Designer there, but still had one foot firmly in front-end development — I was at that career transition point where you start seeing interface problems differently, but still solve everything in code. That's the context in which this project landed in my lap.

The problem

The old site had some serious issues. The visual identity was dated, with that generic small-agency aesthetic that communicates nothing specific. The information architecture was confusing — hard to quickly understand what 2t's did, for whom, and why it mattered. And the site was monolingual: at a time when the agency was expanding its reach and seeking international visibility, there was no English version.

There was also something harder to name: the old site felt immature. Not in the sense of being carelessly made, but in that it didn't convey the seriousness and specialization the agency had already earned in the healthcare market. Their clients included Eurofarma, Sandoz, Daiichi Sankyo — and the website wasn't living up to that portfolio.

The challenge was clear, but not simple: rebuild the agency's digital presence so the new site told the new story, without erasing everything that had been built.

The process

I worked alongside the agency's founder and two other designers from the team. Creative direction and strategic decisions came from the founder — she knew exactly what she wanted the rebranding to communicate. My role was to take that vision and turn it into interface and code.

The most distinctive aesthetic choice was the hexagon language. It was already present in the new brand identity — the 2t's logo uses a hexagon as its main shape — and we decided to carry that into the site design systematically. Hexagons appear in photos with overlay treatments, in decorative elements, in section compositions. It wasn't decoration for decoration's sake: it was the visual identity gaining spatial dimension in the layout.

The purple and yellow palette was another choice that stuck with me. It was aggressive enough to be memorable, but balanced enough not to feel like a gaming site. For an agency specialized in healthcare — where communication needs to be both creative and trustworthy — that balance mattered.

On the technical side, the stack was WordPress as CMS with UIkit as the CSS/JS framework, plus vanilla HTML and JavaScript for specific behaviors. UIkit was a pragmatic choice for the context: a less ubiquitous framework than Bootstrap, with cleaner components that didn't fight against the custom visual identity we were building.

The bilingual implementation was one of the most labor-intensive parts. WordPress doesn't have elegant native multilingual support — the solution was structural, with mirrored pages and a language navigation logic that had to be built from scratch in JS. It wasn't pretty under the hood, but it worked, and it still works today.

The outcome

The site launched in 2018 and has been in production ever since — without major changes. That alone says something. Agency sites rarely survive that many years without needing a full overhaul.

The English version opened doors for the agency to present itself in international contexts. The new visual identity communicated a more sophisticated and specialized positioning. And the reorganized information structure made it much easier to understand what 2t's offered — from services to portfolio.

What I learned

Rebranding isn't just swapping the logo. When the project started I thought it was "just" redesigning a site with a new identity. But in practice, every layout, typography, and hierarchy decision was either reinforcing or contradicting the positioning the agency wanted to build. The interface is a declaration of intent.

Working on a product that represents the company you work for is different. You're more committed to the outcome because you have to look at it every day. I learned to value that level of stake — and to seek it in the projects I take on since then.

The front-end you write today will be maintained by someone else (or by you, years later). On this project I wasn't thinking much about that. Now I think about it all the time.