Projeto fictício da criação de uma cafeteria com alma coreana, baseada na filosofia do Slow Living.
por Larissa S. Corrêa | UX/UI Designer · UX Writer · UX Researcher · Estrategista de Branding
Como criar uma experiência digital que reflita os valores do slow living e permita que os clientes do Mokko Café encontrem um espaço de calma e autenticidade, enquanto descobrem produtos artesanais e experiências únicas?
Missão (Porquê): "Porque todos precisam de um lugar para respirar."
Conheça os três perfis de usuários que moldaram todas as decisões de design, com foco em inclusão e acessibilidade.
33 anos, Designer Gráfica Freelancer
Objetivo: Encontrar um lugar tranquilo para trabalhar em projetos pessoais.
Dor: Se sente sobrecarregada por notificações e ambientes barulhentos.
Influência no Design
O UX Writing deve ser calmante. Design Mobile-First é crucial. Grande ênfase na Galeria.
"Eu preciso de um lugar que me lembre que está tudo bem desacelerar."-Sofia
22 anos, Fã de K-Culture
Objetivo: Imersão Cultural e ponto de encontro para a comunidade K-Culture.
Dor: Cafeterias temáticas superficiais. Cansaço de locais barulhentos.
Influência no Design
Menu detalhado e seção 'Eventos' crucial. A promessa de 'refúgio suave' é um diferencial de qualidade.
"Eu quero encontrar o melhor 'Dalgona' da cidade e um lugar legal para encontrar meus amigos sem ter que gritar."-Leo
60 anos, Professora Aposentada
Objetivo: Encontrar um café com ambiente acolhedor, informações claras e acessibilidade física.
Dor: Sites com letras pequenas, baixo contraste ou interfaces que a fazem se sentir 'perdida'.
Influência no Design
Foco total em WCAG AA (Contraste) e UX Writing claro. O Design Responsivo deve ser excelente em telas maiores.
"Se eu não consigo ler o site, como vou confiar no atendimento do lugar?"-Helena
Mapeamento visual dos Pain Points em Oportunidades de Design, provando a necessidade de cada decisão de UX.
Sentimento: Curiosidade
DOR: Site é lento/agressivo (Sofia)
SOLUÇÃO UX: Carregamento rápido + UX Writing Acolhedor.
Sentimento: Frustração
DOR: Menu e info críticas estão escondidas (Leo/Helena)
SOLUÇÃO UX: AI clara e Menu visível no Header/Footer.
Sentimento: Confiança
DOR: Baixo contraste/falta de Acessibilidade (Helena)
SOLUÇÃO UX: WCAG AA, Fontes Grandes e Contato em Destaque.
A atmosfera de floresta urbana com jardim interno e luz filtrada é a promessa de valor que o site deve traduzir. Isso guia a escolha de fotos e o UI Design.
.jpg)
.jpg)
O Sitemap, priorizado por utilidade e emoção, garante que as informações essenciais sejam encontradas com 1-2 cliques.
Ponto de entrada emocional e imersão visual (Sofia).
Prioridade máxima (Leo e Helena). Deve ser navegável e filtrável.
Conexão emocional e prova de autenticidade (Sofia e Helena).
Essencial. Inclui Mapa, Horários e Acessibilidade Física.
A voz é Calma e Afetuosa como um amigo sensível. O microcopy foi reescrito para transmitir afeto e evitar urgência.
| Contexto | Abordagem Genérica | Voz Mokko Café |
|---|---|---|
| CTA de Produtos | Compre Agora | Encontre Sua Pausa |
| Empty State | Carrinho Vazio | Seu momento de calma começa aqui |
| Mensagem de Erro | Página Não Encontrada | O Mokko se perdeu. Volte para o refúgio seguro. |
Wireframes em baixa fidelidade, focados em Mobile-First. O layout enfatiza o espaçamento para reforçar a sensação de "pausa". Agora exibidos como mini-apps responsivos.
<!-- MOBILE HOME -->
+---------------------+
| [LOGO Mokko] [Menu] | <-- Header Fixo
|---------------------|
| [IMAGEM HERO] |
| "Encontre sua |
| Pausa." |
|---------------------|
| [CTA: Nossas Lojas]| <-- CTA Fixo
| [CTA: Peça Online] |
|---------------------|
| |
| [SEÇÃO SOBRE] |
| "Nossa História" |
| |
|---------------------|
| |
| [GALERIA FOTOS] |
| (Visual Imersivo) |
| |
+---------------------+
<-- Scroll -->
<!-- DESKTOP MENU -->
+-----------------------------------------------------+
| [LOGO] Home Menu Hist Lojas Contato |
|-----------------------------------------------------|
| |
| [FILTROS] (Sidebar) |
| [Cafés] +-------------------+ +-------------------+
| [Chás] | [IMAGEM PRODUTO] | | [IMAGEM PRODUTO] |
| [Doces] | Título do Produto | | Título do Produto |
| [Salgados] | Descrição breve | | Descrição breve |
| | Preço | | Preço |
| +-------------------+ +-------------------+
| |
| +-------------------+ +-------------------+
| | [IMAGEM PRODUTO] | | [IMAGEM PRODUTO] |
| | Título do Produto | | Título do Produto |
| | Descrição breve | | Descrição breve |
| | Preço | | Preço |
| +-------------------+ +-------------------+
+-----------------------------------------------------+
A paleta terrosa foi aplicada priorizando a leitura. A combinação de Fundo (Cream) e Texto (Dark Brown) garante o Contraste WCAG 2.1 AA (relação 4.5:1), crucial para a Persona Helena (60 anos).
Cream
#FAF7F2
Fundo principal.
Dark Brown
#2C2419
Texto Principal. WCAG OK.
Medium Brown
#684423
Títulos e destaques.
Tan
#D4A574
Botões e acentos suaves.
Light Beige
#E8DFD3
Divisores e fundos de card secundários.
Green Soft
#C9D6B2
Elemento de "Floresta Urbana".
Uso de sans-serif legível (mínimo 16px, line-height 1.6) para o corpo de texto, priorizando o conforto visual.
A validação com usuários (Teste de Fogo) comprovou o design e guiou os ajustes, mostrando o processo interativo.
❌ PROBLEMA (Leo/Helena)
Usuários não viam o horário de funcionamento fixo no rodapé (Mobile).
✅ SOLUÇÃO APLICADA
Movemos o horário de funcionamento para a barra fixa no Header em Mobile, reduzindo o atrito e aumentando a eficiência.
O Branding se estende ao mundo físico. Estes mockups mostram como a identidade visual é aplicada em produtos, reforçando a promessa de "afeto" e "slow living" para levar para casa.
 copiar 2.png)
 copiar 2.png)
 copiar.png)
