CaféSagrado is a family business started in Colombia. They wanted to internationalize their activities by selling roasted coffee beans through an online store. The intended countries were Switzerland, Spain, Finland, and of course, Colombia. Purchases from other countries would not be excluded.

Design

There were two guidelines for the design. We were provided with a visual identity manual that was created by a design company previously hired by them. We were also asked to appeal visually to a Nordic market. We were also asked to appeal visually to a Nordic market.

The starting point was an exchange of websites with the client. We sent the clients all the websites from any company in the world, which we though was a good match to what they were looking for. In this way we made sure that we were all in the same page. The design and part of the copywriting was created by Dorothy Zablah, who knows about coffee and has a great eye for online stores.

• 

• 

Development

I intended at the beginning to use a ready-made template. It was hard to find a suitable template including the paid ones because of the complex mix of plugins that were required; I wanted to avoid running into dead-ends because a template would not support something. In hindsight I am not still sure whether writing a template was the best strategy. This did, however, let me customize the site appearance in detail.

The most challenging parts of this development was finding and orchestrating a multi-language plugin, that would work well with WooCommerce. It was important for me too not to hook the client with a recurrent payment for a plugin. I tried probably all the multi language plugins available in the WordPress repository, and also tested the approach of using multisite WordPress for the multiple languages. Wp Multilang was really the only plugin that would work, which did not require periodic payments.

There are many other subtler interactions that take place, and were coded using jQuery and plain JavaScript.

• Big logo, only on home which shrinks when scrolling down. The background of the menu is transparent alongside this
• Menu becomes a drop-down menu when the screen width is short
• Animation classes that let items smoothly slide in when they enter the view. This helps to make lazy-loaded pictures appear smoothly, and gives a bit more of life to the navigation experience
• Parallax effects for text, that also give some life to the navigation
• Grid items, where pictures alternate sides with the text. The alternation needs to flip when on mobile (if you really need to know...)

Documentation

Mobile size home page navigation

Push the down-pointing arrows to reveal the content (long pictures)

Home page

Screenshot-Home-cafesagrado

Store page

Screenshot-Product-cafesagrado

Single product page

Screenshot-Store