Case 07 / 11

Opa

Um comunicador leve para o time em home office: presença, conversa e tela numa janela pequena, que não pesa o computador.

Cliente: Opa, produto próprio. Nasceu numa agência de marketing digital em home office, que é o primeiro time a usar
Meu papel: Pesquisa, definição, UX e UI, marca e construção do app
Entregas: Pesquisa, princípios, fluxo e arquitetura, identidade, app web e app nativo para Mac com voz, tela, figurinhas e dock, versão para janela estreita e celular, modo sóbrio

AberturaGravação da demonstração do app: a abertura, a lista do time e a primeira conversa. Pessoas e agência fictícias.

Problema

A conversa de trabalho da agência estava espalhada: a dúvida rápida ia para o WhatsApp, a tela para o Discord, a reunião para o Meet. O celular interrompia, o Discord pesava em máquinas de 8 a 16 GB e ninguém sabia quem estava disponível.

Solução

Um comunicador próprio, leve e compacto, desenhado a partir do que o time respondeu: presença automática, conversa em duas ações, cabines de voz com a tela do colega em um clique e um dock na borda da tela no app nativo. Da pesquisa ao app no ar em quatro dias.

(01)

Pesquisa

Ouvi o time antes de desenhar.

Três slides: o que o time respondeu, o que cada área disse e o que decidi.

Os númerosPerguntas rápidas sobre a máquina, a rotina e o chat. Cada número virou uma decisão.

As conversasFalas simuladas a partir das respostas abertas, por tema.

As decisõesQuatro conclusões viraram oito princípios, e cada um proíbe alguma coisa.

(02)

Processo

Do papo com o time ao app no ar.

As quatro fases, o mapa do app e o caminho da lista até a tela.

ProcessoDescobrir, definir, construir e medir, em quatro dias.

ArquiteturaO app em três níveis: o trilho, as seções e o que mora em cada uma.

FluxoDa lista à tela: duas ações até a mensagem enviada.

(03)

Telas

Pequeno por padrão, grande quando precisa.

O Opa mora numa lista estreita no canto da tela e só abre uma janela ao lado quando a conversa pede. Gravações do app em demonstração; as pessoas são fictícias.

ConversaMensagem, resposta, reação sem notificar, figurinha, um som da mesa e o “valeu” em um clique.

CabineVoz sem câmera. Quem entra aparece embaixo da cabine; sair libera a memória.

PresençaFoco por 30 minutos, que expira sozinho. Cada estado tem uma forma, não só uma cor.

Opa!O toque: quem recebe responde com um clique, e “em 10 min” já vira lembrete.

PausaCafé sorteado e elogio público com figurinha, que vai para a sala e para o mural do mês.

CoresBranco, Cinza escuro e Preto soft. Automático segue o computador.

A lista do Opa: trilho com Conversas, Pessoas, Assistente e Pausa à esquerda, o cartão Bom dia, Ana, as cabines com quem está dentro, toda a unidade e os grupos; à direita, o estado vazio Tudo em dia — ListaA lista: cabines, unidade e grupos. À direita, “tudo em dia”.

Conversa direta com Carla Mendes: mensagem enviada, resposta da colega com reação de joinha, figurinha Bora?, e o campo de mensagem com as respostas rápidas vi, feito e valeu — ConversaA conversa: reação sem notificar e “vi, feito, valeu” em um clique.

O seletor de figurinhas aberto sobre a conversa, com o pacote Opa: Opa!, Bora?, Bom dia!, Café?, Tô em call, Foco, Já volto, Hmm, Valeu!, Show!, Aprovado, Meta batida!, kkkkk, Socorro!, Partiu almoço e Sextou! — FigurinhasAs 16 figurinhas do pacote Opa.

Opa!O Opa!: o toque e a resposta de um clique.

O seletor de status aberto no trilho: Disponível com status automático, Foco, Ocupado, Com cliente, Almoço e Volto já, cada um com durações, e um status personalizado — StatusTodo status manual expira: 30 min, 1 h, até o fim do dia.

A sala Aprovação de artes, restrita à Criação e ao Atendimento, com a mensagem da Carla mencionando a Isabela sobre as três variações do carrossel no Figma — SalaSala com @menção: a mensagem marca quem precisa aprovar.

A sala Ganhos do Comercial com uma celebração: contrato fechado com a Padaria Pão Quente — CelebraçãoCelebração na sala Ganhos: o 🎉 ao enviar.

A seção Pessoas: busca por nome ou cargo, filtros por grupo e a lista de todo mundo com cargo, grupo e a forma da presença — PessoasPessoas: a forma da presença ao lado de cada nome.

