Deco Santana

Portal - Novo BSM

UI Design
UX Design

Services

UX Design
UI Design
Content Reorganization
App Development

Sector

Information Technology

Year

2023

Novo BSM

O BSM (Brasil Sem Medo) decidiu renovar seu portal de notícias como parte de um processo de rebranding para melhor refletir sua identidade e valores. A reorganização do conteúdo, baseada em uma nova identidade visual, foi impulsionada pela necessidade de melhorar a acessibilidade e a experiência do usuário.

Challenges:

01

Desorganização do Conteúdo:

Todo o conteúdo estava agrupado em um dropdown, tornando difícil para os usuários encontrar o que estavam procurando.

02

Diversidade de Mídias:

O portal oferecia uma variedade de conteúdos, como artigos, vídeos e podcasts, mas não havia uma estrutura clara para apresentar essas diferentes formas de mídia.

03

Necessidade de Colaboração Interna:

Era essencial envolver a equipe de criação e produção de conteúdo na reorganização do portal para garantir que a nova arquitetura da informação refletisse suas perspectivas e necessidades.

04

Fragmentação da Experiência do Usuário:

A existência de uma plataforma separada de cursos fragmentava a experiência do usuário, exigindo que os usuários navegassem entre dois sistemas distintos.

Solução:

1. Reorganização do Conteúdo:

1.1_Introdução das categorias “Ler”, “Escutar” e “Assistir” para organizar o conteúdo com base no aspecto sensorial principal de cada tipo de mídia.
1.2_Realização de atividades de card sorting com a equipe interna para compreender como os criadores e produtores de conteúdo pensam sobre a organização do conteúdo e utilizar os resultados para informar as decisões de design e arquitetura da informação do novo portal.

2. Integração da Plataforma de Cursos:

Para oferecer uma experiência unificada e coesa, foi decidido trazer a plataforma de cursos para dentro do portal de notícias.

3. Reestruturação da Arquitetura da Informação:

3.1_Os conteúdos que não se encaixaram diretamente nas categorias “Ler”, “Escutar” ou “Assistir”, conforme inicialmente previsto foram realocados para uma nova seção independente no portal.
3.2_A arquitetura da informação do portal foi atualizada para acomodar a nova seção de cursos

Card Sorting

Foi adotado o método de card sorting fechado. Este método foi escolhido devido à definição prévia das três categorias principais (“Ler”, “Escutar” e “Assistir”) durante a fase inicial do projeto.

UI DESIGN - CONSTRUÇÃO DOS FUNDAMENTOS E ESTILOS

Definição de cores primárias, secundárias, cores semânticas, tipografia e família iconográfica

RESULTADO FINAL

1. Tela de Login

Projetada com foco na objetividade e ação direta. Com uma interface limpa e sem distrações, os usuários são rapidamente direcionados para inserir suas credenciais e acessar a plataforma.

2. Home

A página inicial do portal serve como uma apresentação geral de todo o conteúdo disponível. Abordagem clean e arquitetura da informação cuidadosamente elaborada, proporcionando ao usuário uma interface visualmente atraente e facilmente navegável.

3. Leia

Todo o conteúdo voltado especificamente para leitura se encontra nessa seção.

4. Assista

Todo o conteúdo de vídeo foi colocado nessa seção. Adotando uma paleta de cores escura com o objetivo de proporcionar uma maior imersão ao usuário no consumo do conteúdo.

5. Escute

Todo o conteúdo de áudio foi colocado nessa seção. Para os conteúdos de audio e/ou vídeo foi adotado a mesma paleta de cores escura.

6. Área do Curso

Com o objetivo de oferecer uma experiência de aprendizado envolvente, utilizou-se de uma estética escura para promover foco e concentração.

7. Aplicativo

Interface simples e funcional. Uma extensão da experiência do usuário oferecida pelo portal. Barra de navegação destaca os acessos principais aos conteúdos.