Kaya Imani


Kaya Imani (http://www.kayaimani.com) is a web solution that promotes tourism and volunteering in east Africa. The website lists two different kinds of holidays - one is for retreat, peace of mind and tranquillity and the other is for activity, sports and bars/restaurants. The site also is a platform for volunteers who would like to learn and contribute to organic and sustainable farming in the region.

The design of the site is optimal on computers, tablets and mobiles alike. The website will not only scale well to fit different screen sizes, it will also omit or show some sections based on most relevant device.


For example, the carousel that shows changing images on the landing page will not show on mobile devices. The reason for this is that it has no effect on the audience of the site as the images will be so small the text on the images will not deliver it's purpose as it will also be too small. 

Simple, clean and sleek photo album that's also smart. The album showcases what Kaya Imani stands for like sport activities, pristine beaches and organic food. Besides, the album allows filtering photos by categories as it shows only photos that belong to a certain category.

Different page designs and attention to details has also made the Kaya Imani site a beautiful experience to users. Below is the offerings page that shows a section for everything Kaya Imani offers to its visitors. Each section contains a relevant icon that's simple and sleek and each section contains a button that expands with more information about its relevant section.  

Smart price lists that display different packages Kaya Imani offers. The lists are responsive so they appear vertical on mobile view. 

Technical details

Pure HTML5/CSS3, .NET MVC and AngularJS.
AngularJS Views, Angular Translate and Angulartics.

The site is designed purely in HTML5/CSS3. No markup, no razor...etc even though the site is a MVC site. 

Translations load very fast because they load on the client; no need for a call to the server every time a language is changed - thanks to the Angular Translate! The language is stored in a text file which gets loaded first time the site loads and it gets stored in browser local storage so that it's readily available.

Angulartics is a neat plugin for AngularJS websites especially if they make use of virtual page views. The plugin can track which view is visible on the screen and the results can be viewed on Google Analytics.