fbpx

Como podemos unir doadores a causas sociais durante o período de Pandemia e isolamento social?

Projeto InCausa, de Francielly Maia

Image for post

O problema

Neste momento de Pandemia e quarentena, em uma breve pesquisa, visualizei uma oportunidade relacionada ao problema que Instituições sociais vem enfrentando ao terem que se adaptar ao “Novo normal”. Mudanças provocadas pela necessidade neste momento de distanciamento social, e a redução de doações como forma de arrecadação de fundos para causas sociais, tem afetado drasticamente instituições. Neste contexto, vi uma possibilidade de explorar este tema no Bootcamp de prototipação, porém, devido ao curto espaço de tempo, foi necessário utilizar técnicas de priorização para garantir que o objetivo principal fosse atingido em um período de tempo limitado.

O cenário atual

Em um rápido Benchmark, observei que as soluções digitais atuais em relação a doação e causas sociais, envolvem em sua maioria, ações isoladas ou específicas de doação para campanhas online. Não localizei ações relativas a doações para causas sociais que pensem neste período de crise e distanciamento das relações pessoais.

Image for post

Imersão e definição do Tema

Após nos conhecermos, trabalhamos para escolher um tema do nosso interesse para explorar. Foram propostos alguns temas para exploração, porém, como eu já tinha algumas ideias em mente, decidi seguir com um tema que envolvesse o apoio a causas sociais. Assim, defini que o problema central seria: “Como podemos auxiliar pessoas interessadas em realizar doações para causas sociais durante o período de quarentena”. Esta tambem é uma necessidade pessoal, venho pensado muito em como os serviços podem se adaptar a este novo contexto, me sinto insegura com a retomada de algumas atividades presenciais neste período de pandemia. Com o tema definido, partimos para um rápido brainstorming livre, pensando na exploração de possíveis soluções digitais para o problema em questão. Este foi o maior desafio desta etapa para mim, acredito que o processo de imersão demanda tempo, e pensar rapidamente sobre soluções para um determinado problema, foi desafiador. Saimos da aula com várias ideias e a ansiedade para a construção de todo o processo até a prototipação.

Explorando features, MVP e arquitetura da informação

Image for post

MoSCoW derivado do Brainstorming de features organizado no Miro

MoSCoW

Nesta fase, chegamos apenas com várias ideias, era hora de organizar e consolidar. Utilizamos a técnica de brainstorming novamente, só que desta vez direcionada a pensar nas features do nosso produto, explorando os possíveis recursos. Este foi o momento de pensar nos possíveis usuários da solução e como poderíamos atender as suas necessidades, assim como quais as funcionalidades que precisávamos construir para atingir o objetivo do produto digital.

Image for post

MVP Store construída durante a aula

MVP

Nesta mesma aula, iniciamos o processo de consolidação do nosso MVP, o Mínimo Produto Viável. De forma simplificada, pensamos na entrega de valor do produto usando uma Store app. Aqui a ideia era resumir o produto digital como se ele já estivesse em uma loja de aplicativos. Para isso resumi o objetivo central do produto e pensei na construção do visual inicial das telas. Foi o primeiro momento em que pude visualizar a possível solução digital de uma maneira mais tangível.

User Flow

Seguindo a ultima aula, Mapeamos o nosso User Flow completo utilizando o Figma, como escolha pessoal, decidi tornar mais claro e detalhado este processo, utilizando a ferramenta Whimsical para mapeamento do user flow. Depois da etapa de Ideação, esta é uma das minhas etapas preferidas no processo, visto que, utilizando meu Background de Biblioteconomia, organizar a Informação e pensar no fluxo do usuário ao utilizar o produto, são um dos meus principais interesses.

Image for post

Fluxo do usuário completo

Rabiscoframe

Após mapear todo o User Flow de forma detalhada, foi o momento de pensar nas interfaces principais do produto. Para isso escolhi fazer o rabiscoframe das principais telas, ao pensar na interface de um projeto, gosto sempre de começar pelo papel e lápis. É no esboço que coloco as ideias em prática e vou pensando basicamente em como poderão ser os componentes, botões, menus, e ícones. Aqui vou apagando, repensando e buscando inspirações visuais para compor todo o processo. Pude perceber que o user flow me ajudou muito neste momento, pois eu já tinha detalhado todas as ações e telas necessárias para atingir o objetivo final da solução. Também decidi incluir possíveis insights e detalhes aos desenhos das telas no rabiscoframe, para isso utilizei o Miro. Gosto de durante o processo anotar todos os insights que aparecem, sejam pequenos ou mais significativos, isto me ajuda sempre a compor a solução, seja na etapa de rabiscoframe, ou em qualquer uma das outras etapas do projeto. Sempre volto nas anotações para relembrar pontos e garantir que estou incluindo tudo o que considerei relevante para a solução.

