DOIY 30 Day Challenges app
Adaptação de produto físico a produto digital
Este projecto tem como base a linha de produtos “30 Day Challenges” da DOIY Design e em converter os mesmos num produto digital.
A ideia baseou-se em reestruturar e adaptar o conceito do produto para uma versão mobile (app). Este produto físico tem 6 packs diferentes: Happiness, Instaphoto, Fitness, Slow Life, Chef e Seduction; e rege-se por demonstrar por dia uma actividade a realizar, num formato de ‘cartão diário’ ilustrado conforme o tipo de actividade proposta.
Esta adaptação pareceu-me ser a melhor forma de usufruir na totalidade dos packs/challenges mensais da DOIY. Para além de se tornar mais fácil de aceder e transportar, facilita a interacção com o produto, permite registar o percurso todo e partilhar rapidamente nas redes sociais.
Do ponto de vista do negócio, esta adaptação para produto digital irá:
- Alcançar mais consumidores para o produto desenhado pela DOIY;
- Invocar a compra de packs em formato digital por um preço mais baixo que o dos produtos físicos, mas permitindo sempre a compra directa do produto original;
- Expandir o seu alcance nas redes sociais com partilha directa e fácil dos cartões das actividades diárias propostas, sendo sempre acompanhado com o logo da DOIY e com hashtags relacionados com a marca e com o produto.
E do ponto de vista do consumidor:
- Facilitar o acesso dos utilizadores para com o produto;
- Poder obter o conteúdo dos “30 Day Challenges” de forma mais económica e prática, do que a compra/encomenda do produto físico;
- Oferecer ferramentas que facilitem a partilha nas redes sociais e a realização das actividades;
- Inculcar uma espécie de feed social na própria app onde seja possível partilhar o nosso desenvolvimento, e ver o percurso e os desafios dos amigos e familiares.
Ao introduzir a componente social e de gamification (pontos ganhos consoante as acções executadas na app) encorajamos e aliciamos os utilizadores a participar em mais “30 Day Challenges”, de forma aventurarem-se por novas experiências, ganharem mais pontos e terem mais conteúdo para partilhar.
Com tudo isto em conta, passei à fase de delinear as user stories que me pareciam mais importantes focar:
Como novo utilizador
eu quero aceder aos conteúdos da aplicação,
para que eu possa começar a experienciar e a utilizá-la
da melhor e da mais rápida maneira possível.Como utilizador recente
eu quero marcar as actividades como feitas e associar fotos às mesmas,
para que eu possa ter tudo registado e em ordem, como também para poder partilhar no feed e nas redes sociais.
Com base nestas user stories, comecei a estruturar dois user flows, de modo a poder fazer sketches e wireframes, para melhor organizar e arquitectar o conteúdo da aplicação.
O primeiro user flow consiste no onboarding da app. Começando por introduzir a aplicação e as suas features principais em 3 slides de apresentação, culminando na página de sign up e login. Para criar conta é possível fazê-lo associando às suas contas de Facebook, Instagram e Twitter, ou então através do seu e-mail. Após sign up de sucesso, são dadas 3 opções de acesso rápido: para os packs, o perfil ou para adicionar amigos.
O segundo user flow foca-se na perspectiva de um utilizador recente que já comprou um pack e quer registar a actividade do dia como feita e associar uma fotografia da mesma a ser feita, para depois também poder partilhar no feed social e nas suas redes sociais.
Antes de passar à fase do design visual, escolhi focar-me no segundo user flow, pois pareceu-me mais essencial para demonstrar as funcionalidades principais da aplicação móvel.
Para tal, pesquisei e inspirei-me maioritariamente no design da DOIY (website e produto), da app do Behance, do Instagram e da Authentic Weather.
Nesta fase comecei a explorar possíveis app icons, variando entre os diferentes logos da DOIY Design e entre o preto e o branco como cor de fundo e do logo. Ao mesmo tempo ia desenhando splash screens relacionados com cada app icon feita, tendo acabado por decidir pela 3ª hipótese abaixo mostrada, com base na playfulness do “logo-emoticon” que interliga com o tom e o propósito dinâmico da aplicação.
No meio desta exploração de app icons e splash screens, deparei-me com uma animação da DOIY Design postada na página de Instagram deles. Adaptando a animação decidi usá-la como splash screen da aplicação, ficando:
Com inspiração visual e com os wireframes já desenvolvidos, passei a digitalizar e a ajustar os day-tickets e o design dos packs às especificidades necessárias para serem transportos para a resolução do ecrã do iPhone X, ao mesmo tempo que ia refinando o design visual da app.
A style guide baseou-se:
- na tipografia utilizada pela DOIY no seu site e nos produtos em questão;
- nas cores principais da estrutura do site como o branco, cinza escuro e preto, e nas cores associadas a cada pack;
- no design visual minimalista da DOIY Design.
Para melhor explicar e demonstrar o meu protótipo, dividi-o em pequenos user flows, e juntei-os num só vídeo:
Espero que tenha gostado, obrigada! :)
