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
Site institucional atual da JStack

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

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.

  1. O relato do projeto atribui à evolução do site e da oferta um crescimento de mais de 30% no número de alunos.
  2. O site apoiou a migração do modelo de curso para o modelo de assinatura com uma comunicação mais clara.
  3. O Framer reduziu em dois meses o tempo de entrega de sites e facilitou a replicação de novos lançamentos.
  4. 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!

— Mateus Silva, Founder, JStack

Aprendizados

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

  1. Comunicação clara também é produto: explicar o que cada oferta inclui reduz incerteza e aumenta a confiança.
  2. Um sitemap e uma base de conteúdo mais fortes podem destravar um resultado visual melhor do que apenas ajustar a UI.
  3. Voltar algumas etapas também é progresso: revisitar a estrutura deixou a experiência final mais coerente.
  4. 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