Website Jacarandá Mobília
Design UX/UI | Site de Catálogo | Codificação Assistida por IA | Pesquisa Informal | Figma | Webdesign
Papel:
Lead Designer UX / UI
Tipo de projeto:
Freelance
Ano:
2025
Resumo do projeto:
A Jacarandá Mobília precisava de uma presença online premium. Após analisar a concorrência, identifiquei uma lacuna em termos de estética ultrapassada e navegação deficiente. Eu projetei um site de catálogo responsivo no Figma e, posteriormente, o reconstruí diretamente no Shopify para atender às restrições orçamentárias. Ao utilizar IA e refinar os elementos visuais, entreguei um website moderno, escalável e pronto para futuras funcionalidades de e-commerce.
Desafio:
O projeto da Jacarandá Mobília exigiu uma mudança estratégica: criar uma experiência moderna e premium mantendo-se dentro de um orçamento limitado. Isso significou migrar de uma solução customizada planejada para uma construção mais adaptável e simplificada no Shopify. O desafio central foi manter a integridade do design e o toque premium, apesar da mudança no escopo e das limitações da plataforma.
Plano de ação / solução
Projetei layouts totalmente responsivos no Figma, priorizando o CTA principal para uma hierarquia visual mais forte e mantendo as ações secundárias minimizadas.
Inicialmente, o plano era transferir os designs via plugin, mas as restrições orçamentárias exigiram a reconstrução direta no Shopify, utilizando seus recursos nativos de responsividade.
Utilizei IA para gerar tanto o código Liquid quanto o texto de marketing, supervisionando as saídas para precisão e refinando apenas os segmentos de código que eu poderia ajustar de forma crítica.
Retoquei e otimizei todas as imagens dos produtos no Photoshop para garantir qualidade consistente e um carregamento mais rápido.
Estruturei o site como um catálogo, com flexibilidade para transicionar para uma loja de e-commerce completa no futuro.
Persona alvo:
"Eu preciso de uma maneira rápida e elegante de encontrar o móvel perfeito e mostrar aos meus clientes exatamente como ele se parece."
*A persona foi desenvolvida com base em insights diretos das interações com clientes e dados de vendas.
Necessidades do usuário:
Gabriela precisa de uma forma rápida e elegante de explorar coleções de móveis de alto padrão online, sem ter que visitar o showroom. Ela tem dificuldade em encontrar a coleção completa em uma única página (analise competitiva).
Navegar pelas coleções rapidamente. Obter visuais precisos dos produtos. Apresentar o mobiliário para projetos de clientes.
Iniciando o design:
Utilizei wireframes que correspondiam às necessidades do usuário e facilitavam a navegação, posicionando um botão de "ver todas as coleções" logo na segunda seção do website.
Devido ao posicionamento do CTA (Chamada para Ação) principal na seção 2, utilizei um estilo de botão com menor destaque na seção 3.
Ao pesquisar a concorrência e websites mais recentes, observei que a imagem principal (hero image) havia sido substituída por um vídeo.
Sobre nós conciso
Pesquisa informal:
Eu conduzi a pesquisa informal por conta própria: abordei um dos stakeholders e apresentei o vídeo planejado para o hero banner e o protótipo de média fidelidade.
Percebi que ele tinha dificuldade em notar o layout completo abaixo do vídeo, devido à sua altura excessiva na visualização móvel. Assim, reduzi a altura do vídeo, e o layout foi aprovado em seguida.
Insights + Mudanças
Esta foi basicamente a principal alteração, uma vez que os layouts já haviam sido aprovados.
Antes
Depois
Paleta de cores:
Utilizando um insight do livro Design Emocional de Donald Norman, apliquei esta paleta pelo seu toque sofisticado e forte impacto visceral cores que criam uma conexão emocional imediata e elevam a percepção de qualidade do usuário. Paralelamente, utilizei as cores da marca como destaque nos hovers dos botões, mantendo o design ancorado na identidade da marca.
#FFF6EC
Cor de fundo
Escolhida para evitar a fadiga ocular e criar uma aparência sofisticada
Cor da tipografia, evita a fadiga ocular causada pelo preto puro
Cor de destaque, uma das cores da marca
Usada na cor de hover dos botões
#1E1E1E
#00DD00
Utilizei ferramentas com suporte de IA para o código Liquid
Utilizei IA para gerar um código Liquid customizado para o hero banner e, em seguida, o refinei com correções assistidas por IA para garantir a responsividade. Este processo corrigiu problemas de zoom e entregou um layout fluído e moderno, otimizado para diferentes tamanhos de tela.
O Design final
Conclusões
A IA pode acelerar o desenvolvimento, mas ainda exige supervisão humana para garantir a qualidade e a precisão.
Mudanças no orçamento podem ser uma oportunidade para simplificar processos sem comprometer a qualidade.
O planejamento precoce da escalabilidade garante que o design se mantenha relevante à medida que o negócio cresce.