Disponível para trabalhar

17:59:26

Disponível para trabalhar

Out of Box

E-commerce de arte e decoração de interiores com foco em peças abstratas e minimalistas, da pesquisa ao layout final.

Contexto

A Out of Box é uma loja para quem ama arte minimalista, esculturas e pinturas abstratas. O desafio foi criar um site que valorizasse a estética e o conceito das peças, para que ele não fosse apenas uma vitrine de quadros, mas uma referência no nicho.

Cargo

Product Designer

Pesquisa com o usuário, Interação, Visual Design, prototipação, validação, métricas & testagem


Janeiro 2023 - 2024

Entendendo o produto

Decisões para progressão e construção do site

Pesquisa inicial

Antes de desenhar, pesquisei o contexto em que a Out of Box está inserida. Fiz desk research para entender tendências de mercado, necessidades e concorrentes, mapeei o perfil dos usuários e conduzi entrevistas com o público do nicho.

104%

foi o crescimento nas buscas pelo termo “decoração industrial”, que virou tendência no Pinterest em 2021.

92%

das pessoas que buscam esse tipo de loja disseram ter dificuldade para encontrar um site especializado nesse conteúdo.

Principais problemas

Breve relatório sobre a pesquisa de campo

O que as pessoas dizem?

Falta de um site especializado no conteúdo

Falta de um site especializado no conteúdo

Falta de um site especializado no conteúdo

Personas

Juliana Corsel, 27 anos

“Adoro arte minimalista, principalmente a de estilo abstrato e industrial. Acho a essência desse tipo de arte muito profunda”

Motivações:

Quer ser ágil

Melhorar o ambiente da casa

Inspiração para trabalhar

Frustrações:

Falta de locais especializados

Dificuldade para encontrar um estilo específico

Precisa perguntar para conhecidos como cuidar

Joana, 25 anos

“Minha maior vontade e poder ter inspiração todos os dias para o meu trabalho, nada melhor do que inspirar a sua mente com o seu tipo de arte favorito”

“Minha maior vontade e poder ter inspiração todos os dias para o meu trabalho, nada melhor do que inspirar a sua mente com o seu tipo de arte favorito”

Motivações:

Descorações

Tornar a sua casa um ambiente mais moderno

Inspiração para trabalhar

Frustrações:

Falta de locais especializado

Dificuldade para encontrar um estilo específico

Precisa perguntas para conhecidos como cuidar

Joana, 25 anos

“Minha maior vontade é ter inspiração todos os dias para o meu trabalho. Nada melhor do que inspirar a mente com o seu tipo de arte favorito”

Motivações:

Decorações

Tornar a sua casa um ambiente mais moderno

Inspiração para trabalhar

Frustrações:

Falta de locais especializados

Dificuldade para encontrar um estilo específico

Precisa perguntar para conhecidos como cuidar

Tipografia

Construção e estilização do conteúdo da página

Inconsolata

A Inconsolata remete a um estilo tipográfico minimalista e traz o ar artístico proposto para a página. É usada em títulos e nas listagens de itens.

H1

H1

64px

64px

Bold

Bold

H2

52px

Semibold

H3

40px

Medium

Montserrat

A Montserrat tem grande variedade de pesos, o que amplia as possibilidades para os elementos textuais da interface. É usada em textos corridos e legendas.

bodyLG

28px

Regular

bodyMD

24px

Regular

bodySM

20px

Regular

bodyXSM

16px

Regular

Paleta de cores

Cores e tokens da interface

Cores principais

Preto - #202020

Token para Texto - color/brand/primary/Text/black

Token para linhas - color/brand/primary/stroke/black

O preto é uma das cores principais e também é usado em textos e linhas, trazendo seriedade e sofisticação.

Cores principais

Amarelo detalhe - #FFBD14

token - color/brand/evidence/yellow

O amarelo é usado em ícones relevantes e pontos de destaque, criando contraste e elegância na interface.

Fundo e secundárias

Cinza - #C4C4C4

Token - color/img/bg/primary/grey

Token para linhas - color/brand/secondary/stroke/grey

O preto será uma das cores principais, também será utilizado em textos e linhas, dando um ar de seriedade e classe

Cinza - #C4C4C4

Token - color/img/bg/primary/grey

Token para linhas - color/brand/secondary/stroke/grey

O cinza é usado no fundo das imagens e em linhas secundárias, dando destaque às obras sem competir com elas.

