Available for work

US

02:45:08

Available for work

Available for work

US

02:45:08

Out of Box

Art and interior decor e-commerce focused on abstract and minimalist pieces, from research to final layout.

Context

Out of Box is a store for people who love minimalist art, sculptures and abstract paintings. The challenge was to create a site that highlighted the aesthetics and concept of the pieces, so that it wasn't just a showcase of paintings, but a reference in the niche.

Role

Product Designer

User research, Interaction, Visual Design, prototyping, validation, metrics & testing


January 2023 - 2024

Understanding the product

Decisions for the site's progression and construction

Initial research

Before designing, I researched the context Out of Box operates in. I did desk research to understand market trends, needs and competitors, mapped the user profile and conducted interviews with the niche audience.

104%

was the growth in searches for the term "industrial decor", which became a trend on Pinterest in 2021.

92%

of people looking for this type of store said they had difficulty finding a site specialized in this content.

Main problems

Brief report on the field research

What are people saying?

Lack of a site specialized in this content

Lack of a site specialized in this content

Lack of a site specialized in this content

Personas

Juliana Corsei, 27 years old

"I love minimalist art, especially abstract and industrial styles. I find the essence of this kind of art very profound"

Motivations:

Wants to be agile

Improve the home environment

Inspiration to work

Frustrations:

Lack of specialized stores

Difficulty finding a specific style

Needs to ask acquaintances how to care for the pieces

Joana, 25 years old

"My biggest wish is to be able to feel inspired every day for my work; nothing better than inspiring your mind with your favorite type of art"

"My biggest wish is to be able to feel inspired every day for my work; nothing better than inspiring your mind with your favorite type of art"

Motivations:

Decorations

Make her home a more modern environment

Inspiration to work

Frustrations:

Lack of specialized stores

Difficulty finding a specific style

Needs to ask acquaintances how to care for the pieces

Joana, 25 years old

"My biggest wish is to feel inspired every day for my work. Nothing better than inspiring your mind with your favorite type of art"

Motivations:

Decorations

Make her home a more modern environment

Inspiration to work

Frustrations:

Lack of specialized stores

Difficulty finding a specific style

Needs to ask acquaintances how to care for the pieces

Typography

Building and styling the page content

Inconsolata

Inconsolata evokes a minimalist typographic style and brings the artistic feel intended for the page. It is used in titles and item listings.

H1

H1

64px

64px

Bold

Bold

H2

52px

Semibold

H3

40px

Medium

Montserrat

Montserrat has a wide variety of weights, which expands the possibilities for the interface's text elements. It is used in body text and captions.

bodyLG

28px

Regular

bodyMD

24px

Regular

bodySM

20px

Regular

bodyXSM

16px

Regular

Color palette

Interface colors and tokens

Main colors

Black - #202020

Text token - color/brand/primary/Text/black

Line token - color/brand/primary/stroke/black

Black is one of the main colors and is also used in text and lines, bringing seriousness and sophistication.

Main colors

Accent yellow - #FFBD14

token - color/brand/evidence/yellow

Yellow is used in relevant icons and highlights, creating contrast and elegance in the interface.

Background and secondary

Gray - #C4C4C4

Token - color/img/bg/primary/grey

Line token - color/brand/secondary/stroke/grey

Black will be one of the main colors, also used in text and lines, giving an air of seriousness and class

Gray - #C4C4C4

Token - color/img/bg/primary/grey

Line token - color/brand/secondary/stroke/grey

Gray is used in the image backgrounds and secondary lines, highlighting the artworks without competing with them.

White - #ffffff

Token - color/bg/Primary/white

Yellow will be used for certain relevant icons and to add some contrast to the interface, giving it a certain elegance

Black - #202020

Text token - color/brand/primary/Text/black

Line token - color/brand/primary/stroke/black

Black will be one of the main colors, also used in text and lines, giving an air of seriousness and class

Main colors

Accent yellow - #FFBD14

token - color/brand/evidence/yellow

Yellow will be used for certain relevant icons and to add some contrast to the interface, giving it a certain elegance

Background and secondary

White - #ffffff

Token - color/bg/Primary/white

White is the main background, ensuring breathing room, readability and focus on the content.

Screens

With the research concluded and the visual decisions approved, I created the page layouts for desktop and mobile.

Mobile - 360px

Desktop - 1080px

Internal pages

Product details Desktop - 1920px

Product details mobile - 360px

Checkout

Payment - 1920px

Payment - 360px

Modais

Modal - 360px

Modal - 790px

Modais

Modal - 360px

Modal - 790px

Mobile - 360px

Desktop - 1080px

Internal pages

Product details Desktop - 1920px

Product details mobile - 360px

Checkout

Payment - 1920px

Payment - 360px

Modais

Modal - 360px

Modal - 790px

Result

Building and styling the page content

There was a noticeable growth in demand for art in this niche. In addition, customers gave very positive feedback about the store's site for grouping together related types of art, since they often searched for them and ended up not finding where to buy.

Typography

Building and styling the page content

Inconsolata

Inconsolata evokes a minimalist typographic style. It brings the artistic feel intended for the page and will be used in large text and item listings

H1

64px

Bold

h2

52px

Semibold

H3

40px

Medium

Color palette

Building and styling the page content

Background and secondary

Black - #202020

Text token - color/brand/primary/Text/black

Line token - color/brand/primary/stroke/black

Black will be one of the main colors, also used in text and lines, giving an air of seriousness and class

Main colors

Accent yellow - #FFBD14

token - color/brand/evidence/yellow

Yellow will be used for certain relevant icons and to add some contrast to the interface, giving it a certain elegance

MontSerrat

Montserrat is a font with a wide variety of weights, which provides more possibilities for creating the interface's text elements. It is used in body text and captions.

bodyLG

28px

Regular

BodyMD

24px

Regular

BodySM

20px

Regular

BodyXSM

16px

Regular

Background and secondary

Gray - #C4C4C4

Token - color/img/bg/primary/grey

Line token - color/brand/secondary/stroke/grey

Gray will be used only for image backgrounds

White - #ffffff

Token - color/bg/Primary/white

White is used for backgrounds, bringing a sense of lightness and clarity

Color palette

Building and styling the page content

Background and secondary

Black - #202020

Text token - color/brand/primary/Text/black

Line token - color/brand/primary/stroke/black

Black will be one of the main colors, also used in text and lines, giving an air of seriousness and class

Main colors

Accent yellow - #FFBD14

token - color/brand/evidence/yellow

Yellow will be used for certain relevant icons and to add some contrast to the interface, giving it a certain elegance

Screens

After the research was done and the graphic decisions approved, the next step was creating the page layouts, for both desktop and mobile.

Modais

Result

What changed after launch

Demand for art in this niche increased, and customers gave very positive feedback about the site. Grouping complementary art styles solved a real pain: many people used to look for these pieces and couldn't find where to buy them.

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