Estudo de Caso de UX / UI: Anéis de Engajador – Joias Personalizadas de Noivado

Um desafio de design para melhorar a experiência do usuário de um legado familiar no espaço digital.

Sissi Ke Blocked Unblock Seguir Seguindo 6 de janeiro

Função: Design de Experiência do Usuário, Pesquisa do Usuário, Prototipagem

Equipe: Graham Mcfie, Thea Barber, Fahimé Shah

Software: Esboço, Figma, InVision, Keynote, Illustrator, Photoshop

Duração do Projeto: 3 semanas

“A coisa mais íntima que você pode fazer em sua vida é pedir a alguém para se casar com você. Quando você pode capturar a essência de seu parceiro em uma peça de joalheria, é uma maneira muito especial de dizer "eu te amo" – Nick Coutu, fundador da Engager Rings

Nick Coutu, entendeu o valor de anéis de noivado personalizados em tenra idade, sendo criado em uma loja de anel de noivado fundada por seus pais. Ele viu como seus pais trabalhavam para proporcionar uma experiência totalmente personalizada aos seus clientes.

O que é Engager Rings?

Coutu fundou a Engager Rings Corp – um aplicativo nativo e site promocional que conecta pessoas a joalheiros que podem ajudá-las a criar um anel de noivado personalizado exclusivo. É como o Airbnb, mas para joalheiros personalizados. O objetivo de Nick era trazer a experiência única da loja para o espaço digital enquanto complementava as vendas nas lojas.

Abordando o problema

Coutu tinha boas intenções, mas o aplicativo nativo não foi capaz de garantir financiamento estável (como visto no den dragões ) depois de ser lançado por mais de 2 anos. Coutu planejou vender este aplicativo para joalheiros por uma taxa de assinatura, para a promessa de 100 usuários por ano. O problema agora é que o aplicativo não tem base de clientes suficiente para atrair os joalheiros personalizados e vice-versa. Isso, infelizmente, forma uma situação de galinha e ovo.

Nick Coutu no Antro dos Dragões, 2018

Objetivo do projeto

O objetivo da nossa equipe era encontrar oportunidades para melhorar a experiência do usuário do cliente Engager no site e no aplicativo nativo. Também queríamos encontrar oportunidades para aumentar a conversão, seja por meio de downloads de aplicativos ou de novos clientes para a joalheria física. Para fazer isso, devemos aplicar um processo de design centrado no usuário.

Processo de Design Centrado no Usuário

Nosso processo de design

1. INVESTIGAÇÃO

Análise Competitiva: Identificando a relação entre capacidade de design e confiança

Nossa equipe começou nossa pesquisa concluindo uma análise competitiva para entender onde a Engager se encaixa no mercado com seus concorrentes. Nós olhamos para empresas que ofereciam customização zero como a Tiffany & Co., para aquelas que ofereciam personalização completa, como o Engager. Em algum lugar no meio fica James Allen e Blue Nile, que são varejistas on-line que oferecem aos clientes a opção de misturar e combinar os componentes do anel para fazer seu anel personalizado (Fórmula = Pedra + B Banda + Ajuste C = anel).

Análise comparativa de joalheiros de anel de noivado no mercado

Ficou claro que um serviço mais personalizado não significava um cliente mais confiante. A Tiffany and Co., não ofereceu nenhuma customização em seus anéis, mas é vista como superior em relação a joalheiros independentes, como a Engager, mas com o dobro do preço. Isso nos mostrou que a confiança é muito importante para os clientes no processo de compra do anel, mais do que o nível de personalização que uma loja pode oferecer.

Um olhar para o site atual e App: propósito perdido

O objetivo do site Engager é promover o aplicativo, como uma ferramenta para conectar os usuários aos joalheiros que podem ajudá-los a criar um anel de noivado personalizado exclusivo. O cliente pode bater papo por vídeo com o joalheiro correspondente no horário e local mais conveniente para ele.

Site e aplicativo atuais do Engager

No entanto, após realizar uma auditoria de inventário de conteúdo , usando uma plataforma on-line chamada CAT (Content Analysis Tool), descobrimos que havia mais de 135 páginas nesse site promocional. Havia muitos links externos e uma cópia longa. Essa quantidade de informações causou confusão para os clientes, bem como para nossa equipe, quanto ao objetivo principal do site. Este foi um problema para uma start-up que deseja estabelecer confiança com seus clientes.

