Redesenhando uma nova forma de transformar texto em √°udio ‚ÄĒ caso de estudo de UX/UI

O Soar é uma plataforma online de conversão de texto em áudio, onde existem mais de 150.000 usuários ativos, mais de 500.000 de textos foram convertidos em áudio e tem uma média de 2.500 de usuários por mês na plataforma.

‚Äć

Interface atual do site

‚Äć

O site e a plataforma do Soar foi criado em 2013 e desde ent√£o n√£o havia mais altera√ß√Ķes na interface, apenas mudan√ßas relacionadas a performance. Ent√£o, j√° estava um pouco ultrapassada, e tamb√©m haviam muitos problemas de usabilidade. Embora com a interface n√£o t√£o atrativa, o site atende bastante na funcionalidade (convers√£o de texto).

Interface atual da plataforma de convers√£o

Minha função

Hoje atuo como UX/UI designer para diversos clientes através de serviços de consultoria que a Capyba oferece. Em 2019, quando o Soar fazia parte do catálogo de produtos da empresa, pude trabalhar uma interação de 3 semanas para projetar o redesign tanto do site como da área de conversão e biblioteca de áudio. Esse desafio incluía:

  • Repensar componentes visuais, arquitetura e usabilidade do produto.
  • Criar um produto que fosse f√°cil, intuito e mais agrad√°vel visualmente.

Pensando e programando meu processo…

Sempre fui uma apaixonada pelo processo de design, e minha relação com ele é de constante aprendizado, pois a cada projeto vou aprendendo um pouco mais de como utilizar, testar e aplicar diferentes métodos e técnicas de forma a trazer resultados que auxiliam na construção da melhor solução.

Se você não conhece as principais etapas de um processo de design, abaixo segue uma imagem do processo que utilizamos aqui na Capyba:

Existem v√°rias representa√ß√Ķes do processo de design ‚ÄĒ que podem ter objetivos diferentes, umas com etapas a mais ou a menos, mas basicamente todas incluem: explora√ß√£o do problema, idea√ß√£o, prototipa√ß√£o e teste da solu√ß√£o. Importante salientar que n√£o √© algo linear, que tais etapas est√£o sempre em constru√ß√£o como um ciclo que nunca termina, como mostrado na imagem.

Mas, que métodos utilizar em cada etapa?

Lembro quando era estagi√°ria, meu mentor sempre me dizia que ‚ÄĒ ao iniciar um projeto, sprint, intera√ß√£o ‚ÄĒ eu deveria me preocupar com tr√™s coisas importantes, que tanto impactariam como seria meu processo e tamb√©m o resultado: limita√ß√£o t√©cnica, or√ßamento e prazos. E isso nunca mais saiu da minha cabe√ßa. Unger e Chandler falam um pouco disso no livro ‚ÄĚO Guia para projetar UX‚ÄĚ, que resumi nessa defini√ß√£o:

As limita√ß√Ķes t√©cnicas se referem ao time e ferramentas que possu√≠mos, o or√ßamento que o cliente/empresa tem dispon√≠vel para o projeto e os prazos que teremos para projetar e implementar.

√Č importante ter isso em mente ao planejar quais m√©todos voc√™ ir√° utilizar ‚ÄĒ al√©m de atender as necessidades dos usu√°rios e os objetivos de neg√≥cio. Levando isso em considera√ß√£o, o planejamento para essa imers√£o destacou alguns m√©todos e ferramentas que trariam as informa√ß√Ķes necess√°rias para criar a solu√ß√£o, como:

  • Entrevistas com stakeholders
  • An√°lise de m√©tricas e dados
  • An√°lise Heur√≠stica
  • An√°lise de competidores e inspira√ß√Ķes
  • Sitemap e wireframes
  • Prot√≥tipo de alta fidelidade

Como o tempo era curto, n√£o foi poss√≠vel realizar entrevistas com os usu√°rios naquele momento, ent√£o focamos alguns dos m√©todos como entrevistas com stakeholders e an√°lise de m√©tricas e dados para compreender mais do p√ļblico que utiliza a ferramenta e como utiliza.

Entendendo o produto de olhares diferentes

√Č interessante as diferentes formas de ver o produto a partir das vis√Ķes de pessoas que fazem parte do seu ecossistema, nesse caso, os stakeholders. Essas entrevistas tiveram como objetivo mapear as vis√Ķes das pessoas que participaram da constru√ß√£o do SOAR e tamb√©m identificar as principais dores do usu√°rio final.

Roteiro de perguntas ‚ÄĒ Plataforma utilizada: Milanote

Dentre os stakeholders, o Customer Experience do Soar foi essencial para o entendimento maior dos usu√°rios, j√° que estava sempre em contato com os consumidores, e assim, pode nos repassar informa√ß√Ķes como: quais eram as maiores reclama√ß√Ķes dos usu√°rios, seus anseios e suas dores. Esses insights serviram tanto para corrigir erros de usabilidade, quanto para pensar novas funcionalidades para o futuro.