A seção Assistente: a IA da empresa, com o campo para formalizar um texto, e os lembretes com os atalhos em 15 min, em 30 min e em 2 h — AssistenteAssistente: lembretes, aviso da agenda e a IA que formaliza e escreve a ata.

A seção Pausa: café de dez minutos com alguém sorteado, aniversários, conquistas do time e o botão Elogiar alguém — PausaPausa: café sorteado, conquistas e elogios.

Dentro da Cabine 1 com a Carla: a barra da sala com microfone, mostrar uma aba do Chrome e sair; o palco mostra quem está na cabine — CabineA cabine: voz sem câmera, a barra da sala e o palco com quem está.

A janela de Preferências: notificações do sistema, ausente automático, agenda do Google, pacote de sons, volume e o som ao enviar — PreferênciasPreferências: tudo o que faz barulho tem interruptor.

(04)

Celular

O mesmo app, na janela de um celular.

Abaixo de 720 px o Opa mostra só a lista, e a conversa toma a tela. Gravações do app em demonstração, no tamanho de um celular grande; as pessoas são fictícias.

ConversaBuscar, escrever, enviar e voltar.

PresençaFoco por 30 minutos e a lista de pessoas.

Opa!O toque, a figurinha e o assistente.

CabineEntrar, ligar o microfone e sair.

O Opa numa janela de celular: trilho de ícones à esquerda, a lista com o cartão Bom dia, Ana, as cabines, a unidade e os grupos, e o aviso da próxima reunião às 10h45 — ListaA lista, com o aviso da próxima reunião.

A conversa com a Carla numa janela de celular: a mensagem enviada, a resposta da colega e as respostas rápidas vi, feito e valeu — ConversaA conversa: o botão voltar e o Opa! no topo.

O seletor de status aberto no celular: Disponível, Foco, Ocupado, Com cliente, Almoço e Volto já, cada um com durações — StatusStatus que expira sozinho.

A lista de pessoas no celular, com filtros por grupo e a forma da presença de cada um — PessoasPessoas, com a presença ao lado do nome.

O seletor de figurinhas aberto na conversa, no celular — FigurinhasFigurinhas do pacote Opa.

A seção Assistente no celular, com a IA da empresa e os lembretes — AssistenteAssistente: lembretes e a IA da empresa.

Dentro da Cabine 1, no celular: a cabine destacada com quem está dentro e a barra escura no rodapé com microfone, tela e sair — CabineA cabine, com a barra no rodapé.

O menu da pessoa aberto no celular, com o status, Preferências, abrir em janela própria, o dock e sair — MenuO menu da pessoa.

(05)

Versão simplificada

Menos espaço, menos barulho.

A janela estreita estilo ICQ, o dock na borda da tela e o modo sóbrio: o app quando o dia pede foco.

CompactoA janela grande vira a lista estreita no canto da tela. A conversa abre ao lado e, ao fechar, só a lista fica.

DockA prévia do app nativo: gavetas que nascem da aba e voltam para ela, e o ímã da borda.

A janela estreita estilo ICQ: só o trilho e a lista, do tamanho de uma lista de contatos — JanelaA janela estilo ICQ: só a lista, no canto da tela.

O modo dock: uma barra fina na borda direita da tela com o símbolo, as seções e você embaixo; o resto da tela livre — DockO dock na borda: a prévia do app nativo, na web.

O dock com a gaveta da conversa com a Carla aberta ao lado, nascendo da aba — GavetaA gaveta nasce da aba e volta para ela.

Modo sóbrioA mesma conquista, com e sem celebração.

A seção Pausa no celular com a celebração do time: confete, estrelas e chapéus de festa sobre a tela depois de comemorar uma conquista — CelebraçãoSem o modo sóbrio: a celebração toca.

As Preferências no celular com o interruptor Modo sóbrio ligado: sem sons, sem animações, sem celebrações — Modo sóbrioO interruptor do modo sóbrio.

A seção Pausa no celular com o modo sóbrio ligado: a conquista é publicada na lista, sem celebração — SóbrioCom o modo sóbrio: a conquista entra, sem barulho.

(06)

Marca

Tudo nasce de uma bolinha: a de online.

O logo são três anéis e a bolinha verde de online. O ícone, as figurinhas e os grafismos usam as mesmas formas, numa tinta e num verde.

O pacote Opa com 16 figurinhas feitas das formas da marca: Opa!, Bora?, Bom dia!, Café?, Tô em call, Foco, Já volto, Hmm, Valeu!, Show!, Aprovado, Meta batida!, kkkkk, Socorro!, Partiu almoço e Sextou!

(07)

Design system

Trinta tokens, oito estilos, quinze componentes.

O sistema que sustenta o app: base branca, contornos finos e um verde só, em três temas. Tudo em CSS puro, a partir dos tokens; as pranchas são os previews reais do sistema.