QUEL Vamos conversar
Projetos selecionadosCASE 06 / EVOLUÇÃO DA ODDSTAR
PRODUCT DESIGN · IA NO PROCESSO DE DESIGN

Uma busca mais clara.
Design conduzido
por mim.

Evolução da Oddstar com IA

Da dificuldade de encontrar a busca a uma experiência global. Evidências de uso, decisões de UX e IA como ferramenta de apoio à criação.

ODDSTAR / EVOLUÇÃO DA BUSCA

Encontrar.
Explorar.
Retomar.

Página inicial da Oddstar com Busca na navegação inferiorBusca global com categorias e buscas recentes
MINHA ATUAÇÃO
Concepção, fluxos e interfaces
PONTO DE PARTIDA
Clarity e pesquisa com usuários
RECORTE
Descoberta e experiência de busca
IA NO PROCESSO
Apoio à criação e ao detalhamento

O CONTEXTO

A Oddstar já oferecia uma busca, mas parte dos usuários tinha dificuldade para localizá-la. Alguns sequer percebiam que ela existia. A evolução levou a funcionalidade para o menu inferior e criou uma experiência global para encontrar times, competições e partidas.

MINHA ATUAÇÃO

Conduzi a evolução da busca, desde a interpretação dos sinais de uso e pesquisa até a definição dos fluxos, da hierarquia de informação e dos layouts. Utilizei IA como ferramenta de apoio à criação, orientando sua aplicação com o contexto do problema, os componentes existentes e os critérios de experiência que defini.

02 / O PROBLEMA

A ferramenta existia.
A descoberta era uma barreira.

Uma ferramenta precisa ser encontrada antes de ser utilizada.

No modelo anterior, a busca estava associada à experiência de “Todas as partidas”. Para utilizá-la, o usuário precisava reconhecer esse ponto de entrada dentro da navegação.

A observação do comportamento no Microsoft Clarity e os relatos coletados em pesquisa mostraram que essa descoberta não era evidente para todos. A dificuldade aparecia antes mesmo de digitar uma consulta: era preciso encontrar a própria ferramenta.

A PERGUNTA QUE GUIOU O PROJETO

Como tornar a busca uma opção evidente e ajudar o usuário a chegar ao conteúdo desejado com mais direção?

03 / A DIREÇÃO

Visibilidade, orientação
e continuidade.

01

Um acesso reconhecível.

Inserir a Busca no menu inferior, com ícone de lupa e identificação textual, tornando seu acesso mais explícito.

02

Um espaço global.

Reunir times, competições e partidas em uma experiência com categorias que ajudam a compreender e explorar os resultados.

03

Retomar interesses.

Apresentar as últimas buscas para facilitar a continuidade, sem exigir que a pessoa reconstrua a mesma consulta.

04 / IA NO PROCESSO DE DESIGN

Criação conduzida por mim.
Com apoio de IA.

O trabalho com IA partiu de um problema identificado por observação e pesquisa. A ferramenta apoiou a materialização da direção de design que defini.

01

Contextualizar

A partir das dificuldades identificadas, defini a direção da experiência: tornar a busca visível, ampliar seu alcance e oferecer mais orientação. Forneci à IA o contexto do problema, referências do produto e os componentes existentes.

02

Criar e iterar

Utilizei IA para apoiar a construção dos layouts e o detalhamento dos fluxos. Delimitei o que precisava ser resolvido e conduzi as iterações, revisando e ajustando as propostas conforme os objetivos da experiência.

03

Revisar e refinar

As decisões sobre navegação, organização das informações, hierarquia visual e adequação ao sistema da Oddstar permaneceram sob minha condução. A revisão orientou a consistência entre as telas e os diferentes estados.

04

Detalhar e documentar

Também utilizei esse apoio para desdobrar os estados da interface e organizar o handoff: comportamentos esperados, orientações de acessibilidade e eventos sugeridos para acompanhamento.

A IA ajudou a materializar e detalhar a solução. A concepção, a direção de design e a avaliação crítica foram conduzidas por mim.

05 / A SOLUÇÃO

Uma busca que oferece caminhos
desde o primeiro contato.

Busca no menu inferior

Ícone e rótulo comunicam a existência da ferramenta na navegação principal.

Últimas buscas

Categorias e histórico ajudam a direcionar a exploração e retomar interesses.

Resultados organizados

Times, competições e partidas em uma mesma experiência de descoberta.

Clareza também quando algo não sai como esperado.

O fluxo contempla a espera, a ausência de resultados e a falha de conexão, indicando o que está acontecendo e como continuar.

Carregamento

Feedback durante a consulta.

Sem resultados

Orientação para revisar a busca.

Falha de conexão

Mensagem e possibilidade de tentar novamente.

Telas originais do projeto no Figma. Explorar o fluxo no Figma ↗

06 / GANHOS E AVALIAÇÃO

Mais visibilidade.
Mais direção para encontrar.

Busca no menu inferior

Torna a funcionalidade mais visível e oferece um ponto de entrada consistente.

Busca global e categorias

Reúne diferentes conteúdos e ajuda a distinguir os resultados.

Últimas buscas

Facilita retomar consultas e reduz a necessidade de digitação repetida.

Estados de interação

Explica o andamento da consulta e oferece caminhos para continuar.

Componentes existentes

Mantém familiaridade visual e consistência com o produto.

O que ainda precisa ser medido.

As mudanças respondem às dificuldades identificadas e criam condições para uma navegação mais direta. A redução do tempo para encontrar conteúdos e o aumento do uso da busca são benefícios esperados, que precisam ser verificados com dados de utilização.

Como avaliar a evolução

07 / APRENDIZADO

O valor da IA depende
da direção de quem cria.

Repertório de design, conhecimento do produto e critérios claros de revisão.

O projeto reforçou a importância de combinar ferramentas de IA com uma direção de experiência bem definida.

Meu trabalho foi conectar as evidências às decisões, orientar a criação e refinar a solução. A IA apoiou esse percurso, enquanto mantive a responsabilidade pela coerência dos fluxos e pela qualidade das interfaces.

Abrir original