Auditoria de inventário de conteúdo pelo site CAT of Engager

Google Analytics: Analisando padrões online do usuário Engager

Nossas descobertas da auditoria de inventário de conteúdo foram validadas por meio do google analytics do site Engager. A taxa de rejeição da página inicial parecia um pouco acima da média, possivelmente porque os usuários ficaram sobrecarregados com a quantidade de informações em uma página.

Também foi interessante notar que mais usuários acessaram o site a partir de seu celular do que de um desktop. Isso nos levou a pensar sobre a estratégia 'mobile first'.

Google analytics do site Engager

Entrevistas do usuário: reunindo insights sobre os usuários

Entrevistamos uma variedade de pessoas diferentes, em diferentes estágios do processo de compra do anel personalizado para obter informações sobre suas motivações e pontos problemáticos. Entrevistamos usuários que já passaram pela jornada, que estão procurando ou que estão em um relacionamento e planejam fazer uma pesquisa no futuro. Com esses insights, passamos para a fase de planejamento.

2. PLANEJAMENTO

User Personas: Definindo Usuários Primários

A partir das entrevistas dos usuários, nossa equipe chegou a 2 personagens de usuários: o noivo romântico e a excitada noiva.

Persona 1: Jason, o noivo romântico
Jason é um romântico que quer criar um anel tão único quanto sua história de amor. Sua principal frustração é encontrar um joalheiro experiente em quem ele possa confiar para guiá-lo através do processo, já que pode ser esmagador passar por isso sozinho. Sua principal motivação é ser educado sobre os fundamentos do design de um anel personalizado , para que ele possa tomar uma decisão informada.

Persona 2: Vanessa, a noiva animada
Vanessa está tão animada por se casar com seu namorado de longa data. Ela tem sonhado e planejado para este momento há algum tempo. Sua principal motivação é ter o anel que ela quer para que ela possa contar uma boa história para seus amigos e familiares . Sua principal frustração é encontrar um joalheiro experiente em quem ela possa confiar, para que isso aconteça.

User Personas: Jason e Vanessa

Mapa da jornada do usuário: descobrindo áreas de oportunidade

Nossa equipe mapeou a jornada do usuário de Jason, o noivo romântico, como a rota mais tradicional. Era quase idêntico à jornada de Vanessa com pequenas modificações no primeiro e último passo. Era importante focar nos pontos altos e baixos de sua experiência, para descobrir áreas de oportunidade para melhorar a experiência do usuário.

Mapa da jornada do usuário para Jason, o noivo romântico

  1. ? Ponto baixo: o início da jornada de compra do anel pode ser avassalador e confuso
  2. ? Ponto alto: aprender sobre os anéis por meio de pesquisas on-line e conversar com os amigos, desde inspiração e direção – melhorou significativamente a experiência
  3. ? Ponto mais alto: finalmente encontrar um joalheiro que ele possa confiar para guiá-lo pelo processo

Priorização de recursos com base em principais informações

Nossa equipe resumiu nossa pesquisa e planejamento em três prioridades de usuários principais. Estes estabeleceram as bases para o nosso design.

Lista de priorização de recursos

Prioridades de Usuário-chave:

  1. Construir Confiança – Os usuários querem sentir que podem confiar na experiência e expertise do joalheiro
  2. Aprendizagem / Educação – Os usuários gostam de aprender sobre um anel de noivado como parte da experiência
  3. Contação de histórias – Os usuários querem contar uma boa história com o anel

Então veio o pivô

Neste ponto, ficou claro para nós que as necessidades e desejos dos clientes não eram atendidos pelos atuais produtos Engager: site promocional e aplicativo nativo.

Foi quando tomamos uma decisão crítica de mudar de nossos objetivos originais de design, descartando o aplicativo nativo e reprojetando o website como um aplicativo da Web responsivo.

Isto foi devido às seguintes razões:

  • Concentre-se no primeiro dispositivo móvel – um aplicativo da web responsivo permitiria que os usuários navegassem no website a partir de seu celular, um padrão validado pelo google analytics
  • Não precisa se preocupar com bugs – há menos chances de um aplicativo da web ser afetado por bugs do que em um aplicativo nativo
  • O site é o que os clientes veem primeiro – garantir que os clientes tenham uma experiência agradável no site pode ajudar a Engager a estabelecer confiança e credibilidade, para atrair mais clientes

