UX Strategy

UX Audit

Interface Design

Web Dev

Visual Direction

Technical SEO

Elevating a SaaS Brand Through Strategic Web Design

Wirerame webdesign SAAS

Client

Chata.ai

Industry

SaaS, AI

Timeline

3 months

Software

Framer, Figma

Wirerame webdesign SAAS
Wirerame webdesign SAAS

Overview

The goal was to improve clarity, strengthen visual consistency, and create a more trustworthy and user-focused experience across the main pages of the site.

Mobile website Chata.ai

The Challenge

The website presented two main challenges.

On the UX side, the content was heavily focused on features rather than the primary audience.
While the platform targets data analysts, the messaging remained broad and did not clearly address their specific needs or expectations. This made it harder for users to quickly understand the product’s value.

On the UI side, the interface lacked consistency and structure.
The absence of a clear design system, combined with issues in hierarchy, spacing, and visual coherence, reduced the overall sense of credibility and trust.

Additionally, the website was not optimized for mobile, creating friction across devices.

Challenge web design SAAS

Strategic Approach

The project involved the redesign of the main pages of the website, including the homepage, platform pages, solution pages, and developer pages.

Working closely with the internal team, I built upon the existing structural work and contributed to refining the overall experience.

My focus was to bring clarity, consistency, and cohesion to the interface while supporting the existing content strategy.

This included:

  • analyzing internal UX research and proposed structures

  • suggesting improvements to content hierarchy and flow

  • designing a clear and scalable design system

  • ensuring a consistent experience across all pages and devices.

After Before website redesign

Solution

Building Trust Through Consistency

I designed a structured and repeatable design system to ensure visual coherence across the entire website.

This included defining clear rules for components, interactions, and color usage, allowing every page to feel aligned and consistent.
The result is a more professional and reliable interface that reinforces trust.

Mobile website redesign
Wireframe design system
Section redesign

Simplifying the Visual Language

The original interface relied on multiple colors and heavy gradients, which created visual noise and reduced clarity.

I simplified the visual approach by reducing the color palette and using gradients more intentionally — mainly as subtle accents or to highlight key elements such as CTAs and important messaging.

This shift created a cleaner, more premium feel and improved overall readability.

Website before
Website after redesign

Strengthening Visual Hierarchy

I reworked the hierarchy to better guide user attention toward what matters most.

Key information such as headlines, metrics, and trust signals are now more clearly emphasized, while secondary elements remain more neutral.

Buttons were redesigned to be minimal and unobtrusive, with subtle interactions (such as gradient shadows on hover) to maintain a refined and controlled experience.

Website landing page
Framer webdesign
Website UX UI design

Improving Navigation Experience

I redesigned the navigation system to improve usability across all devices.

This included:

  • a fixed navigation bar for better accessibility

  • a more structured and immersive menu experience

  • improved mobile and tablet navigation

The goal was to make navigation more intuitive and reduce friction throughout the user journey.

Case Study Chata.ai
Complexe navbar design and development

Outcome

The result is a more structured, consistent, and user-focused interface.

The website now feels clearer, more reliable, and easier to navigate, helping users better understand the product and engage with the platform more confidently.

Key Improvements

  • Improved visual consistency across all pages

  • Stronger sense of trust and credibility

  • Clearer hierarchy and readability

  • Simplified and more intentional use of color

  • Enhanced navigation across desktop and mobile

Key improvements web design

DESCOVER MORE PROJECTS

Discover the artistry and innovation that have earned us accolades and a reputation as leaders in the digital design industry.

Psychologist website
Framer development

Say Hi!

I offer end-to-end support, from strategy and design to development and ongoing optimization.
If you’re looking to create a website that is clear, strategic, and built to perform, let’s talk.

JID Studio 2026, all rights reserved.

Based in Brazil.

CNPJ: 62.354.102

Create a free website with Framer, the website builder loved by startups, designers and agencies.