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.

‍

‍

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).

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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?

‍