be.petful

Participei de um desafio feito através do LinkedIn e Instagram. O objetivo era criar um aplicativo de plano de saúde para Pets. Eu fiz algumas adaptações para o que eu achei que seria mais escalável pro app e criei um aplicativo que une várias funcionalidades. Mesmo após o término do desafio, continuei trabalhando nesse aplicativo como um projeto pessoal.

Sobre o desafio

Nos próximos 21 dias, queremos te ajudar a aperfeiçoar suas habilidades através de consistência e feedbacks.
Preparado para 21 dias de desafio de UI?

Para facilitar o fluxo de ideias, trouxemos par você algumas definições:

Vamos focar em telas para mobile, ok?
O aplicativo será sobre um plano de saúde para pets!
A ideia do app é oferecer facilidades para tutores que desejam encontrar veterinários próximos e agendar consultas.

Nos próximos 21 dias, queremos te ajudar a aperfeiçoar suas habilidades através de consistência e feedbacks.
Preparado para 21 dias de desafio de UI?

Para facilitar o fluxo de ideias, trouxemos par você algumas definições:

Vamos focar em telas para mobile, ok?
O aplicativo será sobre um plano de saúde para pets!
A ideia do app é oferecer facilidades para tutores que desejam encontrar veterinários próximos e agendar consultas.

Dia 01 | #desafioui21

Para começar, vamos ao desafio de hoje: você vai construir uma Splash Screen + Tela de Login do aplicativo!
Lembre-se de dar um nome para o seu app e criar um logo.

Quando finalizar as telas, poste na rede social da sua preferência com as hashtags #desafioui1 e #desafioui21.

Para começar, vamos ao desafio de hoje: você vai construir uma Splash Screen + Tela de Login do aplicativo!
Lembre-se de dar um nome para o seu app e criar um logo.

Quando finalizar as telas, poste na rede social da sua preferência com as hashtags #desafioui1 e #desafioui21.

Nome do Aplicativo e logo

Pensando no desafio de criar um aplicativo de plano de saúde para pets, pensei em um logo e nome que representassem bem a ideia do projeto. Fiz algumas pesquisas e benchmarks de logos voltados para a área de animais e saúde, fiz vários testes de ilustrações, textos, fontes, aplicações, tamanhos e cores e cheguei nesses resultados:

Aplicação em fundo claro

Aplicação em fundo escuro

Splash Screen e Tela de Login

Com a ciação e estudos de aplicação do logo, fiz as duas primeiras telas solicitadas no primeiro dia de desafio.

Antes de construir as interfaces, comecei a criar um style guide e definir alguns elementos como cores, fontes, botões, criei alguns componentes, criei alguns padrões e tokens de espaçamento, margins, paddings, borders, shadows e fui aplicando nas telas. Ao longo do projeto, tudo o que eu criei, vi se havia a necessidade dos elementos utilizados virarem ou não componentes e construí as outras telas do projeto.

Com a ciação e estudos de aplicação do logo, fiz as duas primeiras telas solicitadas no primeiro dia de desafio.

Dia 02 | #desafioui21

Criar a tela de cadastro de usuário para o seu aplicativo de celular de Plano de Saúde para Pets.

Lembre-se de manter a consistência visual com as telas anteriores e utilize as cores e elementos já definidos anteriormente, certo? :)

Criar a tela de cadastro de usuário para o seu aplicativo de celular de Plano de Saúde para Pets.

Lembre-se de manter a consistência visual com as telas anteriores e utilize as cores e elementos já definidos anteriormente, certo? :)

Tela de cadastro de tutor(a)

Tela de cadastro do veterinário(a)

Dia 03 | #desafioui21

Chegamos ao terceiro dia do desafio de 21 dias! O desafio de hoje é a tela de visualização do perfil do tutor/animal para o aplicativo de Plano de Saúde para Pets.

Lembre-se de considerar a usabilidade e a experiência do usuário ao projetar essa tela.

Chegamos ao terceiro dia do desafio de 21 dias! O desafio de hoje é a tela de visualização do perfil do tutor/animal para o aplicativo de Plano de Saúde para Pets.

Lembre-se de considerar a usabilidade e a experiência do usuário ao projetar essa tela.

Tela de visualização do perfil do tutor

Tela de visualização do perfil do animal

Dia 04 | #desafioui21

