The Nido Collection Web

Fully responsive website for the luxury student accommodation The Nido Collection ( thenidocollection.com ).

Characterised by a large use of images, abundant white spaces and a minimum amount of text, this website aims to transmit the premium feeling of the brand and assure an easy and pleasurable user journey.

CLIENT: The Nido Collection

PROJECT DATE: 2014-15

The homepage

The flexible structure characterising the website allows the addition of sections in case of brand expansion. Heavily image focused, the style is simple and minimalistic, with white borders around pictures and copy reduced to the minimum, in order to assure an easy and pleasurable user journey.

The Nido Collection Website Mobile

nido_web_home

The Location

Intuitively this is the first section to be accessed, since users will be likely to look for a city in particular and want to see where the brand operates.

The Nido Collection Website Location

The Nido Collection Website Residence

The Rooms

Rooms are the product. This is one of the most important sections of the website and with it came one of the biggest challenges: to explain clearly the difference between rooms, which prices depend on their features: type, size, level, view and contract length.

1 Choose room type…

Room type is surely the most determining feature which therefore we decide to put on a separate page, together with the staying period.

…then pick the room 2

In the next page, are listed in tables all the rooms details. In order to improve the usability, the tables are split according to their levels: bronze, silver, gold, club.

The Nido Collection Website Rooms

Room details table

Here are displayed all the information about the rooms. Clicking on each slot a small box pops up where the each feature feature is explained through icons and short texts. Floorplan and pictures boxes contains image carousels instead.

nido_web_rooms_table

Facilities

All the residence facilities are displayed at the top of the page in a clickable grid with icons. This solution not only shows the list in a easy and pleasant way, but serves also as a menu to navigate the page, in place of an annoying dropdown menu (feature which has been avoided throughout the whole website).

nido_web_facilities

Neighbourhoods & Events

These two pages are made up of an icon menu at the top, on the style of the Facilities page, and images of the place/event with a description in a textbox on the right.

The Nido Collection Website Neighbourhood

Help, About Us & Web Policies

These pages are made up of a responsive grid populated by their respective subpages, showing their header image, title and intro line.

The Nido Collection Website About and Help

Team

The team page is made up of four black and white pictures per row (two on mobile and six on large screens) which get colours when hovered on desktop or tapped on mobile. Information for each team member are only: job title, email address and phone number.

The Nido Collection Website Team Mobile

The Nido Collection Website Team

The Residents

The first page (1) follows the style of the About Us page, while the resident’s specific page (2) is made of an intro text area followed by an embed video and an html box where it’s possible to add text or images. At its bottom there is a section which shows the other residents.

The Nido Collection Website Testimonials

Contact us, Find us & Book a tour

These forms pages are sleek and minimal, characteristics enhanced by the use of icons whenever possible aiming to simplify the user journey.

The Nido Collection Website Forms

Gallery

Surely the heaviest section of the website, the gallery is a depository of all The Nido Collection images, which allows users to freely browse through it without navigating from page to page to see different images.

nido_web_gallery

1 Image gallery

Pictures are collected in albums and in this page are shown the previews of each album through a 4 pictures carousels.

2 Album gallery

Each album photos are displayed in responsive collage which allows to see many images at the same time and to create the event atmosphere. With this solution images are unavoidably cut on the sides to favourites the particular shapes, however to see them properly it’s enough to click on them and a lightbox (3) will open showing the picture in high resolution.to see them properly it’s enough to click on them and a lightbox will open showing the picture in high resolution

nido_web_gallery_mobile

The Nido Collection Video Gallery

Video Gallery

The structure of this gallery is less playful than the image gallery to clearly distinguish it from the other gallery and to give to the video a look more professional and suitable for the content.