Estudo de caso — redesign do layout NerdStore

Débora Martins
Dec 7, 2019 · 9 min read

Sempre admirei e acompanhei a trajetória do blog do Jovem Nerd e do seu e-commerce, a NerdStore, a qual começou com produtos principalmente autorais e vinculados aos conteúdos de podcasts e vídeos, que conseguiu expandir se tornando em loja virtual com temática nerd / geek.

O e-commerce sempre seguiu uma linha visual bem específica, baseado em tons de cinza escuro assim como as outras partes do site, mantendo a unidade visual da marca, sempre com artes bem trabalhadas de cada produto. A parte de hierarquia de informação era bem estruturada, fazendo o fluxo de uso ser simples e fácil.

Imagens da primeira dobra do site em 2016 e 2018 respectivamente (imagens geradas no arquivo do WayBack Machine)

Recentemente a NerdStore completou seus 12 anos e, com isso, foi feito um trabalho de redesign em sua plataforma. Gostei bastante da iniciativa, porém sob a ótica de UX podemos trabalhar ainda mais em alguns pontos para poder atender melhor as boas práticas de usabilidade.

-Em tempo: os prints desse artigo foram tirados no mês de aniversário e assim que foi feita a mudança de layout. Atualmente a store está com algumas cores diferentes, mas algumas dos apontamentos se mantêm. -

Me deparei com esse novo design através da newsletter que recebo do site e, após navegar por algum tempo nele, comecei a analisá-lo pela ótica de UX e não somente como usuária e cliente.

Este é um estudo de caso, ou seja, uma análise que tem viés de estudos e pesquisa de referência para de pontos de melhoria e sugestões. Não é meu intuito menosprezar o trabalho feito pela agência. Este texto tem viés de estudos e pesquisa de referência para melhorias. Essa analise tambem se baseia puramente em questoes de componentes e visuais, uma vez que nao possuo o entendimento do modelo de negocios em questao.


O Redesign comemorativo

O novo design é bem diferente visualmente, podendo até ser chamado de ousado, ja que quebra muito do que foi usado anteriormente na plataforma. Ao primeiro olhar ja causa um efeito de surpresa para usuários mais antigos, acostumados a uma certa linearidade em questão de paleta cromática e disposição dos componentes.

Na nova tela, a cor predominante é um roxo bem diferente da escala de cinza usada há vários anos. Essa cor tem sido usada por vários projetos e empresas, porém nao condiz com a paleta cromática usada nas outras plataformas do Jovem Nerd, tais como blog, podcast, vídeos. O que pode gerar uma quebra na experiência do usuário e fazer com que ele fique em dúvida se essa página realmente pertence ao resto da marca.

Nova tela da NerdStore

Na primeira dobra da página já podemos observar que o foco se dá bastante no banner anunciando o aniversário da NerdStore e as promoções, é um banner estático e não possui slider, o que pode ser uma vantagem pois não tira a atenção do usuário com a movimentação do componente e foca realmente no que é o mais importante das promoções.

Outro ponto que pode-se notar, é que o menu primário (onde pode-se selecionar: camisetas, livros, presentes…) tem um peso visual menor do que o menu secundário (onde há algumas categorias que parecem ser relacionadas às licenças). Nessa parte, levanto dois possíveis problemas:

1- Taxonomia: as categorias ficam um pouco confusas por exemplo, por que camisetas estao fora de vestuário? O que seria a categoria presentes, bonecos e colecionaveis nao poderiam fazer parte dela, nem decoração? O que seriam os kits? No menu secundário, também pode haver essa confusão, mesmo que o usuário ja esteja acostumado a essas marcas e personagens, pode ficar um pouco confuso do que ele vai encontrar dentro de cada uma delas.

No matter how big your project is going to be, it’s crucial to — label everything properly, create clear and organised lists of items / categories and have fewer things on one page / section as possible.

Hierarchical taxonomy: UX design’s secret weapon

2- Peso visual: assim como comentado, o menu primário tem menos força visual que o secundário, pois o fundo do secundario é mais saturado e vibrante. Também por motivos de número de caracteres de cada item, os menus parecem desalinhados, o que pode causar desconforto.


Tela com as promoçoes em destaque

Scrollando um pouco vemos a tela onde aparecem algumas das promoções que parecem as de destaque. Aqui há uma separação por cores, mas em alguns momentos ela se torna confusa pela repetição de cores para contextos diferentes.

“Oferta Modafoca” e “Replay” possuem a mesma cor rosa, porém a outra promoção da categoria “Replay” está em azul e o banner de Pré-venda, também está em azul, sendo que nao é relacionado a categoria replay. A única que está com categoria e cor sem repetição é a categoria de lançamento, que poderia ser linkada visualmente com o banner de pré-venda, por exemplo.


Nesta dobra da tela, há o contador e as imagens dos produtos com preços e CTAs para compra.

As imagens seguem um padrão já conhecido para apresentação dos produtos e o CTA tem um ótimo destaque, chamando realmente o usuário para a ação.

O countdown passa a sensação de escassez e urgência, que também é um artifício bem usado por e-commerces e funciona muito bem, uma vez que mexe com o psicológico para que a pessoa pense que ela so tem aquela chance de fazer um bom negócio. Nessa parte do contador, talvez seria interessante aumentar o espaçamento ou colocar separadores discretos para que o usuário consiga visualizar melhor cada bloco de números, seguindo o princípio de agrupamentos da Gestalt.

