Emaar - My Dubai New Year

Emaar Properties (or simply Emaar) is an Emirati multinational real estate development company located in the United Arab Emirates.It is a public joint-stock company, listed on the Dubai Financial Market, and has a valuation of US$16.8 billion as of August 2023. Emaar Properties Dubai is one of the largest real estate developers in the UAE and is known for various large-scale projects, such as developing Burj Khalifa, the tallest building in the world.

Overview: For the occasion of new year celebrations ever year and to highlight the events celebrating it including the various venues around dubai, a showcase/marketing website was aimed to be built for celebrations that happened and for the ones to come, celebrating the timeline of events.

Duration: September '21 to November '21'

Role & Responsibilty: Lead Frontend Developer, designer. As the sole developer for this project, I took on the task of creating the design system with the guidance of the offshore designer and the PM, crafting the whole UI interface and the front end functionality from scratch. Initially only provided with the desktop design, I also had to build the mobile screens on the flow, keeping in mind the responsiveness is maintained in all viewports

Initial Layout and Design System

Initially, we required a single landing page to showcase everything related to the Dubai New Year, mainly visual content with videos and rich imagery but at the same time also had to arrange and present the data in such a way so that the user can easy navigate the content provided in a very accessible fashion both at the mobile and desktop screens.

For layout and design, we preferred the bootstrap library for the ease of structure and the 12 column layout grid system built in it, also for the various built-in utilities of margin and padding. Having a design system for a single landing page may not look like huge necessity here but in this case we have mutliple sections and recurring styles, and for this reason keeping in mind the DRY coding principle and to avoid redundancy implementing a design system using an external library like bootstrap makes complete sense.

( 12-column grid layout in bootstrap defined with the help of classes as col-1, col-2....col-12 )
( Padding utilities defined in the bootstrap system, same goes for margins with classes .me-1, .me-2, .me-3, .me-4, .me-5 )

Navigation

With a center aligned navigation to show all the links in one single line, the mobile navigation meanwhile would slide in from the right on click of the hamburger menu present on the far right of the main logo.

( On clicking hamburger button, menu slides-in from the right on smaller screens )

Framing the sections

Keeping in mind the experience that was decided to be focused on the rich visuals with a dark contrast background, making the sections 100vh, that is, each section would have a height of 100% of whatever the viewport/device the user is visiting the website..

( Video hero section with scroll arow indicating lower sections)
( Modals are opened with click on pointers in the section giving additional information. * Modals are particularly helpful in such situations where we want to add information upon user interest without overloading the page in the first instance )
( Grid layout structure using the default bootstrap flexbox grid, though in hindsight CSS grid can be easier to implement, but was avoided due to lack of browser support in IE, and early versions of safari at the time project was being built )
( Multiple sections have Youtube iframe embedded in it, with custom thumbnails being implemented to enhance customization according to marketing team's needs )
( Footer is center aligned keeping it very concise and focused with a logo on top and a background matching the navigation color )

Responsiveness for mobile

With a center aligned navigation to show all the links in one single line, the mobile navigation meanwhile would slide in from the right on click of the hamburger menu present on the far right of the main logo.

( On clicking hamburger button, menu slides-in from the right on smaller screens )

Arabic Translation and Final Touches

Catering to the region of middle east, the website also had to be translated or toggled into Arabic. For this we used the WPML plugin that is available in wordpress envivronment to switch the from one language to other. Basically, two separate pages are generated in the CMS for each language. This was a particular requirement from the client so that different content can be uploaded in both of them.

In the code level, the CSS had to be written in such a way, so that both the styles of English and Arabic can be accomodated (english language goes from left to right and arabic goes from right to left). Considering this the use of logical properties became crucial for margins and alignment.

( a toggle is provided to convert from English to Arabic and vice-versa in the navigation menu both in desktop and mobile view )

Learnings and Conclusion

In my personal experience, the most important learning from this project was the speed, that if we have a good design system in place, we can easily scale up things. This project was completed on a very tight deadline with both development and design going hand in hand together. Teaming up with the PM and accurately identifying the requirements initially in the project helped in quick completion of the project.

Lastly, this project highlighted the importance of rich visuals and imagery in creating the overall experience of the website and more importantly the brand which we were trying to showcase to the audience.