Background

Farmacity came from a very strong bid with the launch of the first eCommerce. The idea presented a series of innovations which, combined, made the buying process difficult. Those innovations were: a skeumorphism design, following the first iOS applications, when the interfaces answered to other necessities; a drag and drop to add to the cart in grid view; infinite scroll; and responsive grid.

imagen_backgroung

The bid centred itself so that the user’s buying decision would be in the grid page, modelling itself on offline buying. This grid represented the end cap of physical pharmacies. The products had to keep the end cap logic and, therefore, its real proportion. A lot of effort was requested in order to generate a working process in which nothing would be lost. However, it was impossible to maintain with 8,000 products in the catalogue. The result was a significant design inconsistency and .png images which took a long time to load, thus reducing the buying percentage and making their backend update difficult.

Goal

Increase the average sales ticket, facilitating the buying process by means of a more modern and intuitive interface, thus increasing the site’s performance and the client’s internal task in its administration.

compu_screen-farmacity
farmacity_cards-gris

The cards are born

The solution was a complete redesign of the site’s interface, which standardise the buying process. The end cap is discarded and the products are “packed” into individual cards. Each card keeps the elements and the interrelation between each of them at the same place, thus facilitating the user’s experience on every device. This accelerates the process and reduces surprises. The user does not need to “search” where to click.

The skeumorphism is removed and the content is adapted to a flat design, without annoying shadows or reliefs, and still without generating drastic changes in colours and typography. The redesign of the interface nevertheless puts the emphasis on the cards. This way, the product becomes the centre of each of the site’s applications (grid, related items, cross sells, featured items, etc.).

pantallas_nuevas

The skeumorphism is removed and the content is adapted to a flat design, without annoying shadows or reliefs, and still without generating drastic changes in colours and typography. The redesign of the interface nevertheless puts the emphasis on the cards. This way, the product becomes the centre of each of the site’s applications (grid, related items, cross sells, featured items, etc.).

The UI-kit is joined in a simpler and more standardised hierarchy.

pantallas_farmacity2

The site is more airy and luminous. The practical and informative content is outlined in the spaces and facilitates the navigation. The white replaces the grey, the site’s performance is improved, and the loading of the images is made faster by changing the .png to .jpg. The offers and discount cards are standardised. The drag and drop was kept and modified, so as to make it a secondary buying method. The “Buy” call-to-action is added.

ipad_Farmacity

The search engine is enlarged and there are important changes in the main navigation structure. The search engine’s autocomplete and results are redesigned, and share their navigation core with the new “Categories” drop-down, in which the different levels are displayed by column, reaching the correct depth of hierarchies in which to navigate. A special highlight (Cyber Monday, etc.) is added to the header and in the featured categories (up to five).