Reposicionando digitalmente um estúdio fitness durante a pandemia

Após o início da pandemia, a Spin Cycle viu a necessidade de se reinventar, aplicando maneiras diferentes de praticarem suas atividades. Esse fator implicou numa repaginação completa no seu site e a forma como se comunicavam, mostrando o valor e a importância que dão para os cuidados contra a Covid-19, por meio de novas práticas que fossem mais seguras.

Cargo

Product Designer

Cliente

Spin Cycle

Duração

15 dias

O problema

A Spin Cycle é o primeiro estúdio boutique de Brasília, especializado nas modalidades de spinning e funcional, buscando melhorar o condicionamento físico e mental de seus alunos até mesmo durante a pandemia, inovando na maneira como iriam desempenhar suas atividades.

O antigo site da Spin Cycle não só tinha uma estética visual que não representava sua identidade, como se tratava de um simples site institucional que não prendia as pessoas usuárias. Possuía poucas informações relacionadas ao estúdio, atividades que os alunos poderiam realizar, e informação sobre os instrutores.

Em paralelo, a inauguração da Spin Cycle foi de encontro ao início da pandemia causada pela Covid-19, o que fez com que em poucos meses, o estúdio tivesse que fechar temporariamente por conta da aglomeração. Por conta disso, foi necessário criar uma forma de demonstrar os cuidados que a equipe estava tomando para manter a segurança de todos os alunos, além de criar uma forma para que as aulas pudessem continuar acontecendo.

Descoberta

Para entender os problemas e as necessidades por parte do estúdio, me reuni com eles tanto para conhecê-los quanto para ter uma noção maior do que é a Spin Cycle, sua essência, objetivos e metas. Durante a conversa, pude perceber que boa parte dos problemas envolviam um site que não tinha um propósito determinado, e que não combinava com a identidade que estava nascendo.

Benchmarking

Um dos resultados obtidos com a entrevista foram de dois concorrentes do estúdio, que apesar de não serem diretos, desempanhavam alguns papeis semelhantes. Um dos principais pontos levantados é que esses concorrentes já possuíam um bom nível de visibilidade não só presencial, como também digital. Para entender como isso estava sendo trabalhado, iniciei uma etapa de benchmarking, buscando entender as forças e fraquezas com relação somente a como eles estão se promovendo em seus sites.

benchmarking.png

Pesquisa com pessoas usuárias

Por mais que as percepções por parte da cliente, e insights obtidos por outras referências sejam de extrema relevância, tão importante quanto isso é a opinião dos próprios alunos do estúdio. Elaborei um pequeno roteiro para mapear o perfil dessas pessoas e o sentimento que obtiveram até o momento com o estúdio, as pessoas instrutoras e a forma como eles assinam as aulas de spinning ou outras modalidades.

Como o tempo de duração do projeto não era longo, limitei a dois dias para a realização dessa pesquisa, coletando a percepção de 63 pessoas alunas do estúdio. A análise geral dos resultados apontou um apresso enorme não só pela Spin Cycle, como também pela instrutora fundadora da marca. Entretanto, no meio do processo alguns problemas de experiência surgiram para boa parte das pessoas, envolvendo principalmente questões de pagamento. Para organizar cada resposta coletada relacionada ao sentimento que elas possuíam sobre a marca e o serviço, e gerar insights sobre isso, separei elas em quatro categorias: pensando/sentindo, fazendo, dizendo e vivendo/ouvindo.

spincycle-insights.png

Conforme fui organizando as respostas, percebi a semelhança entre muitas delas relacionadas a alguns pontos específicos, o que me fez elaborar um Affinity diagram (Diagrama de afinidade), modelo de pesquisa qualitativa, que me ajudou a organizar de forma mais aprofundada os comentários coletados, criando três categorias: gosto pelas aulas, necessidade dos pacotes e melhoras no corpo.

Essa etapa começou a abrir alguns novos leques de possibilidade tanto para conteúdo quanto funcionalidade para a construção do novo site da Spin Cycle, que melhorassem os fluxos e dessem propósito as informações.

