Serviço Premium
Desafio UI/Visual Design
CLIENTE
YAMPI
Contexto
Este projeto foi baseado em uma estratégia de marketing cujo objetivo era impulsionar um novo posicionamento eficaz no mercado de premium. Para atingir esse objetivo, o plano era criar uma nova categoria premium para o produto principal, com um visual minimalista e moderno.
Objetivo
Meu objetivo era tornar esse posicionamento de mercado possível, através do desafio de aplicar apenas técnicas de design de interface e visual design para entregar telas responsivas de alta fidelidade para dispositivos desktop e mobile.
Prazo para o Desafio
De 12/01/2022 a 14/01/2022
Problem Statement
Como podemos alcançar esse posicionamento de mercado?
Mudar a percepção dos consumidores por meio de um posicionamento estratégico transparente, que visa alcançar uma fatia do mercado, mantendo a identidade da empresa e a coesão entre as categorias existentes e a nova categoria premium, uma mudança consistente, porém significativa, na aparência. Além de alcançar essa nova fatia, é essencial apoiar os clientes atuais para que eles entendam os benefícios desse novo posicionamento.
Meta
Oferecer uma experiência premium, na forma de telas de alta fidelidade para uma plataforma web responsiva, com design moderno e minimalista, considerando as características do produto principal e seu posicionamento atual no mercado.
Checklist
-
Web responsivo
-
Experiência premium (baseada no produto principal)
-
Moderno
-
Minimalista
-
Pesquisa
Pesquisa secundária
Não tive contato, nem pude fazer nenhuma pesquisa de usuários, entrevista ou questionário com clientes atuais. Ter acesso a esse tipo de dado pode fazer uma grande diferença para o projeto. Como sempre, fiz uma pesquisa documental em meu escritório em casa para aprender mais sobre esse nicho, clientes e potenciais clientes.
Público
Empreendedores do setor de e-commerce, independentemente do porte ou segmento de seus negócios.
Insight
Os usuários podem ter qualquer conhecimento em tecnologia, ou seja, podem ter conhecimento avançado, intermediário ou básico em tecnologia. Além disso, a variação etária pode ser muito ampla e de qualquer lugar do mundo.
Benchmarking
Realizei o estudo de benchmarking em duas vertentes: Concorrentes e Competidores (ou referências aspiracionais).
Concorrentes
Pesquisas com concorrentes para entender como eles se posicionam no mercado, suas características visuais e avaliações dos usuários. Concorrentes: Wix, Nuvemshop, WordPress e Shopify.
Por quê?
Essas plataformas oferecem soluções similares ao seu produto, ou seja, disputam o mesmo público-alvo e mercado de atuação. Análise: Avaliações de usuários, estratégias de comunicação e posicionamento de marca.
Competidores
Análise dos principais players com base no posicionamento premium (experiência) de mercado: Apple, YouTube Premium, HBO Max, Uber Select/Black, Kinoplex Platinum e outros. Também considero produtos premium, como cafés gourmet.
Por quê?
Essas marcas não oferecem o mesmo serviço que você, mas:
-
Compõem o repertório de expectativas do seu usuário
-
Inspiram o nível de experiência, estética e percepção de valor premium que você deseja transmitir
Princípios
de Design
Separei alguns princípios de design para ter em mente durante o projeto, pois era importante para mim ter uma base sólida.
-
Não oculte conteúdo: Não presuma que os usuários de dispositivos móveis estarão com pressa e que não apreciarão todos os recursos ou conteúdos disponíveis em todas as diferentes categorias.
-
O mais importante no topo, o menos importante na parte inferior: Certifique-se de que as informações exibidas sigam uma boa distribuição hierárquica.
-
Menos é mais: Um clássico! Mas muito importante ter em mente considerando uma das exigências. Foco em criar uma navegação simples e interativa.
-
Consistência é fundamental: Mesmo quando estamos evoluindo e mudando, a consistência deve ser o centro de tudo.
Diretrizes Visuais
Durante a definição da identidade visual, o conceito de “premium” guiou diversas decisões para garantir uma experiência alinhada com a proposta de valor elevada.
Abaixo, os principais elementos considerados:
-
Experiência premium: A interface deve ser desenhada para transmitir exclusividade e sofisticação, indo além da funcionalidade básica. Elementos como microinterações suaves, espaços generosos e tipografia refinada contribuíram para reforçar essa percepção.
-
Cores: Optei por uma paleta com tons sóbrios, que são comumente associados a produtos premium e transmitem sofisticação e confiança.
-
Destaques visuais para features especiais: Funcionalidades diferenciadas ganharam tratamento visual exclusivo, reforçando seu valor e justificando o posicionamento elevado.
-
Hierarquia visual: Trabalhar a hierarquia visual de forma clara e estratégica, comunicando valor percebido e facilitando a comparação entre opções, sempre destacando a mais vantajosa em termos de benefícios premium.
-
Percepção de valor: O design deve usado como ferramenta para reforçar a proposta de valor da marca. A escolha de componentes visuais e interações buscando construir uma relação de confiança e fidelidade com o usuário.
Análise
Recebi a imagem do produto principal e uma lista de requisitos de UI: hierarquia visual, espaçamento, organização, contraste e demais elementos visuais.
A partir disso, investiguei como esses pontos estavam aplicados na imagem e identifiquei:
-
Paleta de cores: Era necessário manter a identidade da marca, mas seria possível explorar variações mais escuras para trabalhar contrastes e hierarquias de forma mais eficaz.
-
Fonte Rubik: A escolha da Rubik, uma fonte moderna e legível, indicava uma direção contemporânea já presente no produto, que busquei respeitar.
-
Ícones: A presença de ícones com texto, especialmente no menu, demonstrava uma preocupação com a usabilidade. Considerei manter essa abordagem.
-
Padrões: Analisei padrões de alinhamento, destaques e componentes, visando entender a lógica existente antes de propor melhorias.
Estrutura Responsiva
Devido a característica do produto dele ser um produto web responsivo, eu apliquei uma grade de 12 colunas (convencional) para desktop e 4 colunas para mobile com fonte esticada, para facilitar a proporção dos elementos, o alinhamento e a consistência.
Teste
Além de distribuir os elementos pensando na hierarquia, também utilizei estratégias para distribuir elementos relacionados, utilizando pesos, cores e tamanhos. (princípio de design 2.)
O objetivo é organizar o conteúdo da interface para conseguir comunicar com o usuário, prender sua atenção e, eventualmente, direcioná-lo para a informação desejada.
-
Padrão Z: Foi aplicado para distribuir todos os cartões, criando uma direção para leitura dinâmica da esquerda para a direita.
-
Padrão F: Especialmente utilizado para conteúdos dentro dos cartões, onde há uma quantidade significativa de texto, a fim de facilitar a leitura das informações que exigem maior atenção.
Realizei testes automatizados para validar decisões de design realizados através do plugin Visual Eyes no Figma.
O que eu aprendi?
Do ponto de vista empresarial, um posicionamento premium exige mais do que um visual alinhado às características de um serviço premium.
Do ponto de vista do design, trabalhar a partir de um produto já consolidado e com uma jornada do usuário clara é um desafio completamente diferente de trabalhar em projetos nos quais partimos do zero. Mesmo que possamos considerar que todas as respostas já estão disponíveis e que a solução é a mais completa possível, é sempre necessário dar 3 passos para trás, realizar estudos, pesquisas e aplicar processos para entender todas as necessidades do usuário e as peculiaridades do desafio do momento.