top of page
ESTUDO DE CASO EM UI
Redesign
Site Maze
Melhorando a experiência do usuário no site de vendas da marca Maze através do UI design
MEU PAPEL
SOLO - identificar problemas e idealizar melhorias no atual site da empresa
DURAÇÃO
(2023) Novembro
SOFTWARES
- Figma
INTRODUÇÃO
Grandes marcas necessitam sites fortes
A Maze é reconhecida como a revendedora exclusiva das principais marcas globais de Streetwear & Skateboard. Com presença online e lojas físicas em três estados, a Maze destaca-se como referência nos lançamentos mundiais de Sneakers exclusivos. Por sua forte presença no mercado do Streetwear, a marca necessita de um site que passe essa relevância e seriedade para seus usuários.
Atualmente, o site encontra-se com alguns problemas básicos de UI e com diagramações grosseiras, tirando a ideia de grandeza e relevância da Maze. Como parte de um estudo pessoal, tentei estudar soluções para a Interface do Usuário que trouxessem mais personalidade, coesão e e seriedade ao site.
PROCESSO
Definindo as etapas do projeto
Considerando que não haveria como eu realizar um processo adequado de UX ou testes fidedignos dos protótipos para este projeto, adaptei o modelo de Design Thinking de 5 etapas, proposto pelo Instituto Hasso Plattner de Design da Universidade Stanford (a “d.school”). As etapas deste processo são:
EMPHASIZE
O básico que funciona
Realizei uma extensa pesquisa sobre o user flow do site, me atentando muito aos elementos de design e diagramação utilizados. Simulei compras, pesquisas de produtos, dúvidas diversas, todos os possíveis fluxos de navegações e muito mais.
Junto a isto, pesquisei a UI de cerca de 17 concorrentes da área. Analisando a estrutura geral do site, os cards de produtos, as divisões dos menus, as Hero Images, os footers e quaisquer insights positivos que pudessem acrescentar ao meu redesign. Dentre eles estão:
​INSIGHTS
-
A grande maioria das marcas utilizam uma UI familiar e simples. As poucas que optam por algo mais ousado e carregado de personalidade tem dificuldade em fazer layouts claros e funcionais.
-
Muitos sites utilizam uma Hero Image demasiadamente grande, sendo difícil a visualização de todo o banner e passando uma sensação claustrofóbica. O mesmo vale para as imagens de produto.
-
É muito difícil encontrar sites com bom respiro entre informações e produtos.
-
Ter a posssibilidade de "Compra Rápida" pode ser muito útil
Quanto mais ousado, mais difícil de garantir a usabilidade e clareza do site.
DEFINE
Carência de esmero
Nesta etapa, me certifiquei de dessecar toda a estrutura do site, apontando tudo que poderia ser melhorado. Além disso, fiz o mesmo com outros quatro sites e seus respectivos perfis no Instagram, para entender ainda mais afundo a identidade de cada um deles, e comparar com maior propriedade os pontos fracos da UI do meu estudo.
Em geral, o site funciona. Porém, falta cuidado e aperfeiçoamento para elevá-lo ao nível de robustez e importância que a marca necessita passar. Elencarei aseguir imagens para ilustrar e pontuar exatamente os pontos de atenção que procurei solucionar neste projeto:
IDEATE
Referências do universo do Streetwear
Agora, com os problemas em mãos, procurei entender mais sobre o universo do Streetwear, suas linguagens, texturas, cores e essência. Dentro desta pesquisa, pude entender três coisas:
1. O streetwear tem um ar mais informal e caótico, cheio de texturas e sobreposiçoes que trazem um ar orgânico e forte.
2. As lojas e comunicações da Maze tem um ar mais clean e mais requintado. Trazendo aspectos do streetwear de forma sutil, como em uma textura ou uma fonte vazada.
3. Como já compreendido pela desk research: o simples é o que funciona. Então, preciso achar uma solução visual que traga pinceladas do universo do streetwear e casar com uma linguagem mais clean da maze, permitindo também atribuir ao site a ideia de grandeza e seriedade da marca.
Rascunhos a mão
Antes de explorar qualquer solução digitalmente, rascunhei todas as soluções para os problemas levantados no site. Como um brainstorming de ideias, deixei fluir quaisquer combinações de soluções que me vinham em mente. Deixo aqui, algumas delas:
Desgin de um Key Visual
Neste KV tentei, prinpipalmente, solucionar a Hero Image, pois seria o elemento que guiaria todo o restante do site. Cheguei a esta solução pensado em manter a ideia original do site, de um banner simples com apenas o nome, produto e um CTA e que tem leves alterações nas cores para melhor acomodar os produtos. Com este KV, a marca poderia facilmente atualizar a Hero Image para atender o alto fluxo de lançamentos que eles possuem toda semana e ainda manter um alto nível de qualidade visual.
PROTOTYPE
Wireframes
Nos wireframes, percebi que seria melhor reduzir a quantidade de produtos por fileira para manter o site com bastante respiro e não precisar aumentar demasiadamente os produtos. Desta forma, solucionaria o problema central do site de, basicamente, gritar todas as informações.
Design System
A palleta de cores do site foram pensadas para enfatizar a identidade da Maze, que utiliza muito o vermelho em suas comunicações. Já as fontes foram pensadas para trazer a ideia do Streetwear juntamente com a ideia de minimalismo, finess e força da marca. O site todo foi feito com uma única fonte, as demais fazem parte do design dos banners apenas.
DESIGN FINAL
Protótipo de alta qualidade
Neste protótipo me limitei a realizar apenas as principais ações envolvendo os tênis, seu principal produto. Infelizmente, não tenho os recursos necessários para aplicar todas as animações que gostaria, por isso, a página da home serve como modelo princial do funcionamento do site.
REFLECT & GROW
Aprendizados do projeto
Ao realizar esse projeto eu aprendia a importância de ter muita atenção e esmero em cada detalhe do site. Cada escolha de design precisa ter um propósito e traduzir uma ideia. Mesmo não sendo possível me aprofundar na parte de UX neste projeto, foi isso o que tentei fazer aqui, dentro das limitações do projeto.
bottom of page