The Mansion 1907

The Mansion 1907, built in the year 1907, is an old mansion that has now been converted into a hostel. Free spirited travelers from the world over visit the space all year round.

We teamed up with the wonderful guys at The Mansion to create a website that would capture the atmosphere and energy at the hostel. We wanted it to be a reflection of the serenity that encompasses the hostel.

 

The Hero

We wanted to reflect the serenity and beauty of The Mansion right when users loaded up the website for the first time. We achieved this by using a photo taken from the balcony of the hostel that captures these two emotions. We wanted to let users know that it wasn’t just any hostel – it was a hostel steeped in heritage and culture. We also wanted users to be able to quickly book beds/dorms, and to that effect, we used a booking widget to get them quickly going.

We wanted users to be able to find information about The Mansion easily, which is why we opted for adding the relevant information on the front-page. We wanted users to be able to scroll down, where towards the left, they can find out information about the rooms, and services The Mansion has to offer, while towards the right, they can find TripAdvisor and Facebook reviews.

 

Iconography

We wanted the iconography for The Mansion to be bold and stand out from the rest of the design. We wanted users to be able to intuitively recognize the icon after a quick glance at it.

 

Services Offered

We designed the services section so users can skim through it and know what is on offer, and what isn’t. We decided to use the bold iconography we designed for The Mansion, along with a combination of text to achieve this. Placed in a grid on desktop users can quickly scan this grid, with the bold text helping them identify the important information of a particular service.

 

Typography

We used fonts that would reflect the rustic nature of The Mansion. The rounded and tall Signika font in uppercase keeps things contemporary, while still harking back to fonts from an earlier generation. For headings and body, we used Raleway for bringing about the same effect.

 

Mobile Responsiveness

We design mobile first websites at Design Infuse. We knew one of the common ways for travelers to access information on the go was on mobile, so we made sure we had a first class website that was mobile responsive.

We’ve made the website really easy to use on mobile devices. Information is easy to find, and legible even on small screens. Horizontally stacked elements collapses vertically so that users can view them while scrolling down.