Diego Valencia
Designer

MILA

Marketplace to buy clothes, art and decoration

"It was a pleasure to work with Diego. My partner and I felt guided all the way through the project. Diego has a great ability for design thinking and for user friendly business. I highly recommend Diego if you want a webpage designed perfectly for the specific public you desire."

Camila Luque, Co-Founder.

Understanding the vision


When Juan and Camila approached me, they had one thing in mind: they wanted to create a marketplace for independent creators to sell their products.

This project had three main requirements: 1) discover a way to bring all products in one central hub, 2) give people an outstanding browsing experience, and 3), make it look appealing to encourage new creators to be part of the platform.

MILA
Made with Adobe Xd

Made with Adobe Xd

Wireframes

I worked on two iterations for the wireframes of the site including an administration panel for brands, registered clients and admins.  

This allowed us to visualize the overall experience, steps users would take to purchase products and the checkout process. Besides, how admins and brands would manage their activity -upload new products, view clients, manage roles, etc.

Homepage

We decided to homepage that links major inner pages. This homepage is where users get a glimpse of everything the marketplace has to offer.

Scroll inside to view the whole page

Scroll inside to view the whole page

Product pages

I decided to maintain a card based design for the layout of the product listings as it's easier for users to scan what they are looking for. Also, filters on the left side of the screen for them to narrow down their search.

Scroll inside to look the whole page

Scroll inside to look the whole page

Product details from. mobile

Product details from. mobile

Checkout-Shipping details

Shopping details come first in this process.

Scroll inside to look the whole page

Scroll inside to look the whole page

Checkout-Payment

We have a summary of the customer's shipping details at the beginning, that way we make sure they are aware of the details provided. Likewise, the shipping address provided in the first step may match the billing address so they don't have to write it again. If it doesn't match then we allow them to specify it by activating the 'Other direction' option.

Scroll inside to look the whole page

Scroll inside to look the whole page

Dashboard
MILA

Adding products

1- Basic information 

Images, name, price, discount percentage (if any), description and details, category and subcategory if applicable. So we have main categories (e.g women, men, art) and subcategories (e.g shoes, bags, etc)

2- Stock details

Users select the color available for this product. Also, specify sizes available in stock (e.g Small, Medium, Large). If the product does not work with sizes but with a specific dimension (e.g art and decoration) they specify it by activating the 'sell by dimension'. 

Scroll inside to look the whole page

Scroll inside to look the whole page