Responsive Editorial: EVO

Amanda Albino
5 min readMar 31, 2021

--

(PT-BR) Esse projeto foi realizado em um sprint de 5 dias

Desenvolvi esse projeto em conjunto com a Juliana Penna.

BRIEFING

Projetar uma plataforma on-line responsiva para uma revista, jornal ou blog direcionada para atender às necessidades e objetivos de uma Persona escolhida a partir de uma pré-seleção da Ironhack.

O objetivo é oferecer uma experiência consistente e envolvente além da documentação necessária para continuação do projeto.

Persona

Dentre algumas personas apresentadas, optamos pela Elaine, uma pesquisadora eco-friendly. Abaixo, mais informações sobre ela.

- Persona: Elaine, 35 anos -

DISCOVERY

Desk Research

Essa etapa foi muito importante para entendermos um pouco mais do cenário atual e para encontrarmos informações valiosas para o desenvolvimento do projeto.

- Fonte: Mental Health Foundation -

Além disso, segundo dados apresentados na revista Nature, a utilização de luz artificial interfere muito na saúde do sono e pode estar associado ao maior risco no desenvolvimento de diversas doenças:

“O Instituto de Medicina dos EUA estima que entre 50 milhões e 70 milhões de pessoas nos Estados Unidos sofrem consequências adversas para a saúde e segurança de distúrbios do sono e deficiência do sono (referência) , incluindo maior risco de obesidade, diabetes, doenças cardíacas, depressão e derrame”.

Dados da Common Sense Media mostram que:

“- 78% dos adultos entrevistados em uma pesquisa passam em média 9 horas por dia em frente às telas”.

Segundo uma reportagem do Governo do Distrito Federal, a OMS por meio do “Relatório Mundial sobre Visão” divulga que:

“Estima-se que 50 milhões de brasileiros tenham problemas de visão e 60% desses casos estão relacionados à cegueira e deficiência visual devido à síndrome da visão, um problema relacionado ao uso prolongado de telas.”

DEFINITION

Problem Statement

Usuários de editoriais online que querem um estilo de vida mais equilibrado, precisam de uma maneira de consumir conteúdo de forma que não fiquem mais tempo em frente as telas.

Hypotesis Statement

Se um estilo de vida desequilibrado pode estar relacionado ao consumo excessivo de telas, então oferecendo um conteúdo híbrido, conseguimos melhorar a qualidade de vida dos usuários, além de promover acessibilidade.

Métrica de Sucesso

Saberemos que estamos certos ao analisar periodicamente o número de cadastros e downloads para uso dessa função.

DEVELOP

Benchmark and Visual Competitive Analysis

Analisamos além dos editoriais que a Persona já consome (NatGeo, New Yorker, Broadly), alguns editoriais que poderiam contribuir com as necessidades e Motivações da Persona. Os temas mais centrais são: autocuidado, autoconhecimento e senso de comunidade/sociedade (Uma Vida Sem Lixo, Modefica, Menos um Lixo.

- Análise de competidores -

Realizamos uma Matriz Competitiva onde posicionamos os concorrentes nos quadrantes de acordo com a proposta de cada um.
Os pontos da matriz foram: o direcionamento/posicionamento do editorial: Pessoal-Comunidade e de acordo com o perfil visual: Neutro-Vibrante.

- Matriz Competitiva -

Dentre muitas possibilidades, decidimos posicionar nossa marca (EVO) em um nicho possivelmente inexplorado.

Arquitetura da Informação

Após definir a posição da marca, desenvolvemos um Site Map e também um User Flow.

Essa etapa foi bastante importante para entendermos os objetivos e definirmos qual seria nosso plano de ação nessa primeira Sprint e assim: PRIORIZARMOS.

Para realmente definirmos como a informação seria distribuída e apresentada aos usuários, utilizamos algumas técnicas como: Brainstorm e Card Sorting. Além delas, uma passo importante foi começar a desenvolver alguns wireframes de baixa resolução (ou rabiscoframes, rsrs). Assim conseguimos visualizar de maneira mais eficiente o que estavamos propondo.

Site Map

- Arquitetura da Informação: SiteMap -

User Flow

Considerando o caso de uso: Usuário já conectado, desenvolvemos o seguinte fluxo:

- User Flow: Usuário Conectado -

Moodboard e Teste de Conceito

Branding

Logo e nome: simples e leve.

Style Tile

O “Style Tile” consiste em fontes, cores e elementos de interface que comunicam a essência da marca.

- style tile: evo -

DELIVER: PRODUTO FINAL

Com base em dados encontrados na nossa Desk Research, optamos por desenvolver nosso protótipo em versão Mobile: Android e posteriormente a versão responsiva para Tablet.

Isso porque, 54% dos usuários consomem conteúdo através de plataformas móveis.

No Brasil o sistema operacional mais utilizado atualmente é Android, com 86% do mercado nacional.

dados obtidos pela StatCounter.

Nossa Proposta

“Usuários de editoriais online precisam de uma maneira de consumir o conteúdo de forma que não precise ficar em frente a telas, porque buscam um estilo de vida mais equilibrado”.

Como entregaremos valor a esses usuários? Nessa primeira sprint, nossa feature principal é: ÁUDIO MATÉRIA.

- tela do app versão mobile: apresentando a feature: ÁUDIO MATÉRIA -

Os usuários podem acessar todo o conteúdo disponível na plataforma no formato “áudio” e ainda possui o tempo de duração.
Além de conseguir escutar imediatamente, o usuário pode realizar o download do áudio para acessar offline! E claro, o usuário consegue Favoritar a áudio-matéria e acessa-la rapidamente a qualquer momento.

Testes

Iterar… Iterar… Iterar…
Testes de conceito, de usabilidade, mais uma vez: O usuário é de extrema importância nessa etapa. Sem esse contato, ficaria muito mais difícil encontrar os pontos de melhora e o que realmente é essencial para entregar o valor necessário.

(em breve mais detalhes…)

- Mid-Fi -
- vídeo do protótipo interativo -

Tablet

- versão responsiva: Tablet -

Em breve divulgarei o protótipo da versão para Tablet.

Next Steps

  • Ferramentas de Acessibilidade
  • Dark mode
  • Assinatura e conteúdo personalizado
  • Fluxos para novos casos de uso

Agradeço a Juliana Penna que mergulhou comigo nessa sprint de 5 dias! Foi muito bom trabalhar contigo e nossa troca foi excelente ♥

Obrigada pela sua leitura, fique a vontade para me mandar feedbacks, sugestões ou marcar um web-café para conversarmos.

Amanda,
LinkedIn

--

--

Amanda Albino

Biologist based in Amsterdam. Discovering a new world at Ironhack Bootcamp: UX/UI Design