countdown no mobile

Quando em mobile, essa é a única parte do site que fica um pouco quebrada, ficando desalinhada e sem muita hierarquia visual.


Indo um pouco mais para baixo da página vemos a mesma estrutura para os produtos, porém aqui ha dois tipos de botões: Um para ver opções e outro para comprar, os dois tem mesma anatomia mas são para ações distintas, aparentemente.

Mas quando clicamos em “Ver opções” somos direcionados para a tela de seleção de tamanho e compra da camiseta, o que torna o label de ver opções um pouco fora de contexto. Ambos poderiam ter o mesmo label de “comprar”


As marcas licenciadas são apresentadas em uma faixa, o que é também uma prática comum de e-commerce para gerar credibilidade e também a sensação de reconhecimento do usuário. Mas novamente, a cor de fundo acaba prejudicando o contraste de algumas marcas. Por vezes, usar cores mais “tradicionais” como branco, preto e escala de cinza podem ajudar nesse quesito, ou então fazendo a análise do brandbook de cada uma delas para que se ache um equilíbrio entre as diretrizes de cada uma.


Nessa parte onde há os outros produtos, a anatomia do CTA muda, ficando com borda e sendo vazado por dentro, mas com o mesmo label de chamada. Essa diferença visual mas para botões com mesma finalidade pode ser um pouco problemática visto que fazemos associações e, deixar duas ações que são iguais representadas de maneiras diferentes, pode causar confusão , fazendo com que ele tenha que parar e prestar atenção no que esse CTA faz, sendo que o usuário já viu o mesmo comportamento em outro lugar e ele não precisaria dessa curva de aprendizado.

Outro ponto é que, dessa maneira, o CTA perde seu contraste com o resto da página, que era um ponto forte um pouco mais acima na página.

But there is one important thing to keep in mind when selecting a button’s color: It should contrast with the other elements on the page.

If you want users to click on your CTAs, your buttons need to attract their attention. And making them a contrasting color is one of the easiest, most effective ways to make that happen.

6 Characteristics of High-Converting CTA Buttons


Onde há as categorias, as fotos poderiam ter um overlay e um texto descritivo com o nome de cada uma, para que o usuario pudesse associar de forma mais rápida qual o conteúdo listado abaixo delas.

Outro ponto é que na categoria cozinha, há um espaço entre o link de ver todos e o último item, o que não ocorre nas outras categorias. Abrindo o console, nota-se um <p> em branco, o que gera essa “mini-quebra” no layout.


Nessa parte onde há um texto explicando um pouco mais sobre a NerdStore, a fonte está com contraste muito fraco com relação ao fundo. Fazendo o teste de contraste pelo aplicativo Stark, nota-se que o nível é baixissimo, não atendendo nenhuma norma de acessibilidade da WCAG. Mas que poderia ser ajustado, com troca de cor para branco.

Nível A: o site atinge um nível mínimo e básico de acessibilidade. Para chegar a esse nível, todos os Critérios de sucesso de Nível A precisam ser cumpridos.

Nível AA: é o nível ideal que deve ser alcançado, no qual o site atinge um nível superior de acessibilidade, para que seja acessível à maioria das pessoas, em grande parte das situações e usando a maioria das tecnologias. Para chegar a esse nível, todos os Critérios de sucesso de Nível A e Nível AA precisam ser cumpridos.

Nível AAA: o site atinge um nível muito elevado de acessibilidade. Para atender a esse nível, todos os Critérios de sucesso de Nível A, Nível AA e Nível AAA precisam ser cumpridos.

Criação de conteúdo acessível


Chegando ao final da página há um tipo de mapa da página com alguns links, que estão bem organizados, o selo de qualidade e um campo para assinar a newsletter. Todos com ótimos contrastes e legibilidade. Também foi usado um placeholder de “insira seu melhor email” que torna o preenchimento mais facil para o usuário e também já trabalha com a questão dele inserir um email que ele utilize mais, do que usar um “email para receber spam”.

No footer temos alguns ícones sinalizando sobre troca grátis, parcelamento e rapidez na entrega. Esses itens poderiam estar em algum posicionamento acima do footer, visto que são vantagens na hora da compra e podem ser fatores de convencimento do usuário.

As formas de pagamento estão bem alinhadas e visualmente bem dispostas, assim como o endereço. Porém os selos de qualidade ficam com contraste baixo e não são facilmente idenficáveis. O mesmo problema ocorre com a assinatura da agência que desenvolveu o site e, ainda há a questão que o chat de atendimento fica por cima da marca em algumas resoluções de tela.


Final thoughts

No geral, a ideia de revitalizar o layout e fazer uma reestruturação é ótima! Mas alguns pontos precisam ser levados em conta, homologados e testados com usuários.

Pretendo fazer um redesign considerando esses pontos apresentados nesse artigo. (E separá-lo em outro artigo porquê, uffa, já escrevi um tantão aqui, né?)

E você? O que achou desse redesign? E de redesigns em geral? Vamos conversar? 😊

E se gostou, deixa aquelas 👏

Thanks to Gabriel Minucci

Débora Martins

Written by

UX Designer that loves the product process, from problem discovery and strategy definition to the creation of interaction and visual design. Also, I’m an archer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade