Turning a landing page into an institutional website for a growing learning platform.

I restructured JStack's institutional presence to explain its evolution from course to platform more clearly, connecting content, product, projects and subscription in a more complete experience.

  • Product Design
  • Web Design
  • No-code
2025
Current JStack institutional website

Overview

A site that had to catch up with the platform.

JStack started with a landing page for a course. As the business evolved into a subscription platform with live classes, a Formation, projects and resources, the site had to explain a much larger ecosystem.

This case follows the evolution across several versions and the redesign of the institutional website that brought the offer together in one clearer structure.

Challenge

The offer had grown faster than the explanation.

The 2024 institutional version still generated questions about what the training was, what students received, how the courses worked and how each part of the platform connected.

The challenge was not only to polish the interface. It was to rethink the copy, sitemap and page structure so a visitor could understand the current business model without needing a conversation first.

Evolution

From course landing page to platform narrative.

The starting point: a landing page that no longer represented the whole ecosystem.
The first redesign started to expand the story and introduced Framer as the main production tool.
The page had to explain the move from cohort-based courses to a recurring subscription.
A broader version brought the platform, Formation and projects into one narrative.

Structure

The redesign started with content, not components.

We stepped back from the previous UI and rebuilt the foundation: a new copy direction, a clearer sitemap, wireframes and visual references.

The first explorations were intentionally rough. Their job was to make the hierarchy visible before the final UI was assembled in Framer.

The work went back to the content and structure before returning to the interface.
A rough first structure made the hierarchy and missing content visible.
References helped define the visual and organizational direction for the institutional site.
The style guide organized the decisions before the UI was assembled directly in Framer.

Interaction

Motion made the platform feel alive without hiding the message.

The hero used Unicorn Studio to introduce a WebGL layer, while LottieLab added motion to selected areas where animation helped explain the product or create rhythm.

The tools were chosen as part of the communication system, not as decoration. The goal was to give a complex institutional site a more expressive entry point while keeping the information legible.

WebGL exploration used to add a more expressive layer to the entry point.
Motion studies for the areas that benefited from a more dynamic presentation.

Production

A flexible production model for a multi-page site.

The CMS was reserved for course lessons and synchronized with Excel to keep class management practical. The other pages used Framer Templates, allowing the team to replicate a structure while changing the content.

This balance kept the system simple for the actual workflow: structured where recurring content needed management, and reusable where pages shared a common pattern.

Visit jstack.com.br

Final result

One institutional home for the whole ecosystem.

The current version brings the platform, Formation, projects and resources into one experience.
A dedicated page for the full development training.
A place for projects built from scratch with different technology stacks.

Impact

Better structure made the business easier to explain and scale.

  1. The project report attributes a growth of more than 30% in the number of students to the evolution of the site and offer.
  2. The site supported the migration from the course model to the subscription model with clearer communication.
  3. Framer reduced website delivery time by two months and made new launches easier to replicate.
  4. A focused CMS setup and reusable templates made a multi-page site easier to maintain.

Testimonial

A clearer expression of what JStack had become.

The new design of our landing page perfectly captured the essence of JStack and helped us communicate our evolution as a company. The feedback from our students has been incredible!

— Mateus Silva, Founder, JStack

Learnings

The strongest result started before the final interface.

  1. Clear communication is part of the product: explaining what each offer includes reduces uncertainty and builds trust.
  2. A stronger sitemap and copy foundation can unlock a better visual result than incremental UI changes alone.
  3. Iterating backwards is sometimes progress: revisiting the structure made the final experience more coherent.
  4. Tools such as Framer, LottieLab and Unicorn Studio were useful when they served a clear communication goal.

Next Case Study

Talqui

AI-powered support platform, redesign, and design system