Página inicial da categoria BE Gamer com fundo escuro e produtos em destaque

BE Gamer

Repensando a categoria gamer da Bemol com benchmarking de Steam, Sony e Nintendo

  • UI/UX Design
  • Bemol
  • Varejo
  • 2023
  • UI Designer

01Desafio

Desafio

Fui convidado a criar uma proposta com base no meu conceito de design para uma categoria específica. Meu objetivo era tornar a página mais acessível e fácil de usar, proporcionando uma experiência mais agradável e satisfatória ao usuário. Com minha expertise em design e foco nas necessidades dos usuários, fiquei confiante de que traria soluções práticas e eficientes para essa categoria.

Página atual da categoria gamer da Bemol, antes do redesign

02Benchmarking

Benchmarking

Na busca por um entendimento mais profundo e um ponto de partida sólido, comecei a pesquisar vários sites relevantes (Nuvvem, Steam, Sony e Nintendo) à procura de referências valiosas e abordagens criativas para o desenvolvimento do conteúdo. À medida que aprofundava a pesquisa nessas páginas, tomei nota de todos os dados relevantes e compilei gradualmente uma lista de abordagens potenciais que poderia adotar.

03Research

Research

Quando conduzo uma investigação, prefiro utilizar uma combinação de recursos para obter os resultados mais abrangentes e eficazes possíveis. UX Collective e Medium são dois recursos a que recorro com frequência para consultar artigos relacionados à minha área de pesquisa específica.

Além desses recursos online, também dedico tempo a analisar como as plataformas de e-commerce utilizam vários elementos de UI, com análise heurística, observando e compreendendo as intenções por trás dos elementos de UI usados por esses sites, para obter uma compreensão mais clara das melhores práticas.

Artigo de referência sobre boas práticas de UX em e-commerce

04UI design

UI design

Após as pesquisas, comecei a criar a interface no Figma com os principais setups: 8pt grid, largura da página, espaçamento das colunas, componentes e variáveis, pré-definições para compor um Design System baseado em Atomic Design.

Setup do Design System no Figma com grid, componentes e variáveis

05Resultado

Resultado

O resultado pode ser conferido em 2 versões: a página inicial e uma de produto detalhado. Com grande destaque em elementos de imagem, deixei o fundo escuro, um detalhe que gamers gostam, segundo minha pesquisa.