Branco - #ffffff

Token - color/bg/Primary/white

O amarelo será utilizado para certos ícones relevantes e para dar um pouco de contraste na interface, dando uma certa elegância

Preto - #202020

Token para Texto - color/brand/primary/Text/black

Token para linhas - color/brand/primary/stroke/black

O preto será uma das cores principais, também será utilizado em textos e linhas, dando um ar de seriedade e classe

Cores principais

Amarelo detalhe - #FFBD14

token - color/brand/evidence/yellow

O amarelo será utilizado para certos ícones relevantes e para dar um pouco de contraste na interface, dando uma certa elegância

Fundo e secundárias

Branco - #ffffff

Token - color/bg/Primary/white

O branco é o fundo principal, garantindo respiro, legibilidade e foco no conteúdo.

Telas

Com a pesquisa concluída e as decisões visuais aprovadas, criei os layouts da página para desktop e mobile.

Mobile - 360px

Desktop - 1080px

Páginas internas

Detalhe do produto Desktop - 1920px

Detalhes do produto mobile - 360px

Fechamento de pedido

Pagamento - 1920px

Pagamento - 360px

Modais

Modal - 360px

Modal - 790px

Modais

Modal - 360px

Modal - 790px

Mobile - 360px

Desktop - 1080px

Páginas internas

Detalhe do produto Desktop - 1920px

Detalhes do produto mobile - 360px

Fechamento de pedido

Pagamento - 1920px

Pagamento - 360px

Modais

Modal - 360px

Modal - 790px

Resultado

Construção e estilização do conteúdo da página

Notou-se um crescimento na procura de artes deste nicho. Além disso os clientes deram um feedback muito positivo no site da loja, por estar agrupado certos tipos de arte que se concatenam, já que eles muitas vezes procuravam e acabavam não achando onde comprar.

Tipografia

Construção e estilização do conteúdo da página

Inconsolata

A inconsolata remete e um estilo tipográfico minimalista. Isso traz maior Isso traz um ar artístico proposto para a página e será usado em textos grandes e nas listasgens de itens

H1

64px

Bold

h2

52px

Semibold

H3

40px

Medium

Paleta de cores

Construção e estilização do conteúdo da página

Fundo e secundárias

Preto - #202020

Token para Texto - color/brand/primary/Text/black

Token para linhas - color/brand/primary/stroke/black

O preto será uma das cores principais, também será utilizado em textos e linhas, dando um ar de seriedade e classe

Cores principais

Amarelo detalhe - #FFBD14

token - color/brand/evidence/yellow

O amarelo será utilizado para certos ícones relevantes e para dar um pouco de contraste na interface, dando uma certa elegância

MontSerrat

A Montserrat é uma fonte com bastante diversidade de pesos e isso traz maior possibilidades para criação de elementos textuais da interface. É usada em textos corridos e legendas.

bodyLG

28px

Regular

BodyMD

24px

Regular

BodySM

20px

Regular

BodyXSM

16px

Regular

Fundo e secundárias

Cinza - #C4C4C4

Token - color/img/bg/primary/grey

Token para linhas - color/brand/secondary/stroke/grey

O cinza será usado apenas para fundos com imagens

Branco - #ffffff

Token - color/bg/Primary/white

O branco é usado para fundos, trazendo uma sensação de leveza e claridade

Paleta de cores

Construção e estilização do conteúdo da página

Fundo e secundárias

Preto - #202020

Token para Texto - color/brand/primary/Text/black

Token para linhas - color/brand/primary/stroke/black

O preto será uma das cores principais, também será utilizado em textos e linhas, dando um ar de seriedade e classe

Cores principais

Amarelo detalhe - #FFBD14

token - color/brand/evidence/yellow

O amarelo será utilizado para certos ícones relevantes e para dar um pouco de contraste na interface, dando uma certa elegância

Telas

Depois da pesquisa realizada e as decisões gráficas aprovadas, o passo seguinte foi a criação dos layouts da página, tanto para desktop quanto para celular.

Modais

Resultado

O que mudou depois do lançamento

Houve aumento na procura por artes desse nicho, e os clientes deram feedback muito positivo sobre o site. Agrupar estilos de arte que se complementam resolveu uma dor real: antes, muitos procuravam essas peças e não encontravam onde comprar.

© 2024 Tiago Macena
--:--
Rio de Janeiro