Recebi o desafio de conceptualizar a apresentação de um empreendimento e criar uma experiência inovadora para O LEGEND, um prédio luxuoso, cheio de conceitos que deveriam saltar para além dos folhetos em papel e books impressos, puxando todos para uma imersão digital, onde os mínimos detalhes eram claros como o sol, o fazendo brilhar aos olhos de todos. Encantar desde o primeiro piscar de olhos, trazer sentimentos a cada interação e arrancar sorrisos ao final da apresentação.
Todas as apresentações do empreendimento que eram realizadas por corretores, estava sendo feita apenas por conteúdos impressos, como por exemplo o Book Impresso - Versão de Luxo, e o desafio e entregar algo digital mas que transmita todo o pontos positivos e detalhes aos compradores.

Stakeholder são pessoas interessadas no projeto que tem uma contribuição a fazer e com grande influência, nos ajudando a guiar decisões estratégicas. São também importantes fontes de feedback em etapas prévias ao desenvolvimento, auxiliando na validação do real valor de uma entrega.
Abaixo temos um exemplo de como mapear e alinhá-lo, nos ajudando a organizar nosso processo de aprovação de entregáveis, auxílio de decisões importantes, e a quem comunicar atualizações.

Analisando as entrevistas e a grande quantidade de dados gerados, trago algumas informações com grande nível de influência na solução, demonstrando a grande importância de se realizar entrevistas e obter conhecimento. Tivemos um grande nível de interesse por parte dos contactados para as entrevistas, fazendo com que as gratificações fossem uma motivação secundária.

O que vemos é que, embora os books impressos são as opções mais usadas para apresentar um empreendimento, algumas vezes tem conteúdos desatualizados ou incorretos frustrando visitantes. Para os corretores, com a necessidade da transformação digital, o WhatsApp passou ser o canal mais usado para receber e enviar conteúdos para clientes indicados ou visitantes de estandes. Porém, por sempre utilizarem celulares com telas “pequenas” durante apresentações do dia a dia, alguns detalhes importantes de um empreendimento de luxo se perdem nos celulares. Os conteúdos dificilmente são repassados de maneira eficiente para os corretores, e o site do empreendimento nem sempre está atualizado com todas as informações e detalhes. O site tem o objetivo principal de captar leads para campanhas de marketing.

Pesquisamos dados sobre como funciona a venda de outros bens de alto valor e hábitos relacionados ao processo de compra, focado em fatores de decisão em compras. O objetivo era entender como os competidores se comportam no processo de apresentação e fluxo de venda para os possíveis interessados, e ainda descobri que o processo de escolha para compra de um empreendimento de alto valor tem um tempo maior, e tem menos receptividade a compra por impulso. Resumindo, temos uma compra mais racional, onde: localização, proximidades, plantas, detalhes técnicos e diferenciais, podem ser fatores decisivos.
Colocamos como objetivo da Análise de Competidores, ter informações para vencer uma possível concorrência com clientes, e não copiá-los.

Concorrentes diretos são empresas que oferecem a mesma proposição de valor ou muito semelhante para os nossos clientes atuais ou futuros. Isso significa que as Construtoras e Incorporadoras estão gastando seu tempo e dinheiro na estratégia de marketing, usando o produto de um concorrente direto, em vez do nosso produto, para resolver seus problemas de apresentação de empreendimentos - seja eles tendo a melhor interface ou não!

Os concorrentes indiretos oferecem uma proposta de valor semelhante a um segmento de clientes diferente; mas por ter público alvo diversificado, pode incluir sua base de clientes exata sem oferecer exatamente a mesma proposição de valor que a nossa. Por exemplo, o serviço principal de um concorrente indireto pode não ser sua proposta de valor, mas o serviço secundário que ele oferece definitivamente é uma possível solução. Ou então, nossa base de clientes está usando um serviço de design de sites para resolver o problema que nosso produto incrível em breve resolverá!

Os modelos conceituais são feitos para serem bastante abstratos, conceitos criativos nada mais são do que metáforas que designers usam para ajudar as pessoas a entenderem como um sistema deve funcionar visualmente.
A ideia nessa fase é ser livre de algumas coisas que “engessam” o processo. Vamos esquecer regras nesse momento, trazendo experiências de interface mais memoráveis, e trazer um design que faça uma referência a um sistema existente no mundo real.

Como desenvolvemos os conceitos no Figma, obter feedback do time sobre cada tela de conceito é algo fluído e rápido. Obtemos inúmeros feedbacks estratégicos focados em Usabilidade, Constraste para Acessibilidade, Carga Cognitiva dos elementos, e possivel escalabilidade ao avançar do projeto.
Resumindo: O time deixava comentários em inúmeras partes dos conceitos, e respondiamos colaborativamente soluções, para sempre ter o registro das decisões a serem tomadas.

