CastHood - App de podcasts
CastHood foi uma startup que fui co-fundador. Desde 2011, quando conheci o podcast, fiquei fissurado na mídia e conforme passavam os anos via muitas possibilidades novas que poderiam ser um diferencial, até 2016, quando eu já havia migrado de área de do design, vindo do editorial para o UX, e resolvi eu mesmo começar uma startup.
Nesses 5 anos de vida do CastHood foram muitos altos e baixos, desde calotes, gestão de equipes de desenvolvimento até uma aceleração e investimento que recebemos, mas vou me focar aqui apenas nos aspectos de design dentro do CH.
Nesses 5 anos de vida do CastHood foram muitos altos e baixos, desde calotes, gestão de equipes de desenvolvimento até uma aceleração e investimento que recebemos, mas vou me focar aqui apenas nos aspectos de design dentro do CH.
É válido dizer que assumi o papel de CEO, ao lado de Maristela Weinfurter, como CTO, e que a startup rendeu muitos bons frutos para ambos mas infelizmente foi encerrada em 2021 por motivos mercadológicos.
CastHood was a startup that I co-founded. Since 2011, when I got to know the podcast, I got hooked on the media and as the years went by I saw many new possibilities that could be a differentiator, until 2016, when I had already migrated from the design area, coming from editorial to UX, and I resolved start a startup myself.
In these 5 years of CastHood's life there have been many ups and downs. I management development teams and had acceleration and investment, but I will focus here only on the design aspects within CH.
In these 5 years of CastHood's life there have been many ups and downs. I management development teams and had acceleration and investment, but I will focus here only on the design aspects within CH.
It is worth saying that I assumed the role of CEO, alongside Maristela Weinfurter, as CTO, and that the startup yielded many good results for both but unfortunately it was closed in 2021.
Enquanto UX/UI designer do CastHood todo e qualquer layout que era criado dentro do app passou pela minha mão, desde o aplicativo mobile, nas suas versões iOS e Android, até para os ambientes Web, onde os produtores gerenciavam seus podcasts. Somado a isso ainda tínhamos o website comercial, a identidade visual e peças de divulgação (como vídeos demonstrativos) que eu também criava.
As CastHood's UX/UI designer, each and every layout that was created within the app passed through my hand, from the mobile app, in its iOS and Android versions, to the web environments, where producers managed their podcasts. Added to this, we also had the commercial website, the visual identity and promotional pieces (such as demo videos) that I also created.
App Mobile
O App permitia que ouvintes escutassem seus podcasts preferidos de uma forma inovadora e muito mais imersiva, nosso player contava com sessão de comentários, os canais tinham abas privadas onde poderiam cobrar por conteúdo, fora a gama de possibilidades de personalizar seus podcasts com capa, áudio-trailer, perfil dos membros da equipe e muito mais.
The App allowed listeners to listen to their favorite podcasts in an innovative and much more immersive way, our player had a comment section, the channels had private tabs where they could charge for content, besides the range of possibilities to customize their podcasts with cover art, audio-trailer, profile of team members and much more.
Processo de design / Design process
Desde o início me preocupei genuinamente em solucionar dores reais dos usuários, assim, fiz pesquisas qualitatitvas e quantitativas, ora online ora presencial. Principalmente no início do design do projeto, que ocorreu em 2017 e novamente em 2019 (por causa de uma pivotagem necessária) eu entrevistei pessoalmente casters e ouvintes para entender suas necessidades e dores, e, claro, sempre buscando uma pluralidade de perfis, dentre os casters entrevistados temos desde podcasts iniciantes e pequenos a podcasts grandes como o Um Milkshake Chamado Wanda ou o Braincast. No que diz respeito aos ouvintes eu busquei entrevistar três tipos de ouvintes, os "ouvintes ativos", que diziam ouvir um ou mais podcasts por semana, os "ouvintes que abandonaram a mídia" para entender os motivos por qual a mídia já não servia mais a eles e os "não ouvintes", aqueles que desconheciam o podcast, o que foi útil para mapear hábitos de consumo de mídia relativas.
Para a criação de cada jornada de usuário me utilizava de diversas ferramentas como mapas de empatia, Matriz CSD, pesquisa, personas e etc. E tendo dados partia para o design de telas.
From the beginning I was genuinely concerned with solving real pains of users, so I did qualitative and quantitative researchs, either online or in person. Mainly at the beginning of the project design, which took place in 2017 and again in 2019 (because of a necessary pivoting). I personally interviewed casters and listeners to understand their needs and pains, and, of course, always looking for a plurality of profiles, I have interviewed casters ranging from small and beginner podcasts to large podcasts like "Um Milkshake Chamado Wanda" or "Braincast". With regard to listeners, I interviewed three types of listeners, the "active listeners", who claimed to listen to one or more podcasts a week, the "media-left listeners" to understand the reasons why the media no longer served to them and the "non-listeners", those who were unfamiliar with the podcast, which was useful for mapping relative media consumption habits.
For the creation of each user journey I used several tools such as empathy maps, CSD matrix, research, personas and etc. And having data left for the screen design.
UI design
No que tange a UI sempre me preocupei com diversos itens, são eles:
Regarding the UI I've always been concerned with several items, as:
- Inovação: Acima de qualquer coisa criar UI de uma startup precisa haver um foco em inovação, pois por qual outro motivo um usuário se atrairia para um novo player se não houvessem features inovadoras? E o design é completamente responsável por cassar isso.
- Innovation: Above anything else, creating a startup's UI needs to be focused on innovation, because why else would a user be attracted to a new player if there were no innovative features? And design is completely responsible for clearing that.
- Design visual: O padrão visual entre elementos me levou a criar um Style Guide, onde poderia replicar componentes mantendo a estética do app
- Visual design: The visual pattern between elements led me to create a Style Guide, where I could replicate components while maintaining the app's aesthetic
- Acessibilidade: Todos meus designs passam por medidores de tamanho de fonte, cores, contrastes, e espaçamentos para toques, minha preocupação com acessibilidade é grande.
- Accessibility: All my designs go through meters of font size, colors, contrasts, and spacing for tapping, my concern with accessibility is big.
- Plataforma: Para evitar criar dois designs diferentes, um para iOS e outro para Android, eu padronizei o layout e possíveis gestos no app para o melhor casamento entre as duas plataformas. E isso me gerou um claro trabalho pois a densidade de pixels para muitos elementos era claramente diferente, é algo que vinha sempre Handoff minhas maiores descobertas. Mas fico feliz de ter crescido e muito nessa questão.
- Platform: To avoid creating two different designs, one for iOS and one for Android, I standardized the layout and possible gestures in the app for the best match between the two platforms. And that gave me a clear job because the pixel density for many elements was clearly different, it's something that Handoff always came to my greatest discoveries. But I'm happy to have grown a lot in this matter.
- Tecnologia: Nenhum de meus designs ultrapassavam a linha de conhecimento que nossos desenvolvedores tinham, pois seria um trabalho perdido criar a melhor e mais inovadora das UIs sem que isso pudesse sair do papel um dia, saber as limitações técnicas da tecnologia em parte limita a criatividade mas também ajuda a criar produtos reais.
- Technology: None of my designs went beyond the line of knowledge that our developers had, as it would be a wasted work to create the best and most innovative UI without it ever getting developed, knowing the technical limitations of technology in part limits the creativity but also helps to create real products.
- Regras de negócio: Era minha responsabilidade alinhar as regras de negócio de todas as telas, assim ao final de cada criação eu partia para o User Stories de cada fluxo.
- Business rules: It was my responsibility to align the business rules of all screens, so at the end of each creation I would go to the User Stories of each flow.
Abaixo você pode navegar por algumas UIs:
Below you can browse some UIs:
"CRUDANT"
É um termo criado por mim e minha sócia, vindo de um termo do desenvolvimento chamado CRUD, que nada mais é que "Create, read, update and delete", ou seja, uma forma de pensar que tudo o que envolve uma feature deve funcionar ao ponto de que você possa criar, ler, atualizar e deletar, como por exemplo ao subir um episódio de podcast a feature nunca estaria completa se o que foi feito era somente o "criar o podcast" e o usuário não pudesse deleta-lo em nenhum momento.
Nessa toada toda vez que uma UI era finalizada eu checava se todos os 4 itens existiam nas minhas jornadas, e foi ai que nós vimos uma oportunidade de adicionar novas letras à sigla, pois vimos um Gap interessante. Do mesmo jeito que o CRUD era importante para toda a feature, igualmente importante precisávamos que a feature tivesse "Acessibilidade", "Notificação" e "Tracking", ou seja, dentro do nosso checklist precisávamos garantir que a feature respeitava e estava pronta para ser acessível, verificar se no final da jornada ou durante ela um ou mais usuários precisavam receber notificações em tela, feedbacks, por e-mail ou qualquer que seja, e que também nós enquanto plataforma estávamos mapeando os pontos de rastreamento para entender possíveis erros ou acertos do uso da feature.
Toda essa linha de pensamento nos ajudava a construir features mais completas e a transmitir aos desenvolvedores tudo o que era necessário para que eles programassem.
It's a term created by me and my partner, coming from a development term called CRUD, which is nothing more than "Create, read, update and delete", in other words, a way of thinking that everything that involves a feature should work to the point where you can create, read, update and delete, for example when uploading a podcast episode the feature would never be complete if what was done was just "create the podcast" and the user could not delete it in no moment.
Every time a UI was finalized I checked if all 4 items existed in my journeys, and that's when we saw an opportunity to add new letters to the acronym, as we saw an interesting Gap. In the same way that CRUD was important for every feature, equally important we needed the feature to have "Accessibility", "Notification" and "Tracking", that is, within our checklist we needed to ensure that the feature was ready to be accessible, check whether at the end of the journey or during it one or more users needed to receive notifications on screen, feedbacks, by email or whatever, and that we, as a platform, were also mapping the tracking points to understand possible errors or successes of the use of the feature.
This whole line of thinking helped us to build more complete features and transmit to developers everything that was necessary for them to program.
User Story
O fim do meu trabalho acontecia no User Story, onde, dentro de uma planilha de excel, eu detalhava textualmente cada tela e as interações que aconteciam nela, deixando claro as regras de negócio e tudo o que era necessário que funcionasse para que ela fosse aprovada após programada.
O que eu fazia era apenas a metade do trabalho, pois, a partir daí, minha sócia se apropriava do conhecimento que escrevi e traduzia todas as necessidades para nossos modelos de dados, e, em novas colunas, acrescentava informações que guiavam os desenvolvedores.
O que eu fazia era apenas a metade do trabalho, pois, a partir daí, minha sócia se apropriava do conhecimento que escrevi e traduzia todas as necessidades para nossos modelos de dados, e, em novas colunas, acrescentava informações que guiavam os desenvolvedores.
I finished my work with a User Story, of each feature where, inside an excel spreadsheet, I textually detailed each screen and the interactions that took place on it, making clear the business rules and everything that needed to work for it to be approved after programmed.
In that moment what I did was only half the work, as, from then on, my partner appropriated the knowledge I wrote and translated all the needs for our data models, and, in new columns, added information that guided the developers.
In that moment what I did was only half the work, as, from then on, my partner appropriated the knowledge I wrote and translated all the needs for our data models, and, in new columns, added information that guided the developers.
Plataforma Web / Web app
A plataforma Web tinha um design diferenciado do aplicativo mobile, primeiro pois ela era focada em uma experiência Desktop, mas também para ficar evidente a diferença do tipo de acesso. Abaixo é possível ver algumas telas:
The Web platform had a different design from the mobile application, first because it was focused on a Desktop experience, but also to make clear the difference in the type of access. Below you can see some screens:
Foram 5 anos de projeto.
It was 5 years-project.
Ao todo, 4 anos de designs.
In all, 4 years of designs.
Mais de 100 protótipos.
More than 100 prototypes.
Mais de 1 mil telas para todo o ecossistema do CastHood.
More than 1,000 screens for the entire CastHood ecosystem.
E muito aprendizado!
And a lot of learning!
Obrigado
Thank you