Finca Carpe Diem’s new website

Finca Carpe Diem’s new website

Features of Carpe Diem’s Website

FincaCarpeDiem.com has a new face and I believe it showcases this jungle oasis very well. The old site was due for an upgrade and not just a facelift. I worked tirelessly on structuring the content and creating an intuitive, responsive, and clear experience that would answer any questions Finca Carpe Diem’s guests would have. Without further ado, the following is a list of some of the new features on the website!

 


Activities

Finca Carpe Diem Activities Page

The main attractions of Finca Carpe Diem are the variety of activities you can do in and around the hostel. With everything in walking distance and no local activities further than 1.5 hours away (minus the longer walks), it’s in my opinion one of the best places to enjoy lots of what northern Colombia has to offer in the neatly wrapped area of Paso del Mango.

Finca Carpe Diem activities grid

Finca Carpe Diem activities grid

Activities Grid

I tried to really show the quantity of activities by allowing the user to view them in two different views. First, the activity grid which is, as it’s named, a grid of activities sized into small thumbnails. When you hover over a thumbnail, the name and distance slide in from the bottom so you never forget of what you’re looking at.

Activities Map

Second I displayed the activities in map form (locations roughly positioned). This really helps us get across how close everything is and how it’s easy to combine activities together. Here you can click on the markers to get more information about the activity. It is also easy navigate to that activity’s page from the marker’s info window.

Finca Carpe Diem Activity Map

Finca Carpe Diem Activity Map

Finca Carpe Diem Activity single page

Finca Carpe Diem Activity single page

Activities Single

When looking at an activity’s page, I wanted to make sure that the user would have as much information as possible to make an informed descision on whether they wanted or could do the activity. I included information such as distance, time to, duration, difficulty, price, a gallery of images, a breif description about the activity, hostel and tour recommendations near the activities (for regional activities), and various icons to breifly describe what the activity entails. I also wanted to make it really easy communicate with Finca Carpe Diem by adding the contact form in the sidebar to the right.

 


Rooms

Finca Carpe Diem Rooms Page

Just as important as the activities are the rooms that Finca Carpe Diem offers. As they try to appeal to both the economical and luxurious travellers, I wanted to display the rooms from every conceivable angle to make it easy for the user to have a good idea of the structure, volume and contents of the rooms.

Finca Carpe Diem Room Single

Finca Carpe Diem Room Single

 

Room Single

I really wanted to supply as much information as possible to allow the visitors to make the hard decision of whether they should splurge more on a private room or go more economically by staying in the dorms. The site shows the price and photos as well as information such as checkin/checkout times, a brief description of the room, icons that visually describe the features of the rooms, number of people it accommodates, size of bed, and whether the bathroom is private or shared.

Another standout feature I’ve added to the single room pages and throughout the site is the ability to request a booking through an easy to use booking form. You can find it in the sidebar of the single room pages as well as at the top right of the main navigation bar throughout the website.

Rooms

 


Restaurant

Finca Carpe Diem Restaurant page

Finca Carpe Diem Restaurant page

Finca Carpe Diem has a restaurant with some amazing food! In a colaboration between Belgain and Colombian cuisine, they offer many options for breakfast, lunch, dinner, snacks and drinks. I also felt it necessary to highlight some of the important features of restaurant through large banners that are found in between menus.

Restaurant

Blog

Finca Carpe Diem Blog page

Finca Carpe Diem Blog page

As Paso del Mango is such a diverse and beautiful area, Finca Carpe Diem felt it was their duty to give a first hand narrative on the various activities and locations found throughout the region. Make sure to either check out their older posts or keep an eye out for their newer ones as they give their opinions and thoughts on their experiences in and around Finca Carpe Diem and Paso del Mango.

Blog

Photos

Finca Carpe Diem Gallery page

Finca Carpe Diem Gallery page

As users are visual and like looking more than they like to reading, I wanted to make it easy to view various photos of the facilities and activites in and around Finca Carpe Diem. For this reason, I added a simple photos page where the thumbnails flow seamlessly on the right as clicked photos swap the main photo out on the left.

Photos

Volunteering

Finca Carpe Diem Volunteering page

Finca Carpe Diem Volunteering page

Finca Carpe Diem is an active contributor to local workforce however they believe that volunteering is something every traveller should experience. For this reason they really wanted to show what you get for volunteering and helping out the local workforce here at Finca Carpe Diem.

Volunteering

Getting Here

Finca Carpe Diem Getting Here Page

Finca Carpe Diem Getting Here Page

Getting here can be quite an adventure for some so I wanted to outline the various methods of getting here by displaying intuitive instructions and making it easy to request a door to door shuttle service. I also added a map showing the location relative to the nearby towns of Santa Marta, Palomino and Minca.

Getting Here

Localization

Localized version of the rooms section on Finca Carpe Diem's website

Localized version of the rooms section on Finca Carpe Diem’s website

As some of you may have noticed, the website is in both English and Español! With easy to use toggles located at the very top and very bottom of the pages, once a language is selected, it remains for the duration of the session. Unfortunately localizing is a lot of work so not every page has been translated. The posts for example remain in the native language that they were written.

