redesign

O Novo Mercado é a mais completa escola de marketing digital do Brasil, com mais de 30 mil alunos a plataforma conta com 17 professores divididos em mais de 300 aulas, são diversos conteúdos agrupados em cursos específicos, cada um criado para atender as necessidades de negócio dos empreendedores.

O Novo Mercado também realiza transmissões ao vivo toda semana sendo abordados diversos assuntos, além de possuir uma super comunidade engajada e também um mercado de trabalho onde os profissionais buscam e oferecem seus serviços, tudo isso e um pouco mais dentro da plataforma.

Entendendo o projeto

Como em todo grande projeto, alinhamos com todas as partes interessadas as expectativas e objetivos a curto, médio e longo prazo. Em reuniões com o pessoal d’O Novo Mercado nós abordamos assuntos específicos que foram cruciais para definirem o nosso fluxo de trabalho, vamos conferir juntos alguns dos assuntos abordados.

Data science

Nada melhor que começar falando sobre dados, para este projeto o nosso time analisou com precisão o comportamento do usuário, apresentamos uma análise inteligente de cliques e diversos outros números que nos trouxeram diversos insights que nos deram insumo para começar o projeto. Para estruturar tudo, foi montada uma dashboard com algumas informações:

Alunos da base
Aulas mais assistidas
Cursos mais vistos
Cursos mais concluídos
Aulas mais favoritadas
Aulas mais comentadas
Churn rate
E muito mais

UX research

Com os números quantitativos em mãos fomos em busca de dados qualitativos, e para descobrir informações preciosas sobre o comportamento dos usuários nós entrevistamos 5 pessoas, esses usuários foram divididos em grupos específicos desde usuários novos até usuários avançados, essas pessoas foram essenciais para que pudéssemos criar uma visão de projeto mais profunda e inteligente, com o usuário no centro já começamos ganhando, e claro, as entrevistas nos renderam inúmeros insights através de relatos reais.

Com toda a gama de dados e insights coletados partimos para a construção da primeira versão de uma home page, com o passar do tempo construímos outros fluxos, componentes e páginas. Tudo isso graças aos dados numerosos e baseado no comportamento do usuário. Em todo redesign seguimos um processo definido e neste projeto não foi diferente, confira o nosso processo de design:

Entendendo o problema
Análise de dados
Pesquisas com usuários
Benchmarkings
Wireframes de baixa fidelidade
Definição de UX writing
Userflow
UI design
Testes de usabilidade
Validações e refinamentos constantes
Análise de dados em produção
Manutenção contínua das soluções

Prazos

Para construir em cima de todos esses processos todos os prazos foram muito bem definidos e acordados previamente, o aval do cliente foi importante para estarmos alinhados.

A plataforma antiga

Uma boa forma de mostrar os resultados é apresentando um comparativo, agora vale ressaltar um problema que a plataforma apresentava, os layouts eram responsivos mas apenas em 2 resoluções, sendo essas resoluções pouco adequadas no enquadramento certo dos dispositivos.

Outro problema impactante era uma grande diferença entre a plataforma web e o aplicativo, os layouts não seguiam um padrão e o usuário tinha muito esforço cognitivo durante o uso.

Design responsivo

Para este projeto construímos um design responsivo, para melhorar a experiência de uso e obte coerência nos dispositivos, começamos pelo mobile first. Criamos nas seguintes resoluções:

Mobile 390px
Tablet 768px
Desktop 1024px
Desktop 1440px
Ultrawide 1920px

Uma styleguide automatizada

Uma das principais discussões do time foi em como iriamos projetar uma styleguide eficaz, precisávamos de um sistema completo de componentes, mas não apenas componentes, visamos a escalabilidade que é algo que O Novo Mercado não tinha antes e por isso criamos uma biblioteca potente baseada em alguns conceitos:

Atomic design
Pixel perfect
Auto layout
Componentização
Variants
Interactive components
Documentação no Notion dos átomos, moléculas, organismos, templates e páginas.

A styleguide criada foi extensa pela gama de componentes, vamos conferir alguns juntos:

Até aqui você acompanhou alguns componentes da styleguide, o restante elementos como botões, header, sidebar… etc, estão em uma gama extensa e foram feitos com maestria, sendo cada componente renomeado de acordo com a sua classe, estilo e função.

Conclusão

O Novo Mercado é um projeto muito satisfatório, por algumas vezes complexo e por outras simples, nosso maior objetivo foi construir tudo isso com o usuário no centro da solução, trabalhando com o que há de mais atual no mundo do design e sempre nos preocupando em mantermos uma linha reta com o branding da marca.

Hoje continuamos trabalhando em cima de novas páginas e componentes enquanto o time d’O Novo Mercado se expande, sem dúvidas todos são profissionais com visão de futuro e o pensamento fundado no comportamento do cliente.

Não teríamos chegado tão longe se não fossem os alinhamentos iniciais, o que permitiu esse projeto ser construído dessa forma foi uma arquitetura bem definida e alinhada desde o início.

Gostaria de deixar o meu abraço a todos d’O Novo Mercado que sempre se colocaram a disposição para manter o projeto de pé e coerente e também agradecer o apoio dos profissionais da eNe soluções, um time que sempre esteve disposto a transformar os produtos digitais d’O Novo Mercado e elevar a experiência do usuário em um nível mais satisfatório.