Estudo Acadêmico: Helpcenter Xiaomi Brasil
- Riel de Lima
- 1 de out.
- 9 min de leitura
Objetivo
Criar uma página de Suporte para o site da Xiaomi Brasil com foco em entregar soluções mais rápidas e efetivas para o usuário, além de diminuir o seu tempo de procura por uma solução.
Metas a Serem atingidas
Ajudar o usuário a encontrar a solução para seu problema, por conta própria, em nossa página de suporte em até 30 segundos;
Uma página de suporte simples, leve e fácil de ser utilizada;
Comunicação Humanizada para Perguntas muito abertas (Exemplo de pergunta aberta: Meu celular não liga)
Solução
Na construção da processo e das pesquisas, a página de suporte precisou se tornar um Helpcenter, para se adequar aos padrões de necessidades dos usuários frente ao que eles esperam de um ponto de contato digital para o suporte ao consumidor.
Método usado
Descoberta
Desk Research
Antes de começar qualquer ideia de telas, busquei desenvolver uma pesquisa inicial para entender alguns pontos a qual eu não tinha domínio, são eles:
Quem é/ O que é a Xiaomi, quem é seu público e quais são seus produtos.
Entender o que é uma página de suporte, sua importância, bem como o que é importante que exista nela para que os usuários da marca resolvam seus respectivos problemas com ela.
Quem são os concorrentes da Xiaomi e o que há em suas páginas de suporte;
E quais são os atuais problemas da página existente (se houver uma página) e quais os problemas que existem nas páginas da concorrência.
A Xiaomi
A Xiaomi é uma grande empresa de produtos Eletrônicos e de Tecnologia que existe desde 2010 em Beijing na China, onde sua base estratégica de negócio esteve diretamente relacionado na análise de feedbacks de sua comunidade e na implementação dessas melhorias em seus dispositivos, o que gerou o crescimento nos últimos anos de feedbacks positivos da marca. Sua tática, no geral, tende ao não uso de propagandas, mas sim do boca a boca gerado pela própria comunidade da relação de qualidade de seus produtos e melhorias em seus sistemas.
É a fabricante de diversas linhas populares no Brasil, como o Xiaomi A2, Redmi, POCOPHONE, Redmi Note, entre muitos outros.
O público-alvo
Em um estudo de público que foi "vazado" na China, foi possível entender que boa parte do público da Xiaomi estava diretamente relacionado a um faixa de idade dos 20 aos 34 anos. Onde cerca de 69% é predominantemente de homens e 21% de mulheres.
Os Produtos
Além de trabalharem com Smartphones, eles também trabalham com os produtos: MiTalk, um app de mensagens; Mi TV, uma tv com suporte 3D; MiBox, um set-top box; MIUI, seu sistema operacional; MiWiFi, um roteador; MiPower Bank, bateria externa; entre muitos outros produtos.
Suporte ao Usuário
Para compreender melhor a importância da página de Suporte, é necessário entender em que contexto dentro do negócio a página de Suporte tende a ser inserido.
Segundo a pesquisa feita, o Suporte está diretamente relacionado a Experiência do Cliente, na parte de Suporte ao Cliente e Suporte Técnico, que atinge diversos canais, tais quais:
O próprio site;
Ligações;
E-mail;
Redes sociais;
Aplicativos.
Então, o que tende a ser compreendido é: a Página de Suporte de um Site, independente se é eletrônicos, etc., deve estar no site para garantir que o usuário tenha uma opção de suporte e de ajuda para resolver algum problema com o produto/serviço que ele está utilizando.
A relação de suporte ao usuário está mais voltado para uma sistemática em cadeia, do que para uma cargo de apenas um departamento dentro da empresa. Essa sistemática deve envolver todos os stakeholders internos e externos, bem como a compreensão dos possíveis impactos que um suporte efetivo pode gerar no negócio.
A partir disso, uma hipótese foi levantada:
"O objetivo desse projeto não é apenas o desenvolvimento de uma página de suporte, mas sim de um ponto de contato que deve influenciar positivamente a experiência da marca, no sentido de permitir que o cliente consiga se comunicar com a marca, de modo a solucionar seu problema com o produto ou serviço que ele está utilizando."
A partir dessa hipótese, um novo caminho de pesquisa foi levantado, o que gerou uma nova fase de Desk Research. Você pode conferir todos os detalhes dessa e das pesquisas anteriores em profundidade nesse link.
Na conclusão da pesquisa, foi levantada uma nova série de Hipóteses, que vão ser somadas a outra hipótese que surgirá mais a frente, porém, por hora temos:
ndicação dos possíveis canais de contato para que o cliente possa conversar com o suporte;
Clareza na possibilidade de que o usuário pode ser atendido online na hora que quiser, pelo chat do site, ou por ligação telefônica;
Clareza nas informações de que ele pode acessar algum tipo de suporte físico, logo, dando a indicação de locais próximos a ele, seja uma empresa autorizada a dar o devido suporte, seja por um suporte oficial da marca;
FAQ de Fácil acesso;
A possibilidade de refino de dúvidas com base no tipo de produto oferecido pela marca;
Caso venda produtos, uma área explicando todas as informações relacionados a garantias, verificação de originalidade, entre outros itens que tragam confiança ao usuário sobre a procedência do produto comprado;
A importância de ter uma seção para se tornar um suporte técnico oficial da marca na cidade em que atua. ( para os clientes que queiram oferecer esse tipo de serviço).
Benchmark + Design Audit
Nessa fase, analisei alguns dos mais populares concorrentes no Brasil. Confira a seguir a lista de features que foram levantados bem como o comparativo entre eles:
Além do Benchmark, também foi feito uma auditoria em Design, levando em conta 3 fundamentos importante para se analisar um projeto de Design Digital: Leis de Ux, Heurísticas de Nielsen e a Gestalt, confira a seguir todo o estudo feito com as páginas da concorrência, tendo em vista que a Xiaomi no Brasil não possui uma página de suporte:
5W
Ao trabalhar com a técnica dos 5W pude notar algumas hipóteses que me serviram de base para guiar minhas decisões na construção de ideias e soluções de interface. Logo, as hipóteses são:
Uma boa experiência de suporte deixa os usuários mais tranquilos e reforçam suas respectivas confianças nos produtos comprados daquela marca
Ao terem mais confiança com uma marca, os usuários tendem a voltar a comprar produtos daquela marca;
Por um gatilho relacionado a recompra, a marca consegue manter uma base de clientes que respeitam e confiam nos produtos vendidos por elas, gerando um ciclo de compra e recompra, onde a tendência é manter a base de lucro e aumentar a lucratividade com o passar dos anos a medida que novos clientes chegam, sejam por vontade própria, seja por influência de campanhas ou de outros clientes mais antigos.
Os clientes antigos tendem a falar bem da marca a qual eles estão satisfeitos;
Um bom suporte, garante economia de tempo para o cliente e para a empresa, criando uma relação mais otimizada entre as partes;
Uma página de suporte é útil para ajudar o cliente a entender melhor o produto comprado, atualizar o produto caso necessário, bem como saber o que fazer para consertar esse produto e qual assistência contactar para levar seu produto, caso necessário.
Com isso, optei por encerrar essa fase e começar a partir para a próxima fase, a de Definição final e do direcionamento que será tomado para a estruturação da página de Suporte do Site da Xiaomi.
Definir
Proto-persona
Foram criados 3 proto-personas com base nos dados levantados anteriormente, que serviriam de base para a construção das pesquisas quantitativas e qualitativas. Desse modo, vamos ter informações mais claras e relevantes para a construção de duas personas de base para a projeção de soluções para esse projeto.
Resultados das pesquisas
Update do Benchmark:
Através das entrevistas, foi observado que um concorrente não havia sido mapeado, sendo assim, se fez necessário inseri-lo no benchmark. O principal motivo da inserção da Asus, foi alguns insights gerados relacionados ao modo como organizam a página e amnbiente de suporte.
Definição de Personas, Mapa de Empatia, Jornada, Needs Statements
Ideação
Must Haves
Com base na pesquisa, detectei alguns itens que, ao serem mapeados no benchmark e somados as informações coletadas na pesquisa com os users, pude gerar um quadro de itens que seriam importantes para eles, em um helpcenter.
Brainwriting
Através dessa técnica de geração de ideias, pude trazer a tona ideias voltadas mais para estruturas e algumas funcionalidade extras baseado no que os users indicaram em suas dores e vivências, bem como ideias voltadas para simplificar suas jornadas.
Grid de Priorização
Através dessa ferramenta, pude priorizar ideias que seriam inseridas no primeiro momento e que teriam um grande impacto para o usuário e que sejam altamente viáveis do ponto de vista de negócios.
User Tasks
Através de todo o processo de pesquisa anterior, além do processo de geração de ideias, pude definir algumas tarefas do usuário baseado nos requerimentos da solução somados aos desejos dos usuários, desse modo, chegamos a 3 tasks fundamentais que precisariam ser medidas:
Pesquisa do Problema no FAQ na versão do Campo de busca;
Contato com o Chat Online;
Busca por Tópicos para Suporte Técnico Presencial;
Site Map e UserFlow
Através das informações geradas pela ferramenta Must Haves, dos insights de pesquisas, Benchmark e a priorização das ideias definidas pelo Brinwriting + Grid de Priorização, pude chegar a uma estrutura base informacional de como deveria ser a Arquitetura da informação da Pagina inicial do helpcenter, bem como os desdobramentos das páginas que vão ser necessários.
O Userflow trata-se de uma técnica que permite termos uma visão geral de como a arquitetura da informação vai funcionar de fato, para onde o usuário vai ser direcionado e quais caminhos são os melhores para que ele consiga chegar aos seus objetivos e tarefas. Confira o fluxo interativo construído no Figma no link a seguir:
ou visualize uma imagem geral a baixo.
Wireframing
Após a definição das ações principais no site e do userflow do site, podemos dar andamento ao wireframing de baixa fidelidade, de modo a visualizar rapidamente como irá ficar a estrutura da página principal, bem como de algumas páginas conectadas a ela.
Para não ficar perdido na quantidade, optei por montar um checklist das páginas necessárias para a estrutura geral do Helpcenter:
Home
Resultado da Pesquisa
Página da Solução
Suporte por Produtos
Seleciona o produto
Suporte Presencial
Softwares & Drivers
Vídeos Tutoriais
Página de solução específica de Vídeo
Garantias e taxas
Enviar para Reparo
Sustentabilidade
Sketchs + Wireframes
Após definido como iria ficar a estrutura nos sketchs, segui para a construção de uma estrutura mais próxima do ideal dentro do Figma, confira no link a seguir, ou visualize a imagem a baixo:
Teste de Usabilidade
Após a conclusão do wireframe, optei por montar um protótipo com as telas a cima de modo a entender, antes de seguir para uma versão em alta fidelidade, como está a funcionalidade geral, sem os elementos que vão compor melhor as informações do site.
Sendo assim, foi definido um Script inicial que foi integrado junto ao protótipo através da ferramenta Maze.Design.
Confira a seguir o relatório do teste de usabilidade: [ Relatório ]
Esse primeiro teste leva em conta o foco no uso e na rápida compreensão da solução por parte dos usuário. Caso eles consigam "caminhar" pela solução através de um caminho lógico e claro do ponto de vista dele, significa que a solução está cumprindo com os objetivos inicialmente estabelecidos:
Ajudar o usuário a encontrar a solução para seu problema, por conta própria, em nossa página de suporte em até 30 segundos;
Uma página de suporte simples, leve e fácil de ser utilizada;
Comunicação Humanizada para Perguntas muito abertas (Exemplo de pergunta aberta: Meu celular não liga)
Spin-offs
Antes de partirmos para o visual, primeiro será definido o tom de voz da marca desse modos vamos cumprir o terceiro objetivo desse projeto, que é a humanização da comunicação da marca. Para tal, será necessário definir um conjunto de arquétipos para a marca, bem como a criação de uma persona que irá unificar esses arquétipos, onde com isso, teremos uma maior chance de identificação e representatividade por parte do público-alvo.
Com uma Persona Definida e bem conectada a seus arquétipos, teremos a definição clara de um tom de voz único e envolvente, que irá repercutir no Branding Visual e Verbal da Marca.
Visual Design
Nessa fase, é onde pude trabalhar as cores, padrões de ícones, padrões da tipografia, elementos gerais entre outros aspectos visuais do universo da marca.
Styleguide
Nessa fase, foram organizados todas as informações relacionados ao universo da marca, suas cores, detalhes visuais, tamanhos de fontes, botões, entre outros detalhes.
Também pude desenvolver as ilustrações dos celulares da marca do zero.
Acesse o link para visulizar o styleguide o veja a seguir:
ou visualize a imagem geral a baixo.
Versão Final
Após a aplicação do layout final, o fluxo de do protótipo foi organizado para ser apresentado em mais uma rodada de teste de usabilidade.
Confira os links para os arquivos a baixo, ou veja as imagens a seguir:
va
Conclusão
Toda a jornada de construção, desde a fase inicial de entendimento da importância e o nível de necessidade de uma boa página de suporte, bem como nas pesquisas com os users onde pude compreender a importância de valorizar o tempo deles, bem como buscar sempre um modo de facilitar seus respectivos contatos com algum nível de suporte, seja por conta própria através de pesquisa no site, ou mesmo, através do chat online ou via contato por telefone, e-mail ou whatsapp, foram descobertas fortemente esclarecedoras e que, certamente vou carregar para outros projetos.
Tive um sólido desenvolvimento na parte de pesquisas, pesquisas através de formulários, bem como entrevistas com um certo tom de conversa natural onde pude extrair dados extremamente relevantes. Somado a isso, pude compreender a importância de definir pontos importantes e que não podemos abrir mão quando se trata de algo fortemente praticado pela concorrência, e altamente requisitado pelos users.
Por fim, compreender a força visual de uma marca global, bem como a importância da simplicidade de sua comunicação como um todo, ao unir esses dois polos temos uma solução clara, leve, simples, objetiva e de fácil usabilidade para diversos perfis de users.
No geral, meu objetivo foi de atingir os requisitos impostos no início do projeto, porém visando trazer algo leve e fácil para qualquer pessoa utilizar sem se sentir perdida ou sobrecarregada cognitivamente.
Obrigado por acompanhar até aqui. 🙂
Comentários