Desafio número 4 chegando pontualmente na sua caixa de entrada!

Hoje você vai criar a tela principal do tutor para o aplicativo de Plano de Saúde para Pets.

Dica: Nesta tela, o tutor poderá visualizar informações importantes sobre os seus pets, como consultas agendadas, histórico de saúde, lembretes e outras funcionalidades relevantes.

Lembre-se de manter a consistência visual com as telas anteriores e utilizar uma abordagem intuitiva para facilitar a navegação e a compreensão das informações.

Desafio número 4 chegando pontualmente na sua caixa de entrada!

Hoje você vai criar a tela principal do tutor para o aplicativo de Plano de Saúde para Pets.

Dica: Nesta tela, o tutor poderá visualizar informações importantes sobre os seus pets, como consultas agendadas, histórico de saúde, lembretes e outras funcionalidades relevantes.

Lembre-se de manter a consistência visual com as telas anteriores e utilizar uma abordagem intuitiva para facilitar a navegação e a compreensão das informações.

Tela principal do tutor

Criar a “tela de cadastro de usuário” para o seu aplicativo de celular de Plano de Saúde para Pets?

Lembre-se de manter a consistência visual com as telas anteriores e utilize as cores e elementos já definidos anteriormente, certo? :)

Criar a “tela de cadastro de usuário” para o seu aplicativo de celular de Plano de Saúde para Pets?

Lembre-se de manter a consistência visual com as telas anteriores e utilize as cores e elementos já definidos anteriormente, certo? :)

Dia 05 | #desafioui21

Continuando o desafio de 21 dias, chegamos ao quinto dia.

Bora criar a tela de busca por veterinário para o aplicativo de Plano de Saúde para Pets?

Dica: Nesta tela, os usuários poderão pesquisar por veterinários próximos, serviços disponíveis, especialidades e outras informações relevantes para encontrar a melhor opção para seus pets.

Lembre-se de priorizar a usabilidade e a clareza na apresentação das informações, para que os usuários possam encontrar facilmente o que estão procurando.

Continuando o desafio de 21 dias, chegamos ao quinto dia.

Bora criar a tela de busca por veterinário para o aplicativo de Plano de Saúde para Pets?

Dica: Nesta tela, os usuários poderão pesquisar por veterinários próximos, serviços disponíveis, especialidades e outras informações relevantes para encontrar a melhor opção para seus pets.

Lembre-se de priorizar a usabilidade e a clareza na apresentação das informações, para que os usuários possam encontrar facilmente o que estão procurando.

Tela de busca por veterinário

Dia 06 | #desafioui21

Continuando o desafio de 21 dias, nessa segunda-feira queremos que você crie a tela com as informações/perfil do veterinário para o aplicativo de Plano de Saúde para Pets.

Dica: Nesta tela, os usuários poderão visualizar informações detalhadas sobre o veterinário selecionado, como especialidades, experiência, avaliações de outros clientes e horários de atendimento.

Certifique-se de criar uma interface que seja clara, intuitiva e apresente todas as informações relevantes de maneira organizada.

Continuando o desafio de 21 dias, nessa segunda-feira queremos que você crie a tela com as informações/perfil do veterinário para o aplicativo de Plano de Saúde para Pets.

Certifique-se de criar uma interface que seja clara, intuitiva e apresente todas as informações relevantes de maneira organizada.

Tela com as informações/perfil do veterinário

Dia 07 | #desafioui21

Chegamos ao sétimo dia do desafio de 21 dias :)

Hoje, o seu foco é criar a tela de agendamento da consulta para o aplicativo de Plano de Saúde para Pets.

Dica: Nesta tela, os usuários poderão selecionar o veterinário desejado, escolher a data e horário disponíveis e confirmar o agendamento da consulta para seus pets.

Lembre-se de criar uma interface amigável, com elementos claros e botões intuitivos, para facilitar o processo de agendamento.

Chegamos ao sétimo dia do desafio de 21 dias :)

Hoje, o seu foco é criar a tela de agendamento da consulta para o aplicativo de Plano de Saúde para Pets.

Dica: Nesta tela, os usuários poderão selecionar o veterinário desejado, escolher a data e horário disponíveis e confirmar o agendamento da consulta para seus pets.

Lembre-se de criar uma interface amigável, com elementos claros e botões intuitivos, para facilitar o processo de agendamento.

