Diferit Website

C.
C.
Oct 27, 2017 · 4 min read

Create an elegant UI based on the same backend and elements used in the initial design

Duration

1,5 Months, 2014

Tools Used

Illustrator, Photoshop

Platforms

Desktop

Learnings

UI, Information Architecture, Branding.

Brief

Diferit Stil is an e-commerce platform created to promote local clothing & accessory products at affordable prices.

Jobs To Be Done

  • Visual. Create a new UI using the same elements currently in use
  • Functional. Maintain the same information architecture and backend

Approach

I worked with a front-end developer to redo the UI and some of the interactions on the website. The client wanted to see what could be done with the existing product for the short term to improve sales and their branding.

This was the homepage of the website in 2014, when the project started.

One of the requests was to keep the same structure of the menu, where everything is visible.

The challenge was to create this in such a way that will display their importance within the website at a glance.

Concept

The existing images were used to play around with a different layout and colors, looking for some good proportions to showcase the products.

The images all had different sizes so I used a white background to frame them. This square box would then be used across the website for consistency.

Low Fidelity Mockups

The first to be created was the “All Products” page.

The boxes were then used on the homepage to feature top selling products. Labels were placed over the design to choose the best colors for possible features, such as new or trendy.

Hi-Fi Design

The same color scheme and boxes were kept across the website. The final result created a more relaxed and easy to navigate product, that was closer to the logo that the client already had.

We explored some different screen sizes and placed the tags, which were developed to work with the type of products that Diferit had in stock and was planning to sell going forward. They were also made to match the pictures used for banners, in terms of color brightness, saturation and cromatics.

Final Thoughts

The client saw the change in sales and returning users and decided to do another redesign, this time incorporating more of the things that were propossed the first time: only 1 menu bar, displaying relevant information and focusing on the branding.

carminbaroi

Portfolio Carmin Baroi