O mundo através da lente do software

Web app

Jeff nos enviou um wireframe junto com uma visão resumida da nova plataforma. O Quora serviu de referência graças à sua interface limpa, minimalista e envolvente. O público-alvo é uma comunidade de engenheiros de software e pessoas da indústria de TI que frequentemente prefira simplicidade e usabilidade em vez de sinos e assobios.

O objetivo é melhorar as seguintes áreas de fluxo de usuários:

• Permita interações do usuário a partir do feed principal, como votos positivos e comentários.
• Ative a pesquisa contínua na barra de navegação.
• Fornece acesso fácil aos tópicos mais populares na barra lateral esquerda.

Aplicativo iOS

Tivemos a liberdade de propor um layout totalmente novo para o aplicativo iOS. Não apenas nos esforçamos para obter consistência com o aplicativo da web, mas nossa equipe também queria que o aplicativo não fosse pior do que os aplicativos de podcast mais populares, como Overcast, Apple Podcast, ou disjuntor. No entanto, mudar os hábitos do usuário é sempre um desafio. Para incentivar a transição para um novo aplicativo, sua interface deve ser familiar e elegante.

Depois de escolher a paleta de cores e as fontes, nos concentramos em duas telas principais - visualização do feed e do episódio.

Feed

Exploramos alguns conceitos diferentes de apresentação de conteúdo no feed principal.

principais pressupostos:

• Os usuários devem ser capazes de interagir com o episódio sem navegar para a exibição de detalhes do episódio. As três interações cruciais são como (votar positivamente), comentar, salvar para mais tarde (marcador).

Antes/Depois
• O conteúdo da imagem é menos relevante do que o título e serve principalmente para fins visuais (o polegar permite uma distinção mais natural dos episódios subsequentes).
• Um feed de coluna é melhor do que um feed de duas colunas porque a ordem dos episódios é crucial para a navegação. Para coleções não ordenadas, como lista de programas em vários aplicativos de podcast, blocos retangulares em layout de duas colunas funcionam melhor - o que não é o caso aqui.
• Uma célula no feed não deve ser muito alta - o usuário deve ser capaz de interagir com pelo menos três células em uma tela de 5,8 polegadas.
• Os usuários devem ser capazes de ver uma barra de progresso para episódios que foram iniciados, mas não terminados.

Visualização do episódio

Os principais pontos de preocupação na visualização do episódio foram o posicionamento dos botões, o alinhamento do conteúdo e a hierarquia de informações. A tela contém um conteúdo de texto relativamente longo e muitas interações diversas.

Principais pressupostos:

• A miniatura da imagem não é necessária aqui; decidimos colocar o polegar da imagem do convidado do episódio sutil próximo à data, por uma questão de coerência com a versão da web.
• Os usuários devem ver os tópicos do episódio e podem tocar neles para ver programas relacionados.
• A seleção de cores deve permitir uma hierarquia de informações clara.
• Links relacionados e botões de download devem ser visualmente separados dos recursos salvar, votar positivamente e comentar.

Decidimos experimentar o Notion como rastreador de problemas e trocar de Jira para este projeto específico. Desde então, tornou-se nossa ferramenta de gerenciamento de projetos de primeira escolha.

Web

Como estamos construindo sobre a base de código existente, a estrutura de front-end já foi selecionada - Vue.js. Embora o objetivo principal fosse reorganizar o layout do aplicativo, o escopo também incluiu alguns novos recursos. Por exemplo, classificação de episódio por tópicos envolveu a criação de novas entidades de banco de dados e respectivos terminais de API. Levamos duas corridas para colocar o aplicativo em boa forma e classificar o débito técnico. A equipe consistia em dois engenheiros de front-end, um engenheiro de back-end node.js, e um desenvolvedor full-stack sênior que trabalhou como líder de equipe.

Mobile

O trabalho da IU girava em torno da atualização de visualizações existentes e, ocasionalmente, da implementação de novas. Paralelamente, algumas lógicas de negócios exigiam reimplementação, especialmente a parte responsável pela reprodução de áudio.

Para fazer a sobreposição do player corresponder ao padrão da indústria de aplicativos de áudio, decidimos introduzir o padrão de coordenador para navegação. Em última análise, essa decisão levou à implementação da arquitetura MVVM-C em todo o aplicativo para facilitar o novo fluxo.

O novo aplicativo da web foi lançado no início de abril, seguido pela versão iOS chegando à app store em 27 de maio. Downloads e estatísticas de uso que dobraram é uma coisa, mas olhando para o número crescente de votos positivos e comentários nos episódios, é seguro para dizer que foi uma boa chamada para atualizar os aplicativos.