Armani Hotels & Resorts brings together the impeccable taste of Giorgio Armani and the developmental expertise of Emaar Hotels & Resorts. The Emaar – Giorgio Armani partnership is truly global in nature. Emaar, one of the world’s leading integrated lifestyle developers, and Giorgio Armani, one of the world’s leading fashion icons, together create a brand and a product that is unsurpassed in innovative design, style, form, and function.
Overview: The project was divided in two phases. In the first phase, we focused on creating custom repeatable backend blocks to be used by marketing teams for content upload across various pages on the website replacing the older wordpress blocks while the phase 2 of the project focused on creating new blocks and pages according to the new designs approved by the client and marketing teams across both the teams in Dubai and Milan.
Duration: May '22 to July '22, November '22 to Feb '23
Role & Responsibilty: During the phase 1, I was the sole frontend developer overlooking the creation and handling the UI of the new custom blocks being created making sure that any content uploaded from the blocks didn't break any layout and structure on different viewports. The CSS had to be logically set-up to tackle this, declaring different scenarios in the code for the many edge cases. For, the phase 2, I took the position of lead frontend / product designer to manage a small team to handle new developments including running new campaigns and updation in the UI of small but important components such as the navigation and footer.
We as a team had a definite vision, to follow the design guidelines that was outlined in the design system to give the user an experience that the brand Armani represented, a classic way to life.
To showcase each individual hotel in Dubai and Milan, a discovery section is intentionally placed in the homepage of armani hotels so that users could navigate to the location of their choice. Each venue have their own separate sub-sites each highlighting their own style and services they provide for a guest at their stay.
Phase I - Custom Dynamic Blocks, Timeout and Media Center pages
Custom Dynamic Blocks
Custom dynamic blocks refer to the individual blocks in the CMS where content can be uploaded in the fields provided. In brands such as Armani, what the main requirement turns out to be is the ability of the marketing team to themselves upload content on their website based on campaigns they are running. Basically we are trying to avoid the continuous handshake between the developers and client.
What we require, is a simple structure where the frontend in the site is easily recognizable in the backend CMS so as to avoid any confusion in the client side and hence content/data can be updated quickly. All they have to do is just open the particular page in the admin and compare the design of what they see live in the site and change according to their requirement.
Note: *Special attention have to put in the CSS for the alignment of two different blocks to come together for chessboard structure to come into alignment in desktop view.
Media Center
The media center aimed at bringing all the media and press releases associated with armani hotels in one place, creating in essence a virtual library of all things Armani.
Images made up of the primary source of media that was to be showcased. Drawing inspiration from the classic masonary layout, we as a team decided to use that to frame the structure of this page. Consequently, it made sense to add a popup to each image upon click, so to enhance the viewing experience. For this we used the jquery library of magnific popup.
To arrange the images in masonry layout, different solutions could be used in CSS, but I personally felt, the column layout provided the simplest solution here (although CSS Grid is also very convenient in this case, but due to lack of browser support at the time of development, i.e IE and some versions of safari, we opted for this method)
A section of all press releases for Armani was also created in the adjoining tab to help the user keep up with the current events.
Timeout
Time Out gives an overview on what is taking place in the city of Milan and its surroundings and on the places not to be missed, offering a focus on art, fashion, design, sposrts, music and much more.
Phase II - Navigation, Content pages and Footer Changes
Sidebar Navigation
An extra layer of navigation had to be added in the parent global armani hotels website to incorporate the overall brand of Armani i.e the fashion and design world of it. This was a particular requirement from the client so that incoming traffic could also be directed towards the other brands of Armani.
We already had our primary navigation related to the hotel booking, sticking at the top.
Now, there were multiple links to be put up in the new navbar. Aligning them horizontally in a standard way didn't make sense, not only would it cause responsive issues on smaller screens but too many options from both the navigations would also add to the confusion and cognitive load on the user.
Therefore, we went ahead with the idea of a collapsable sidebar navigation with a hamburger button on top left hand side of the page. With an overlay on the rest of the screen when the menu is toggled on, the user is naturally directed to focus on the links in the sidebar thus enabling more traffic to these external sites.
From the development side, custom CSS and vanilla JS was used to build the sidebar. I personally went against the idea of using the pre-existing offcanvas sidebar present in bootstrap. Creating a custom navbar was a better idea here since it gave us more flexibility in declaring the styles according to our needs instead of overriding the default CSS in bootstrap which only leads to redundant code and a fair bit of headache in making any future changes.
Footer - Milano
Similarily, the footer in Armani Milano was also to be revamped in this phase to accomodate the new certifications and brands associated with Armani Milan
Content Pages
According to varying requirements by clients based on marketing campaigns that were run by our client, several content and landing pages were created. One of them is mentioned below
One of them was, was the landing page for Valentine's day, this was close to my heart. For this, I was in charge of the whole design and implementation. I had a back and forth conversation over mail with our client in milan. She had a particular idea for the page and had asked someone from the team to create a rough layout and she gave me a .psd file. So, at that time I carried on with the same file to create the further design, hence it was the only time I had worked or designed a webpage in photoshop.
Learnings
- You can achieve a lot through plain vanilla CSS, rather than trying to implement the libraries which are nothing but subsets of the language. Also, the flexibity it provides in layout and certain style changes are worth spending that extra time.
- While dealing with big brands like Armani, I realised that visuals along with the cpoy become far more important, certain tonality and brand awareness has to be there in maintaining a uniformity in the whole website. I learnt this especially when I was working with the product and the content managers on certain designs, mutliple rounds were scheduled just for the copy and visual overview.
- Whitespace is of paramount importance in setting a brand identity or design