O design validado foi transformado em um protótipo utilizando HTML e CSS. A construção em código valida a responsividade e a acessibilidade do projeto.
VEJA A SOLUÇÃO EM AÇÃO
Arraste a borda direita do wireframe abaixo para visualizar como o layout se adapta de um dispositivo mobile para um desktop, otimizando a experiência do usuário em diferentes telas. (Mini-app interativo)
Largura atual: 300px | Arraste o handle direito para redimensionar (simula mobile → desktop).
Essa demonstração interativa evidencia a aplicação de princípios de design responsivo, garantindo que o conteúdo do Mokko Café seja acessível e funcional em qualquer tamanho de tela. Em larguras <500px, o layout é mobile (stack vertical); acima, vira desktop (grid horizontal).
O planejamento inclui um passo futuro crucial para complementar a experiência de UX:
O Chatbot forneceria respostas objetivas e rápidas (Leo/Helena) a dúvidas frequentes, mantendo o site principal focado na imersão e Slow Living (Sofia). Isso prova a visão de automação e eficiência do UX.
Este cardápio digital permitirá que os clientes naveguem pelos produtos, vejam detalhes dos itens e façam pedidos de forma intuitiva. Focamos em uma interface simples e visual, ideal para a persona Helena, que busca clareza, e para Leo, que aprecia a facilidade de explorar novos sabores e ingredientes com todas as informações à mão.