, 'opacity': false, 'speedIn': , 'speedOut': , 'changeSpeed': , 'overlayShow': false, 'overlayOpacity': "", 'overlayColor': "", 'titleShow': false, 'titlePosition': '', 'enableEscapeButton': false, 'showCloseButton': false, 'showNavArrows': false, 'hideOnOverlayClick': false, 'hideOnContentClick': false, 'width': , 'height': , 'transitionIn': "", 'transitionOut': "", 'centerOnScroll': false }); })
During my third year at University I undertook a year long Internship with Flip Media in Dubai, working as a Junior Digital Designer. It was an amazing experience which set me on the path to be able to create a unique major project that I am extremely proud of.
YallaDXB is a dual language, infographics website about Dubai. It is made up of colourful infographics created with the data from the fascinating facts and figures about Dubai and its best tourist spots. It also includes Instagram feeds, current weather information and the top Foursquare spots plotted on a map.
I came up with the idea of YallaDXB after I returned from a short holiday in Dubai just before starting final year. Going back to Dubai, after finishing my internship 2 months before, made me realise just how much I had missed it. The idea evolved from my passion for the country and the desire to show others the wonders I experienced, all in a interesting and visual way.
Yalla means “come on” in Arabic and “DXB” is the flight code of Dubai International Airport, so essentially the name means “come to Dubai”.
YallaDXB is a dual language collaboration of visual, digestible facts and figures about Dubai and some of the main spots to visit. The website is using 4 different API’s for different features. The API’s I am using are Instagram, Foursquare, Google Charts and Yahoo Weather. I think that the use of these API’s within the site has made it more interesting and gives users something to interact with, all while providing interesting information.
YallaDXB has sponsorship options as in Dubai companies are willing to pay for their logo to feature on websites. YallaDXB provides different levels of sponsorship, each with different benefits for the specific level of sponsorship. Gold sponsorship allows the company to have a custom infographic displayed that is relevant to them, essentially a subtle but unique infographic advert.
I have created YallaDXB in Arabic and English to ensure it appeals to a wider market, with both English and Arabic speakers being able to enjoy the website. As Arabic is read right to left, the design has been flipped for the Arabic version, to ensure a seamless user experience.
There is a definite niche in the market in Dubai for such a website as there are not any competitors that display all the information that YallaDXB provides in one place. YallaDXB has quite a wide target market, but it mainly focused on expats, their families and holiday makers who don’t know much about Dubai.
YallaDXB is built using HTML5, CSS3, jQuery and Twitter Bootstrap, this allows the website to be fully responsive across all browsers and devices. On the backend it uses PHP and WordPress as the content management system for the website. This allows easy access for updating facts regularly, as the information will change on a regular basis.
YallaDXB combines many different APIs and plugins, creating one giant mash up website. Each of these have their own specific role to play in the website, to be able to get the latest information to the user and add dynamic data constantly.
Instagram API: Using PHP and json data I am pulling the latest content based on location to keep the photographs realistic for each spot. I am also using a hashtag solution as a fallback because the location pull has known issues within the API.
Foursquare API: Combined with Mapbox and a great amount of jQuery, I am able to create a list of YallaDXB’s recommended spots to visit in Dubai. This is then plotted on a map for the user to see the location of each of these spots and how many people have visited.
Yahoo Weather API: Working with the Simple Weather jQuery I was able to output the current temperature in Dubai. I stripped the plugin right down to just have the raw data, then I created a thermometer with an inline styled bar that depending on the weather increases or decreases based on percentages that I calculated using jQuery.
ChartsJs: This plugin creates a canvas image using HTML5 and jQuery. As the website is responsive finding a plugin that creates graphs and was responsive was next to impossible, however I was able to add some CSS and make the HTML5 element scalable therefore this was the perfect solution.
Browser Compatibility: The website has been designed and built for all modern browsers including Internet Explorer 9, Internet Explorer 8 or below gives the user a message along the top of the website telling them to upgrade their version as the website is not optimised for their browser.
I used Typekit for the English website’s fonts and then I used the early access Google web fonts for the Arabic.
I used Google Drive constantly to keep regular task lists, reported bugs from my usability tests as well as for dealing with the Arabic translator. This helped keep all my information together so it was easy for me to access.
I would like to say a special thanks to those who helped make YallaDXB what it is today. Lutfi Qaraman for providing Arabic translations for all of the site content and doing so extremely fast. Mohammed Affan for his help with creating a fallback for the Instagram API when it fails due to a known bug in the location pulls of the API. Alexander Morris for providing feedback, spotting bugs and user testing the site over the last few months. Also all the photographs on the website were taken by Alexander. Christian McAdam for putting up with my ranting over the last few months, providing design feedback, random bug squishing and general support. Gabriel Muldoon for helping point me in the right direction with the design of YallaDXB after I kept changing it, I took all of his feedback on board and it has helped shape how YallaDXB looks today. Finally my Mum and Dad for putting up with me stressing out, providing me with food at my workstation and a steady supply of coffee.
Looking back now I can’t believe how far YallaDXB has come. From just an idea on paper to a fully working, dual language infographics website. It has been through a lot of different design iterations, but now I am 100% happy with the whole website and the months of hardwork and frustration have been worth it. Having a major project that I am proud of has topped off 4 amazing years at University studying Interactive Multimedia Design.
YallaDXB provides a beneficial and interesting source of information to a wide variety of people, not only in Dubai but worldwide, through the use of infographics. Hopefully it will let visitors experience the wonders of Dubai that I have experienced and introduce them to some of the most amazing sights in the world.
YallaDXB was awarded Best Major Project of 2013 by the University External Examiner out of a class of 74 students. I am graduating in July with a First Class Honours in Interactive Multimedia Design and a Diploma in Professional Practice International with Commendation.
Using foursquare, YallaDXB have selected some of the most popular spots to visit while in Dubai. Check them out!