3. DESIGN

Gif Personalizado

Gif de personalização do anel

O único ponto de venda da Engager em relação a seus concorrentes é que eles oferecem uma experiência e serviço totalmente personalizados. Eles são capazes de criar um anel completamente a partir do zero ou de idéias de forma livre. Eu realmente queria mostrar isso de maneira simples e direta, então criei um gif animado para mostrar o que uma experiência totalmente personalizada realmente significa. Este gif foi adicionado à página sobre

Iterações de wireframe baseadas em testes

Passando para a fase de design, nossa equipe lembrou-se das principais necessidades dos usuários, desde pesquisa e planejamento até a criação de soluções para atendê-las. Também iteramos com base nos resultados dos testes e produzimos 4 versões de wireframes.

Prioridade do usuário principal nº 1: criar confiança – os clientes querem sentir que podem confiar na experiência e experiência do joalheiro

Solução de Design:

  • Clara e concisa – 'Quem é Engager?', 'O que eles fazem?', 'Como eu começo?' Foram todas as questões importantes que queríamos abordar imediatamente na página inicial.
  • Configurar usuários para expectativa cria confiança – mostra o processo Engager na página inicial.
  • Conexão emocional – os clientes estão comprando um anel de noivado, não uma bolsa, então a cópia e as imagens precisam apelar para suas emoções.

Pagina inicial

Wireframes da página inicial

Sobre a página

Sobre wireframes de página

Barra de navegação

Wireframes da barra de navegação

Prioridade do usuário principal nº 2: Aprendizagem / Educação – Os usuários gostam de aprender sobre um anel de noivado como parte da experiência

Solução de Design:

  • A educação básica sobre um anel de noivado – esta é uma prática comum da indústria, no entanto, a maioria dos sites tem como uma seção separada, às vezes escondida no rodapé. Queríamos oferecer educação, mas também direcionar os clientes para a página de design, enquanto temos a atenção deles.

Wireframes de página de educação

  • Quiz inspirador de embarque – os clientes passam por um questionário de 3 minutos para formular suas ideias de design. No final do questionário, há uma solicitação para que eles façam uma conta para salvar seus resultados. Esta é uma transição muito mais confortável do que pedir para eles se inscreverem imediatamente.

Wireframes de teste de embarque

Por meio de testes , descobrimos que algumas das perguntas do teste de inclusão eram muito específicas (ou seja, que tipo de formato de pedra?). Como o objetivo do teste é fazer com que o cliente pense no design, para que ele possa entrar em contato com o Engager depois de criar um perfil para continuar o processo de design, ainda não foi necessário saber os detalhes sobre o anel. Adicionamos uma página de introdução antes do questionário de integração para definir o contexto para que os clientes saibam o que esperar.

Quiz de iteração após o teste # 1Quiz iteração após o teste de # 2

Prioridade chave do usuário nº 3: contar histórias – os usuários querem contar uma boa história com o anel

Solução de Design:

  • Mantenha as histórias dos ringues como referência – isso foi no site original e limpamos o layout para tornar as histórias mais concisas. Clientes como o Jason gostam de ler sobre as histórias dos ringues de outras pessoas para obter inspiração. Também cria confiança para ler sobre as experiências positivas de outros casais com Engager.
  • Apelo às emoções – Mostre cartas de agradecimento escritas à mão de clientes anteriores.

5. PROTÓTIPO

Você pode ver o protótipo no Figma aqui .

Resumo

Após o projeto de 3 semanas, fomos capazes de entregar um site moderno e elegante ao nosso cliente, Engager Rings. Coutu ficou muito impressionado com o nosso trabalho e se sente entusiasmado em apresentar essa nova imagem de Engager aos investidores.

Nossa equipe realmente gostou do desafio de construir uma experiência on-line significativa para uma parte tão importante da vida das pessoas. Aprendemos muito sobre o que converte visitantes em clientes e o que é necessário para levar a experiência pessoal da loja para o espaço digital.

Para os próximos passos, nos concentraríamos em projetar o restante das telas para dispositivos móveis, para garantir a capacidade de resposta. É importante garantir que o questionário de integração seja claro o suficiente para ser visto em dispositivos móveis, para garantir que a experiência do usuário seja consistente em plataformas de desktop e móveis.

Texto original em inglês.