Um concierge que trabalha com IA

Uma tela de trabalho para a Chef Concierge de um hotel de luxo. A IA cuida de 40 estadias sozinha. Ela vê só o que precisa de uma pessoa.

"A IA consegue achar dois barcos. Só a Sofia sabe que domingo é o aniversário deles."

Ações

O processo em 6 etapas

1. i
   Explorar três conceitos. Uma fila de intervenções, um quadro da jornada do hóspede e uma visão por quartos. Defini uma regra: se dois conceitos respondem à mesma pergunta, são um conceito em dois layouts.
2. ii
   Decidir com critério. Escolhi a fila porque a unidade na tela é exatamente o momento que precisa de uma pessoa. A estadia inteira aparece em volta do pedido, e o mapa da casa vira a coluna lateral.
3. iii
   Definir o modelo de autonomia. Quatro níveis. A IA faz. A IA faz e avisa. A IA propõe e você decide. A IA nunca faz.
4. iv
   Prototipar em código. Um protótipo navegável com todos os estados e um painel para avançar o tempo.
5. v
   Construir o design system. No Figma, com atomic design. Brand, foundation, átomos, moléculas, organismos, templates e páginas.
6. vi
   Montar 19 telas a partir da biblioteca. Um arquivo separado feito só com componentes publicados, e um Storybook com os mesmos nomes de tokens.

O espaço de trabalho · Filtrar, comparar, decidir

A fila mostra pedidos, não hóspedes. Dos 40, só quatro aparecem em "Needs you". O número do quarto abre cada item, porque é assim que um concierge pensa. A fila é ordenada por quando agir, não por quando vence. O card do barco compara A e B nas linhas que importam: preço, horário, privacidade e o que o hóspede precisa fazer. Os €400 acima do orçamento ficam marcados. O e-mail já está rascunhado, mas não enviado.

Um fato muda tudo

O aniversário estava só na cabeça da Sofia. Ela adiciona em "What we know" com o tipo, a data e a fonte. Um fato entra e a estadia inteira é replanejada. A opção privada vira o passeio do aniversário. O spa é avisado e mantido sem perfume para a Clara. Cada mudança diz quem age. O aniversário fica salvo, então no próximo outubro a IA percebe sozinha.

Corrigir a IA e enviar

A IA ofereceu jantar no domingo, mas a Sofia sabe que o casal já janta lá no sábado. Ela remove da proposta. O e-mail abre num dialog, com azul marcando cada parágrafo que mudou. Ela pode editar qualquer coisa. Um clique envia.

Refinamento visual · Luxo pela contenção

A primeira exploração era cinza de propósito. Fonte do sistema, preto no branco, uma caixa em volta de tudo, para julgar a estrutura sem estilo. Escolhida a fila, a pergunta mudou: como uma casa cinco estrelas deve se sentir na tela? A resposta foi contenção. Papel quente no lugar do branco, tinta no lugar do preto, filetes no lugar de caixas. A maior parte da tela fica em silêncio, então a pouca cor que resta sempre significa algo.

A tipografia dá o tom. Cormorant Garamond, uma serifa clássica, leva os nomes dos hóspedes, os quartos, os preços e os momentos que importam. Hanken Grotesk faz o trabalho: horários, rótulos e ações, pequenos e precisos. Rótulos em caixa alta com espaçamento largo trazem a ordem calma de um balcão de concierge.

Uma cor, um significado. Bordô, a cor de uma carta de vinhos, marca só o que precisa da concierge e nunca vai em botão. Azul é só da IA. Cinza é concluído. Botões e campos são quadrados porque agem, tags e status são redondos porque rotulam. O nome do hotel abre a tela, com "Powered by Aurelia" no rodapé, para o produto vestir a marca de cada casa.

Design system · Aurelia DS

O refinamento virou sistema, para se manter em todas as telas. Brand guarda os valores crus, foundation dá significado a eles e os componentes carregam as regras. As 19 telas foram montadas só com componentes publicados, e o Storybook usa os mesmos nomes de tokens das variáveis do Figma.

Botões

Tags de origem

Tokens da foundation