Ecommerce | 2020

JuanMolinart

WEB DESIGN

MARKETPLACE

Overview

Juan Molina is an illustrator who contacted me for an e-commerce project to sell his illustrations and offer custom commissions. It was important for him to manage sales and upload new products, so we decided to set up the store using WordPress with the WooCommerce plugin.

The objective

The objective of this project was to create a website that effectively showcased the artist's style, ensuring that his works remained the focal point without overshadowing them.

Tools

Figma, Wordpress y Woocommerce.

Kick-off

The uniqueness of this project lay in being the website for an artist, making it a highly personal endeavor where it was crucial for the UI to truly capture the artist's essence. That's why, after receiving the briefing, the first step was to conduct an interview with Juan to better understand him and grasp his expectations for the store. He envisioned a website with a handmade and cartoonish appearance, as if he had personally drawn it with a marker.

Self-Portrait by Juan Molina

A Website Tailored to His Style

One of the challenges we encountered was finding the balance between an artistic website that captured the colorful and cartoonish style of his illustrations without overshadowing the importance of the artworks, which were meant to be the focal point.

Solution

To address this, we opted for a simple website with few elements, collaborating closely with him in the 'drawing' of each component, ensuring that they were as personalized as possible.

Typography

After several tests in which more common fonts like Inter were ruled out (see first image below), research was conducted among handwriting fonts that were similar to the artist's own handwriting but at the same time legible and accessible for the screen.

Style exploration

A unique Design System

Nearly all the website components were reviewed and designed in collaboration with the illustrator. A meticulous effort was made in adapting their sketches and strokes to transform them into applicable and usable web components.

Wireframes

Final Result

Implementation and Development

For the website development and e-commerce implementation, the decision was made to use WordPress with the WooCommerce plugin.

It was crucial that the illustrator could upload new products and manage the website independently once the project was completed. Various no-code tools like Webflow were considered, but ultimately, due to budget constraints and the artist's comfort, WordPress was chosen. While WordPress has its performance drawbacks and design limitations, it was the most suitable tool for streamlining the store management for a less technically experienced user.

Let’s get in touch!

Don't be a ghost stalker

👋 Say hi!

Twitter