Tela de agendamento da consulta

Dia 08 | #desafioui21

Diga oi para o oitavo desafio do #desafioui21 :)

Hoje, vamos criar a tela de remarcar agendamento para o aplicativo de Plano de Saúde para Pets.

Dica: Tenha em mente a usabilidade e a experiência do usuário ao projetar essa tela. Certifique-se de fornecer opções claras e intuitivas para que o usuário possa remarcar facilmente sua consulta.

Diga oi para o oitavo desafio do #desafioui21 :)

Hoje, vamos criar a tela de remarcar agendamento para o aplicativo de Plano de Saúde para Pets.

Tela de remarcar agendamento

Dia 09 | #desafioui21

Hoje é o desafio de número 9! Não é hora de desistir.

A sua tela desafio é tela de avaliação da consulta para o aplicativo de Plano de Saúde para Pets.

Dica: Pense em como proporcionar uma experiência fácil e agradável para que os usuários possam compartilhar sua opinião sobre o atendimento veterinário recebido.

Hoje é o desafio de número 9! Não é hora de desistir.

A sua tela desafio é tela de avaliação da consulta para o aplicativo de Plano de Saúde para Pets.

Dica: Pense em como proporcionar uma experiência fácil e agradável para que os usuários possam compartilhar sua opinião sobre o atendimento veterinário recebido.

Tela de avaliação da consulta

Dia 10 | #desafioui21

Chegamos ao 10º dia de desafio! Já estamos praticamente na metade.

Hoje, a tela que você precisa fazer é a tela de erro para o aplicativo de Plano de Saúde para Pets.

Dica: Aqui você pode pensar em como proporcionar uma experiência agradável para os usuários mesmo quando o app não dá o retorno esperado, como em casos de erro do próprio usuário ou até do sistema.

Chegamos ao 10º dia de desafio! Já estamos praticamente na metade.

Hoje, a tela que você precisa fazer é a tela de erro para o aplicativo de Plano de Saúde para Pets.

Tela de erro

Dia 11 | #desafioui21

Vamos começar o 11º desafio?!

A sua tela de hoje é a tela de pagamento da consulta para o aplicativo de Plano de Saúde para Pets.

Dica: Leve em conta que nessa tela é preciso oferecer diferentes formas de pagamento para proporcionar uma experiência fácil e completa para os usuários.

Vamos começar o 11º desafio?!

A sua tela de hoje é a tela de pagamento da consulta para o aplicativo de Plano de Saúde para Pets.

Dica: Leve em conta que nessa tela é preciso oferecer diferentes formas de pagamento para proporcionar uma experiência fácil e completa para os usuários.

Tela de pagamento da consulta

Dia 12 | #desafioui21

Estamos cada vez mais perto de finalizar o desafio. Hoje, vamos ao 12º!

Domingo é dia de fazer faxina e botar ordem na casa. Então que tal aproveitar para organizar seu projeto também?

Hoje, seu desafio será revisar e criar um styleguide ou biblioteca de componentes do seu projeto.

Dica: Não se esqueça de documentar e padronizar tudo que é importante em um projeto de UI Design: cores, tipografia, botões, campos de input, ícones e todos os componentes que você acredite serem interessantes para compor sua biblioteca do projeto.

Estamos cada vez mais perto de finalizar o desafio. Hoje, vamos ao 12º!

Domingo é dia de fazer faxina e botar ordem na casa. Então que tal aproveitar para organizar seu projeto também?

Hoje, seu desafio será revisar e criar um styleguide ou biblioteca de componentes do seu projeto.

Styleguide / Lib de componentes

Organização do arquivo

Organizei o arquivo separando as telas por categorias, seções.

Telas do protótipo

Interações do Protótipo

Protótipo navegável

Fiz o protótipo com todas as interações possíveis, de acordo com as interfaces planejadas e criadas.

Conclusão

Gostei muito de ter participado deste desafio e de criar esse aplicativo de plano de saúde para Pets. Não consegui participar até o final, durante os 21 dias na época, mas depois finalizei o projeto, como um projeto pessoal.

Eu gostei bastante do resultado e já penso em algumas novas funcionalidades que podem existir, mas ficarão para melhorias futuras, quando sobrar um tempinho para eu me dedicar à isso.

Voltar

Protótipo