# Como transformar uma landing page em um site institucional para uma plataforma em expansão?

Reestruturei a presença institucional da JStack para explicar com mais clareza a evolução de curso para plataforma, conectando conteúdo, produto, projetos e assinatura em uma experiência mais completa.

- Product Design

- Web Design

- No-code

2025

Visão geral

## Um site que precisava acompanhar a plataforma.

A JStack começou com uma landing page para um curso. Conforme o negócio evoluiu para uma plataforma de assinatura com aulas ao vivo, Formação, projetos e recursos, o site precisava explicar um ecossistema muito maior.

Este case acompanha essa evolução por diferentes versões e o redesign do site institucional que reuniu a oferta em uma estrutura mais clara.

Desafio

## A oferta cresceu mais rápido do que a explicação.

A versão institucional de 2024 ainda gerava dúvidas sobre o que era a formação, o que os alunos recebiam, como funcionavam os cursos e como cada parte da plataforma se conectava.

O desafio não era apenas polir a interface. Era repensar copy, sitemap e estrutura de páginas para que uma pessoa entendesse o modelo atual sem precisar iniciar uma conversa antes.

Evolução

## De landing page de curso a narrativa de plataforma.

O ponto de partida: uma landing page que já não representava todo o ecossistema.

O primeiro redesign começou a ampliar a história e introduziu o Framer como principal ferramenta de produção.

A página precisava explicar a passagem de cursos em turmas para uma assinatura recorrente.

Uma versão mais ampla reuniu plataforma, Formação e projetos em uma mesma narrativa.

Estrutura

## O redesign começou pelo conteúdo, não pelos componentes.

Voltamos algumas etapas em relação à UI anterior e reconstruímos a base: uma nova direção de copy, um sitemap mais claro, wireframes e referências visuais.

As primeiras explorações eram intencionalmente brutas. O papel delas era tornar a hierarquia visível antes da montagem da UI final no Framer.

O trabalho voltou para o conteúdo e a estrutura antes de retornar à interface.

Uma primeira estrutura ainda bruta tornou visíveis a hierarquia e os conteúdos que faltavam.

As referências ajudaram a definir a direção visual e organizacional do site institucional.

O style guide organizou as decisões antes da montagem da UI diretamente no Framer.

Interação

## O motion deu vida à plataforma sem esconder a mensagem.

O hero usou o Unicorn Studio para introduzir uma camada de WebGL, enquanto o LottieLab adicionou motion em áreas específicas nas quais a animação ajudava a explicar o produto ou criar ritmo.

As ferramentas foram escolhidas como parte do sistema de comunicação, não como decoração. A ideia era dar uma entrada mais expressiva para um site institucional complexo sem perder a legibilidade das informações.

Exploração em WebGL usada para dar uma camada mais expressiva à entrada do site.

Estudos de motion para áreas que se beneficiavam de uma apresentação mais dinâmica.

Produção

## Um modelo de produção flexível para um site com várias páginas.

O CMS ficou reservado às aulas dos cursos e foi sincronizado com o Excel para manter a gestão das turmas prática. As outras páginas usaram Framer Templates, permitindo replicar uma estrutura e trocar apenas o conteúdo.

Esse equilíbrio manteve o sistema simples para o fluxo real: estruturado onde o conteúdo recorrente precisava de gestão e reutilizável onde as páginas compartilhavam um mesmo padrão.

[Visitar jstack.com.br](https://jstack.com.br/)

Resultado final

## Uma casa institucional para todo o ecossistema.

A versão atual reúne plataforma, Formação, projetos e recursos em uma experiência única.

Uma página dedicada à formação completa em desenvolvimento.

Um espaço para projetos construídos do zero com diferentes stacks de tecnologia.

Impacto

## Uma estrutura melhor deixou o negócio mais fácil de explicar e escalar.

- O relato do projeto atribui à evolução do site e da oferta um crescimento de mais de 30% no número de alunos.

- O site apoiou a migração do modelo de curso para o modelo de assinatura com uma comunicação mais clara.

- O Framer reduziu em dois meses o tempo de entrega de sites e facilitou a replicação de novos lançamentos.

- Um CMS focado e templates reutilizáveis tornaram um site com várias páginas mais simples de manter.

Depoimento

## Uma expressão mais clara do que a JStack havia se tornado.

O novo design da nossa landing page capturou perfeitamente a essência da JStack e nos ajudou a comunicar nossa evolução como empresa. O feedback dos nossos alunos tem sido incrível!

Aprendizados

## O resultado mais forte começou antes da interface final.

- Comunicação clara também é produto: explicar o que cada oferta inclui reduz incerteza e aumenta a confiança.

- Um sitemap e uma base de conteúdo mais fortes podem destravar um resultado visual melhor do que apenas ajustar a UI.

- Voltar algumas etapas também é progresso: revisitar a estrutura deixou a experiência final mais coerente.

- Framer, LottieLab e Unicorn Studio foram úteis quando estavam a serviço de um objetivo claro de comunicação.

Próximo Case

[Talqui Plataforma de atendimento com IA, redesign e design system](https://eduardoamaral.me/projetos/talqui/)

Source: https://eduardoamaral.me/projetos/jstack-institutional-website/
Language: pt-BR