Alguns insumos gerados dessas entrevistas:

  • Alguns p√ļblicos que foram mapeados a partir do contato com os consumidores pelo CX (Costumer Experience) como: produtores de conte√ļdos para youtube, podcasts, estudantes de concurso e servi√ßos de call center;
  • Alguns erros de usabilidade de feedbacks negativos dos usu√°rios;
  • P√ļblicos que o SOAR almeja alcan√ßar;
  • Novas ideias de funcionalidades;
  • Pontos que devem ser priorizados no redesign;
  • Concorrentes e inspira√ß√Ķes para serem analisados.

O que nos dizem os dados…

Outra forma de obter informa√ß√Ķes acerca do p√ļblico e suas intera√ß√Ķes no site, foi atrav√©s de plataformas de m√©tricas e dados, que complementaram as que j√° t√≠nhamos adquirido com o Customer Sales.

Como √© poss√≠vel observar, grande parte do p√ļblico s√£o de jovens adultos, e grande parte utiliza a plataforma pelo computador. Plataforma utilizada: Yandex.Metrica

Foi poss√≠vel tamb√©m analisar o mapa de calor e de cliques que o site continha, podendo identificar quais √°reas de maior interesse do p√ļblico, e as que n√£o est√£o tendo muito acesso.

Mapa de Calor do site: há um foco na utilização da ferramenta grátis de conversão
Plataforma de convers√£o na √°rea do cliente.

Alguns insumos obtidos dessas an√°lises:

  • Ferramenta gratuita de convers√£o tem maior interesse pelos usu√°rios;
  • Focar na solu√ß√£o desktop (sem deixar de pensar a vers√£o mobile);
  • Grande parte do p√ļblico s√£o jovens adultos.

Entendendo como funciona

Para realizar um redesign de um produto é necessário entender hoje como ele funciona. E também entender o que realmente funciona ou não. E um método que utilizei foi a análise heurística, que nos permitir analisar cada fluxo e encontrar que tipos de heurísticas de usabilidade foi violada, para assim sabermos o que precisamos melhorar. Essa breve análise foi feita levando em consideração as 10 Heurísticas de Usabilidade de Jackob Nielsen.

Parte da tabela da Análise heurística (Plataforma: Milanote)

Um exemplo de heur√≠stica bastante violada foi a de ‚ÄúConsist√™ncia e Padroniza√ß√£o‚ÄĚ, que alguns elementos ou a√ß√Ķes n√£o era correspondentes em diferentes √°reas do site, ou tamb√©m algumas dessas intera√ß√Ķes n√£o seguem padr√Ķes j√° estabelecidas na web.

Exemplo da heur√≠stica ‚ÄúConsist√™ncia e Padroniza√ß√£o‚ÄĚ violada. Ap√≥s converter o texto em √°udio, n√£o aparece o player e nem a op√ß√£o de download tal como acontece na p√°gina inicial, no conversor gratuito.

Como resultado dessa an√°lise, v√°rios problemas relacionados a usabilidade foram encontrados ao violarem algumas dessas heur√≠sticas, que tamb√©m foram confirmadas por alguns relatos de usu√°rios feitos ao Customer experience. √Č importante frisar que nem todos os problemas foram encontrados, pois para realizar uma an√°lise heur√≠stica bem efetiva, √© necess√°rio pelo menos de tr√™s a cinco avaliadores, como o pr√≥prio Nielsen aponta como deve ser feito, para assim, ter o maior n√ļmero de viola√ß√Ķes encontradas e tamb√©m para que possam ser avaliadas em conjunto. No projeto em espec√≠fico n√£o houveram recursos o suficiente para isso, mas foi poss√≠vel encontrar padr√Ķes de erro com os feedbacks relatados nas entrevistas.

Olhando para o lados: analisando os competidores

Desde que o Soar fora lan√ßado, em 2013, muitas plataformas e conversores de √°udios foram lan√ßadas no mercado ‚ÄĒ umas j√° sa√≠ram, outras permanecem. Analisar o ecossistema √© importante para pensar e criar uma solu√ß√£o que se diferencie. Foram analisados cerca de 7 competidores, dentre eles com funcionalidades e modelos de neg√≥cios distintos, com o objetivo de entender como apresentavam a ferramenta, recursos visuais do site e plataforma, funcionalidades, pre√ßos, entre outros.

Screenshots de um competidor (Plataforma: Milanote)

Foi realizado tamb√©m a an√°lise de algumas ferramentas que serviram como inspira√ß√£o para a √°rea de convers√£o. Ferramentas tais que tinham seu foco principal o texto e notas, como Paper e Evernote, e inspira√ß√Ķes de concepts (ilustra√ß√Ķes, layout) para a constru√ß√£o do site, com o objetivo de criar um repert√≥rio visual de tend√™ncias e bons exemplos a se inspirar.

Alguns prints de inspira√ß√Ķes de sites e landing pages (Plataforma: Milanote)

Alguns insumos obtidos dessas an√°lises:

  • Utiliza√ß√£o de ilustra√ß√Ķes como tend√™ncia principalmente para √°reas voltadas a produtos digitais ‚ÄĒ apresentando o produto de forma leve e din√Ęmica;
  • Tipos de ilustra√ß√Ķes mais comuns;
  • Funcionalidades mais comuns e padr√Ķes de uso;
  • Copy e entona√ß√£o de voz utilizado nos principais concorrentes;
  • Forte utiliza√ß√£o do background branco e minimalismo.

