UI designs for Personaling

Intro

From 2012 to 2013 I was in charge of designing and coding (HTML/CSS) its user interface from scratch.

Personaling was not the typical eCommerce client therefore it was a way more challenging (and fun) project to work on.

On this post I will walk you through some of its features (and so my work).

Personaling home screenshot

Personaling home screenshot


What is Personaling

It’s a web platform where brands will be able to showcase their collections and inventories while fashion experts as fashion bloggers, editors, photographers, models and artists, use those items to create looks (outfits) in a professional way and according to the latest trends and the different women profiles.

These experts (Personal Shoppers) will also define the corporal profile, style and occasion which fits perfect for those composed looks so users can buy within one online shop instead of going to every brand page.

Personaling explained

Personaling explained


On the other hand, a client when register must complete a personal profile that includes her height, complexion, body type, eye and hair color, as well as her favourite styles.

So when a campaign is enabled the system automatically generates a match and every client will see curated and recommended looks with the opportunity of buying it completely or partially from the comfort of her house.

User - complexion

User - complexion


Those features and the business concept behind it has made Personaling win several Startup competitions such as Wayra Week Venezuela 2013 and Startup Chile 9th Gen.

Personaling on Wayra's website

Personaling on Wayra's website


Navigation

One of my favorite components of Personaling UI is the navigation bar at the “tienda” section.

It allows the user to filter the products by category and subcategory in a super friendly way

Navigation menu - Personaling

Navigation menu - Personaling


Looks (outfits)

Personaling makes life easier by showcasing complete outfits that you can buy within just one website.

Therefore I had to design a UI that helped the user to easily set the sizes of every piece of the outfit accordingly while keeping the minimal style of the website.

Outfit page Personaling

Outfit page Personaling


The product page

And yes, we designed a product page, just in case the user wants to buy an individual product instead of the whole outfit.

product page Personaling

product page Personaling


Technologies and concepts

Bringing this project to life couldn’t have been possible without the following technologies:

SCRUM Agile Software Development model, Pivotal tracker, Basecamp, Twitter bootstrap, Yii framework.

technologies involved in Personaling's Development process

technologies involved in Personaling's Development process


Comments are closed.