Definição

A segunda etapa foi composta pela reunião de todos os insights obtidos na fase de Descoberta, colaborando para que eu pudesse tomar decisões que colaborassem com as necessidades dos usuários, para que a experiência deles ao conhecer e praticar uma aula na Spin Cycle fosse algo que demonstrasse valor e diferença em seu cotidiano, e ainda se sentirem seguros de praticar um esporte com o início da pandemia.

Persona e jornada do usuário

Para que a experiência do usuário fosse mais precisa para o público-alvo da Spin Cycle, construí uma persona com base nos dados obtidos tanto na reunião de descoberta com a cliente, quanto com as informações coletadas a partir do questionário feito aos alunos do estúdio. Dessa forma nasceu a Bianca, uma administradora de 27 anos de idade, casada, que ama seu trabalho e possui uma boa estabilidade profissão.

Com a persona criada, para que eu pudesse ter uma visão maior de como os usuários encontrariam a Spin Cycle e realizariam as aulas, optei por desenhar uma Jornada do Usuário, que veio de encontro com diversos insights obtidos na fase de descoberta. Essa jornada decorreu de seis ações, indo desde o estresse com atividades físicas até o momento da realização da primeira aula, em que a marcação principal dentro de fluxo focou na visita ao website e a compra de um pacote de créditos para que pudesse participar de, pelo menos, uma aula.

spincycle-journeymap.png

Necessidades

Em seguida, utilizei a técnica Point of View, contando com três pontos de necessidade do usuário, que posteriormente, foram ampliados para sete CP's (Como poderíamos).

Para responder ao CP's, reuni ideias já obtidas conforme o andamento do projeto, que foram validadas tanto com a equipe de tecnologia, quanto com a própria Spin Cycle. O processo final envolveu a priorização de recursos, consistindo num plano dividido em quatro espaços, na qual as ideias definidas seriam dispostas, entendendo o que deveria ser prioritário na criação e desenvolvimento, e o que poderia ficar para futuras atualizações.

Dessa forma, as soluções planejadas para o site, tornando-o mais informativo, dinâmico e útil para pessoas interessadas e alunas foram de criar a interface para assistir as aulas de spinning online; informar sobre a possibilidade de alugar as bikes do estúdio; anunciar as atividades ao ar livre, como forma de contornar a prática em ambientes fechados; e a divisão de pacotes organizadas, bem como um fluxo de compra organizado.

Desenvolvimento

O passo inicial que tomei para o desenvolvimento do produto foi a construção de wireframes das páginas do site, em versão média fidelidade, feitas inteiramente no Adobe XD. Sem grandes mistério com relação a essa etapa, apenas defini a organização e composição dos elementos em cada uma das páginas.

Em seguida, antes mesmo de evoluir o wireframe para um protótipo em alta fidelidade, optei pela construção de um guia de estilo completo para o produto, considerando que os planos futuros era de também construir um aplicativo que estendesse os serviços oferecidos no site, além de já produzir insumo para o desenvolvedor preparar o ambiente antes da construção de todas as interfaces.

Ao trabalhar com as cores, a primeira iniciativa que tive foi de elaborar as paletas de cores que seriam utilizadas no produto, que foram as "brand colors", sendo essa a cor primária do produto, "danger" e "success" para as cores de feedback, e "gray scale" para textos e elementos neutros. Em seguida, usando a regra 60-30-10, organizei o esquema de cores do site em geral, para deixá-lo com a harmônia e contrastes ideais. Dessa forma, decidi que 60% seria branco (#ffffff), 30% a cor mais clara da paleta da marca (#e2f1f3), e os últimos 10% foram divididos nas escalas de cinza.

spincycle-color-palette.png

Com relação a tipografia, a Gotham Rounded foi utilizada seguindo os padrões de identidade da marca, e para criar uma escala hierárquica modular, projetei nove variações, tendo o valor 16 pixels como base, utilizando as escalas 1:1.20 (Minor third) para dispositivos mobile, e 1:1.25 (Major third) para dispositivos desktop.

spincycle-type-scale.png