Español English

 


Building Finca Carpe Diem’s Website

Finca Carpe Diem's website on a laptop screen

Exploring the blog of Finca Carpe Diem on a laptop

I originally found Finca Carpe Diem on Workaya.net while i was searching for hostels that needed a new website. After arriving, I immediately got into the meat and potatoes of site building. I made an inventory of what they had in terms of content and, to be frank, there was a lot. Over a dozen activities, eight rooms, a restaurant with many options, ambitions for creating and maintaining a blog, and the list went on. I sat down, trimmed the fat and started with the wireframing process.

 


Wireframing & Design

First draft wireframe of the Finca Carpe Diem Website

First draft wireframe of the Finca Carpe Diem Website

When I finished with gathering content, I started wireframing and designing the site. Wireframing is much like a blueprint except completely unsaturated and focused on content flow and positioning. It was great for determining exactly what the goals of the pages and sections were. It was also essential for determining wether or not I needed to add call to actions (buttons) and other types of content funnels.

Design (pre color change) of the Finca Carpe Diem Website

Design (pre color change) of the Finca Carpe Diem Website

After the wireframing was complete I entered into the design phase. Using the wireframe as a backbone, I started adding color, fonts, images, and consistent sizing and margins to the various elements and sections throughout. Everything went smoothly due to the constant transparent communication between Kobe and I. When the design was complete, we sat down and went through it. We made minimal changes and I dove straight into the development phase.

 


Development

Developing (Coding) Finca Carpe Diem's Website

Developing (Coding) Finca Carpe Diem’s Website

Being that we’re in the middle of the jungle with internet is nothing short of amazing. That being said, there were many thunder storms that knocked out power which made it difficult to rely on the web for development. In response I developed it locally on my machine without the need for connection. This sped up development dramatically as there was seldom any interruptions. After I finished development, we went through various tweaks and changes and then launched it softly (launched it without telling anyone).

We started slowly by verifying prices and facts, replacing copy-written photos with our own, and creating and publishing posts on the blog. Now, with the site nearly complete, we’ve been posting blog posts to the Facebook page.

 


Site Development summary

Finca Carpe Diem website on laptop

Finca Carpe Diem website on laptop

It was an extremely diverse project being that it was for a finca/hostal/eco reserve/activity hub. The content diversity in my opinion was one of its strengths. While building it, I never grew tired of the site as a whole. When I grew tired of working on a feature, I was able to easily switch to another. The following was the timetable relative to the construction of the site:

Task Duration
Content wrangling 0.5 weeks
Wireframing 1 week
Designing 1 week
Development 2 weeks
Localization 2 weeks
TOTAL 6.5 WEEKS
Roughly 6 – 8 hours per day

If you enjoyed using the new website and/or have any thoughts or recommendations in terms of features you think would help users better understand Finca Carpe Diem, send us a message.

Let me know what you think!

If you enjoyed using the new website and/or have any thoughts or recommendations in terms of features you think would help users better understand Finca Carpe Diem, send them a message on the Contact Page.

If you really really really like it, and want one of your own or just want to let me know your appreciation, send me an email at vincent@vincentsmuda.com or check out my personal website which leads to my linkedin profile.

VincentSmuda.com Vincent Smuda's Linkedin Profile Contact

Vincent working on the computer

About Vincent

Vincent is a travelling web developing Canuck who enjoys nature almost as much as he enjoys programming. In his off times, he can be found venturing out into the surrounding jungles and camping/hiking. He has been with us for just over 2.5 months now and has plans of continuing on north from Panama to Mexico.

On his current trip he’s also visited Bolivia, Perú, and Ecuador where he’s also done various volunteering jobs. When he returns to Canada, his plans are to study game design and create interactive experiences that encourage youth to travel and explore our large and beautiful world!

Rooms

Image Placeholder $ 220.000 - $ 360.000 COP

ECOHUT WITH KING SIZE BED

Beautiful 35 m2 ecohut in the middle of the the hills, surrounded by lush forest. An incredible pool at only a few meters outside the cabin. Indigenous styled roof, made with palms from the tropical forest. Nice private bathroom with all services and trimmings, very comfortable king size mattress of the best quality and special...

View Room Book
Image Placeholder $ 190.000 - $ 270.000 COP

KING SIZE ROOM WITH AC

An elegant 30 m2 room with airconditioning, king size high quality mattresses and private bathroom. Great for couples who are looking to have a peaceful, clean and intimate space. Very comfortable king size mattress of the best quality and special fabric to protect yourself in case of any insects. Some nice furniture within the room...

View Room Book
Image Placeholder $ 220.000 - $ 320.000 COP

TRIPLE ROOM WITH 3 INDIVIDUAL BEDS AND AC

A quaint 28m2 room with airconditioning, 3 comfortable high qulaity beds/mattresses and private bathroom. Located just to the side of the main courtyard, it is close to both the pool and the restaurant yet far enough away that noise is not an issue. Some nice furniture within the room and a private terrace outside.

View Room Book
See all rooms

Activities

View ALL