Como 50% dos usuários disseram que dedicam um período lendo detalhes e outras informações, entendemos que uma fonte Display e legível precisava ser aplicada, mas sem perder o conceito do Luxo contemporâneo. Portanto, usamos a combinação da tipografia da família BW Modelica para o títulos e botões, combinando com família da Fonte Aleo, aplicando principalmente a versão Light com maior espaçamento para textos em toda a interface.

BW Modelica

Uma Sans geométrica, mínima, robusta, confiável, suas formas limpas fazem dela uma verdadeira Display. É perfeita para corpo de textos. Disponível em até 64 estilos, incluindo itálico oblíquo.

Aleo

Com um desenho contemporâneo serifado, tendo detalhes semi-arredondados e uma estrutura elegante, dando-lhe uma personalidade forte e mantendo a legibilidade alta.

Para ilustrar melhor todo o conceito do empreendimento, decidimos humanizar a interface. Escolhemos imagens que demonstram um sentimento de seriedade e requinte. Duas fotos principais para a tela inicial foram escolhidas com o propósito de apresentar o efeito parallax, gerando a sensação de constante movimento dos modelos. A foto do menu principal em preto e branco aumenta o nível de contraste com os botões, mas transmite todo o requinte do branding.

A Biblioteca de Componentes, faz parte da ideia de investir tempo no início e colher os benefícios a médio e longo prazo. Organizar e classificar exige um investimento de tempo, mas a médio prazo, toda e qualquer alteração não prevista e necessária é apenas feita no componente principal desenhado e, automaticamente, é aplicada aos filhos desse componente em todo o sistema, poupando horas de trabalho de ajustes.

Aqui seguimos o conceito de organização de Atomic Design em nossos componentes, que funciona como uma linguagem compartilhada entre o design e a programação, que só tem benefícios, reduzindo o tempo de desenvolvimento e como os componente em código são re-utilizados pelo programador durante o processo de desenvolvimento. Temos um ganho de eficiência e reduzem as alterações e mudanças em poucas linhas de código, que refletem em todo o sistema, sem precisar codificar do zero cada objeto no código.

Não é sempre que podemos entregar tudo rapidamente, então usamos o processo de priorização, equilibrando: Negócio, Usuários e Tecnologia.
Usamos a bagagem de conhecimento dos processos anteriores para fazer uma lista de funções que seria entregues no MVP inicial. Com base nas nossas entrevistas lá no início, priorizamos o que vai gerar mais valor para nosso usuário final e, incluímos também, o olhar do time de desenvolvimento, pois cada funcionalidade tem um nível de dificuldade técnica diferente, jogando assim para o final da lista de prioridades tarefas com alto nível de complexidade para os DEVs e baixo nível de valor para os usuários do sistema.

“Mapa da Estrada" organiza as metas e etapas de entrega do sistema, nele podem ser encontradas ainda as datas de início de desenvolvimento de novas features, melhorias e próximas versões, bem como um registro do lançamento.
O Sistema do LEGEND não deve se tornar apenas uma entrega única. Ele deve ser desenvolvido continuamente considerando testes de usabilidade, testes A / B e outras pesquisas detalhadas com o usuário para melhorar a versão MVP inicial.

Ao realizar Teste de Qualidade interno corrigimos bugs, iniciamos o Teste com usuários reais do produto, pedimos os usuários para realizar tarefas específicas: Mostrar a Localização do empreendimento, Explicar as plantas e Enviar o conteúdo por Email e requisitando para narrar sua experiência durante o uso.
Durante os testes, todos se surpreendiam com o Tour Aéreo 360º, onde as pessoas podem movimentar em 360º e ver os pontos importantes nas proximidades do empreendimento, mas esta funcionalidade só fica disponível quando está conectado a internet, mas em grande parte dos Stands de venda, a internet não está disponível nas primeiras semanas da implantação da
Durante uma conversa com o CTO/Programador, realizamos uma melhoria, quando acessamos o setor de Localização, o sistema verifica a conexão de internet, caso a conexão não esteja ativa ou com baixa velocidade, o Tour Aéreo 360º com seu conteúdo e substituído por um Vídeo do Tour girando 180º, com duração de 1 minuto.

Após todas as etapas do processo, essa foi a interface entregue e implementada. Como podemos ver, todos os detalhes saltam aos olhos e transmitem o seu objetivo, que é mostrar em detalhes O Legend como empreendimento de luxo.