Image for post

Rabiscoframe e insights das principais telas

Construção da interface para o protótipo navegável

Após desenhar as telas principais do app no papel, foi o momento de escolher um caso de uso/jornada principal com base no User Flow, para validar, tangibilizando e dando forma a solução com o protótipo. Aqui decidi escolher o fluxo de cadastro de novos usuários, e o processo básico de acesso, pesquisa e conclusão da doação para uma Instituição. Para isso priorizei a jornada do doador neste processo. Neste momento comecei a pensar na componentização e criação da minha biblioteca de componentes, e quais seriam os estilos visuais iniciais da interface.

Interfaces construídas e algumas considerações

Image for post

Image for post

Image for post

Image for post

Image for post

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Uma das telas projetadas no fluxo de onboarding

Onboarding

A ideia inicial era apresentar, através do onboarding, o objetivo central do app em apenas uma tela, porém, vi que isso tornava o conteúdo simples demais e não apresentava as ideias principais do que era a solução da maneira que eu gostaria de passar para o usuário. O que me fez desenhar mais algumas telas de Onboarding.

Image for post
Tela de cadastro

Login

Decidi priorizar aqui a prototipação do fluxo de cadastro básico, desconsiderando cadastro via redes sociais, ou até mesmo o fluxo de usuários já cadastrados. A ideia central do Login era um fluxo simples e rápido para o usuário, por isso inclui acesso via redes sociais na interface, esta será uma parte desenvolvida na evolução futura do projeto.

Image for post
Tela de escolha de causa social

Escolha de causa social para apoiar

Inicialmente projetei esta parte da interface para criar um fluxo interativo onde o usuário teria a opção de responder a um rápido quizz e saber qual causa social seria indicada para ele, porém, pensando no MVP, tive que mudar esta ideia de interação para uma tela mais simples. Mas ainda quero realizar esta melhoria em etapas futuras a serem desenvolvidas no projeto.

Image for post
Tela de início do app no primeiro acesso

Home

Das telas que eu mais me preocupei na interface, a Home foi uma das principais, desenhei várias vezes como seria a distribuição e arquitetura das informações na tela, e como os cards seriam representados. Mas acredito que melhorias futuras serão necessárias. A ideia inicial era uma home totalmente adaptada ao perfil do usuário, e personalizada conforme a localização e o histórico de doações. Como precisei priorizar conteúdos nesta fase, decidi incluir a home simples no primeiro acesso do usuário ao produto, e uma home preenchida, após doações já realizadas pelo usuário. Porém, acredito que preciso desenvolver melhor a personalização da home futuramente, trabalhando com mais informações conforme ações dos usuários.

Image for post
Tela com detalhes da Instituição selecionada para doação

Doação

Como a ideia principal é garantir doações durante este período de pandemia, o foco do produto é considerar não só doações em valor doado via app, mas também o agendamento de doações no local, garantindo segurança e evitando aglomerações indesejadas. Porém, optei nesta etapa, por considerar apenas o fluxo de doação via app. Em etapas futuras, pretendo explorar as telas de doação via agendamento.

Image for post

Exemplo de parte de comentários e organização do protótipo no Figma

Handoff

Pensando no Handoff da solução etregável para o time técnico, caso este fosse um projeto real e não de estudo, especifiquei no Figma alguns comentários e determinações relativas a interface, também organizei e separei os fluxos do usuário por temas. Em conjunto, fiz algumas especificações de atributos dos elementos como cor, tamanho, e posição. Também deixei detalhado na biblioteca de componentes do meu projeto, as principais variações de elementos como, botões, formulários e tipografia. Este processo ajuda e facilita o trabalho do time de tecnologia ao desenvolver a solução. Testar este tipo de habilidade, me fez ver a importância da entrega da solução de uma forma clara e compreensível a todos, considerando que o processo de design em equipe precisa ser claro para todo o time.

Aprendizados e evoluções futuras da solução

Acredito que todo processo de aprendizado é uma evolução constante, e faz parte da minha personalidade sempre “aprender a apreder”. A ideia é evoluir no processo de aprendizado de UX e UI, para isso ainda são necessárias futuras evoluções, como: ampliar a interface garantindo toda a interação mapeada no User Flow, sendo assim devo desenvolver telas pensando no cadastro de Instituições sociais. Além disso, é necessário criar a interface voltada para doações no local via agendamento, assim como evoluir as telas de doação via app. Como comentei anteriormente, também será necessário alterar as telas de escolha de causa social pelo usuário, garantindo mais opções. Além disso, pretendo incluir mais features ao produto, conforme as que pensei durante o processo de brainstorming e ideação.

“Não é sobre o que é certo, é sobre o que é provável e possível.”

This is Service Design Doing, Marc Stickdorn et al

 

Voltar para blog