Da subjetividade a algo material

√Č assim que penso essa fase: reunir todas as informa√ß√Ķes e insights e come√ßar a formar algo vis√≠vel, os primeiros vislumbres da solu√ß√£o. Uma das primeiras coisas que fizemos a partir das descobertas da fase anterior √© a separa√ß√£o do site e plataforma. Onde o site somente funcionaria para a venda do produto, e a plataforma focada na convers√£o. Isso permitiria tamb√©m a inclus√£o de funcionalidades futuras, e uma melhor organiza√ß√£o delas. Ent√£o surgiram v√°rias ideias de como o site estaria arquitetado e como seriam seus fluxos, atrav√©s de sitemaps e wireframes.

Sitemap com as √°reas principais do site e plataforma (plataforma: Milanote)

Criar wireframes são um dos primeiros passos que nos ajudam a delinear o site e a plataforma e imaginar visualmente como irão ser, e diferentes formas de organização dos elementos. E nos permite validar os fluxos com principais stakeholders.

Wireframes da área da plataforma (papéis colados na parede)

Dando vida ao produto

Antes de come√ßar a dar vida de fato, primeiro criamos os componentes que v√£o dar forma a interface ‚ÄĒ que j√° foram pensadas e mapeadas nos wireframes. Como o Soar √© um produto novo e pequeno n√£o tem um design system, ent√£o criamos um ‚Äėstater kit‚Äô ‚ÄĒ que incluiria a cria√ß√£o dos principais elementos. A equipe de marketing da Capyba criou uma nova logo para produto, que foi uma contribui√ß√£o primordial para esse redesign.

Alguns dos elementos principais da interface

No site foram escolhidas ilustra√ß√Ķes de apoio ao conte√ļdo, sempre representando pessoas realizando algumas a√ß√Ķes que lembrem o principal resultado da plataforma: √°udios de entretenimento, estudo, entre outras coisas. Elementos oriundos da branding tamb√©m fazem parte da composi√ß√£o geral e todo o conjunto, trazendo mais dinamismo ao conte√ļdo. Na home foram adicionados mais chamadas com call-to-action, levando o usu√°rio a se cadastrar no sistema.

Home do site. Plataforma utilizada: Adobe XD

Na √°rea da plataforma um dos principais fluxos que quer√≠amos implementar em contraste com o modelo atual √© a possibilidade dos usu√°rios poderem visualizar o texto que foi convertido em √°udio na mesma p√°gina. Tamb√©m sendo poss√≠vel alterar e gerar um novo √°udio a partir das modifica√ß√Ķes.

√Ārea de convers√£o da plataforma

Na biblioteca atual da plataforma, se encontram todos os √°udios convertidos em apenas um lugar. Nessa nova estrutura, separamos por pastas de forma que o usu√°rio possa separar e categorizar seu conte√ļdo. Outras a√ß√Ķes que hoje n√£o s√£o contempladas como editar o texto, c√≥digo para incorporar em alguma p√°gina e compartilhar.

A partir do play de um áudio, o player ficará disponível e tocando, mesmo que ele saia dessa pasta.

Resultados e Aprendizados

Mesmo com as dificuldades com o curto prazo, os feedbacks foram positivos pelos stakeholders. Particularmente eu amei ter desenvolvido e foi de grande crescimento profissional para mim ao utilizar as técnicas e métodos citados acima, e melhorar minhas habilidades em UI. Em breve as mudanças serão realizadas e com isso os resultados das mesmas.

E ao escrever esse caso pude relembrar alguns aprendizados que tive, e que você pode também levar e aplicar nos seus projetos:

  • Ao programar seu processo, n√£o esque√ßa de pensar nas tr√™s limita√ß√Ķes que o projeto ir√° apresentar: limita√ß√£o t√©cnica, or√ßamento e prazos.
  • Mesmo com o tempo curto, planeje suas atividades de forma a utilizar m√©todos que possam lhe trazer resultados √ļteis para entender o problema e projetar a solu√ß√£o.
  • Se n√£o tiver acesso direto com os usu√°rios, trace uma estrat√©gia que possibilite capturar informa√ß√Ķes e perfis do usu√°rio.
  • Antes de realizar qualquer m√©todo ou ferramenta, saiba quais os objetivos que voc√™ quer alcan√ßar e certifique-se de documentar essas informa√ß√Ķes e uma s√≠ntese ‚ÄĒ para que voc√™ sempre tenha esses argumentos documentados para suas decis√Ķes de design e intera√ß√Ķes futuras.
  • Projetar √© errar e aprender: teste m√©todos e t√©cnicas e aprenda se de fato funcionaram, se atingiu seus objetivos e se n√£o‚Ķ tente novamente! :)

√Č isso gente, obrigada por chegarem at√© aqui, espero que tenham gostado! o/

E quanto a vocês? O que fariam diferente? Que outras técnicas e métodos utilizariam?

‚Äć