Animações são parte importante da experiencia durante a interação dos usuarios com a interface, trabalhamos para que cada novo toque, seja rapidamente respondido, e sempre gerando feedback ao usuario, para que ele veja que suas ações foram recebidas com sucesso.
Microinterações são pequenos detalhes que muitas vezes trazem aquele sentimento e WOW, e isso que desejamos que nossos usuarios sintam, nada melhor que demontrar como realmente funciona:

Na "Proteção de Tela" ou Tela Inicial, não deixamos ser estática, usando as animações a nosso favor, uma transição de imagens ao fundo, e com movimentos leves em cada uma, mas o ponto principal, foi o botão: "Conheça o inimaginável" combinado com um ícone, que remete ao toque, convidando a interação, e incluímos um movimento suave de pressão, gerando um sutil convite para tocar na tela.

Imaginamos: como as telas devem interagir entre sim, e como vamos dar resposta a cada toque. No meu principal, ao ir para outra sessão do menu principal, como "Avalie nosso atendimento", ele e feito com movimento dos objetos, sempre mantendo a foto como centro, e a logo acompanha se redimensionando e mudando de posição. No movimento de transição entre ir do Menu Principal para outras sessões de conteúdo, usamos o Push, uma clara indicação de mudança, combinado com botões com estados bem definidos, animações de pressionado com redução de tamanho, e os que se mantem pressionados até outro toque ou mudança, apresentam mudança de cores, pois eles sem mantem pressionado até o proximo toque.

Sub-menus: são as partes mais complexas do sistema, pois temos inúmeras combinações para o usuário, desde andar com topologia e metragem do apartamento, com isso em mente, dividimos em 3 blocos de conteúdos principais: Implantação, Apartamentos e Tour Virtual 360º - Decorado, quando qualquer um dos blocos e tocado, se expande e abaixo dele outras opções disponíveis, ao tocar outro botão dos 3 blocos principais ele comprime e recolhe as opções apresentadas anteriormente, incluímos também na lateral direita o esqueleto do empreendimento, que muda para mostrar em qual andar do prédio esta a opção selecionada.

O protótipo funcional é usado para testes de usabilidade, apresentando uma prévia de como seria o sistema ou produto após ser desenvolvido. Mesmo com o Figma, ainda temos alguma limitações, como Preenchimento de Campos, 3D e funções externas com APIs. Porém, outras partes brilham os olhos durante a navegação, como animações, transições, microinterações, e a possibilidade de reproduzir .gif durante a apresentação.

*Funciona apenas no PC!

Como durante todos nosso processo de design foi focado no usuário e de quão fácil deveria ser da primeira à última interação com o sistema, que o onboarding foi algo natural e instintivo, sem a necessidade de um tutorial passo a passo. Usamos o máximo de affordances possíveis na sua criação, a fim de reduzir a carga cognitiva no uso.
Normalmente fazemos uma pequena reunião com alguns corretores e damos algumas instruções de como navegar pelo sistema, mas o processo dura em média 5 minutos. O restante é intuitivo, colocando o corretor como parte essencial da fala durante a apresentação roteirizada, sendo o sistema uma ferramenta que auxilia seu trabalho.

Implementamos rastreio das ações dos usuários de forma anônima mas seguindo a LGPD, não sendo possivel reverter o anonimato. Com todas as métricas de tempo de uso em mãos, analisamos e notamos que uma quantidade significativa das apresentações foram iniciadas e seguiram todo o roteiro de apresentação proposto. A demonstração do empreendimento durante a venda se tornou mais dinâmica, mantendo o tempo médio de apresentação/atendimento dos corretores, mas aumentando a felicidade do visitantes do estande. Um ponto importate que tornou o produto um sucesso.
Abaixo temos alguns exemplos de métricas de uso, como a duração da apresentação mais rápido, a média de tempo das apresentações e o tempo máximo que uma apresentação foi concluída. Decidimos não incluir nessa média apresentações pausadas e que ficaram inativas por mais de 5 minutos, mas ao final podemos ver a porcentagem de apresentações que não foram concluídas.

Para avaliar melhor os resultados do produto para o negócio, realizamos uma pesquisa com 43 pessoas do mercado imobiliário, entre elas Diretores de Marketing, Corretores de Imóveis, e Usuários Atendidos nos estandes, para obter informações quantitativas sobre o sistema LEGEND para a Tela Interativa Touch Screen. Tivemos resultados muito gratificantes, junto com muitos elogios para o time. Abaixo vemos os resultados simplificados da pesquisa.