Jatevo Chat

Context

Jatevo Chat is an AI workspace for working across multiple models, web search, image generation, document analysis, coding, multimedia tasks, and team collaboration.

The original brief was straightforward: create a landing page for the product. The real work was harder. The product had a wide feature set, but the positioning was still cloudy. The client could describe what the tool did, but not yet what the page should make people believe.

I owned the product story, landing page copy, visual design, motion direction, responsive behavior, and Framer implementation.

Challenge

The biggest problem was not a lack of features. It was too many competing claims.

Jatevo Chat could talk about model access, unlimited use, image generation, document work, shared spaces, pricing, self-hosting, and affiliate flows. If every feature had equal weight, the landing page would turn into a checklist. If the page became too minimal, the product would feel vague.

The page also needed to work for a general audience in Indonesia. That meant cutting back AI jargon, avoiding a cold technical tone, and making the product feel useful before it felt impressive.

The visual assets were limited, so motion had to carry more of the experience. That is risky. Random animation makes a page feel expensive in the worst way. The motion needed to support comprehension, not decorate the gaps.

Approach

I treated the page as a product argument, not a feature inventory.

The first decision was to give the page a single promise: your favorite AIs in one platform. That line became the spine for the rest of the page. Instead of asking visitors to understand every capability at once, the landing page introduces one simple idea, then expands into practical use cases.

The structure grouped the product around recognizable moments: chatting with different models, working with documents, researching with web context, creating visuals, collaborating with a team, and choosing a plan. That gave each section a job.

The hero had to do the heaviest lifting. It needed to make the multi-model idea obvious without requiring a paragraph of explanation. I used the LLM icon reveal as the main motion cue, so visitors could immediately understand the premise: Jatevo Chat is not one isolated assistant, but a workspace for choosing between several AI models.

Below the hero, the value proposition section continues that logic. The icons do not just sit beside the copy. They move, morph, and float into the text box below them, tying the visual motion to the message being explained. The point was to make each value prop feel connected to the interface, not pasted onto it.

Motion Direction

The motion direction had one rule: if the animation did not clarify the product, it did not belong.

For the hero, the model icons reveal the product promise before the visitor reads too much. For the value proposition section, the icon motion creates a bridge between abstract benefits and concrete product behavior. Across the page, movement is used for pacing: first the central promise, then the supporting proof, then the conversion sections.

That restraint mattered. A product like this can easily slide into the usual AI landing page noise: glowing blobs, jargon, feature spam, and motion that exists because someone found a timeline panel. I wanted the page to feel premium, but still approachable enough for people who were curious about AI without living inside AI Twitter.

Responsive Execution

The responsive work was a real part of the project, not an afterthought.

The page relied on animation, layered hero elements, and section transitions that could not simply shrink onto mobile. Several interactions had to be reconsidered so the page still felt intentional on smaller screens without becoming heavy or cramped.

I rebuilt the layout behavior in Framer around the content hierarchy: the main promise first, supporting animation second, and the scannable copy always kept readable. The goal was not to preserve every desktop flourish. The goal was to preserve the meaning of the page across breakpoints.

Outcome

The site was approved by the client, published to the production domain, used for early access, and handed off as a completed Framer build.

The production domain later became inconsistently maintained, so the most dependable artifact is the Framer staging version: multidisciplinary-approach-054245.framer.app. That distinction matters. The design and build shipped; long-term domain maintenance was outside the delivered scope.

The finished page gave Jatevo Chat a clearer public story: one workspace for multiple AI models, explained through approachable copy, purposeful motion, and a responsive landing page that could support early access without feeling like a generic AI template.

What I Would Refine Next

If I revisited the project, I would leave the homepage direction mostly intact and focus on the supporting surfaces.

The blog article page could do more to make long-form content feel useful and credible. The form states could also be stronger, especially around success, error, and loading feedback. I would also sharpen the copy further for the Indonesian market, with stronger language around why the product matters and fewer phrases that sound like they came from the wider AI landing page pile.