MPS Builders

UX + UI Design • Online Presence Management

Background

MPS Builders was a new venture from one of Kerala’s biggest conglomerates. The MPS group set out to rejuvenate a stale real estate market through purchase and rebranding of an existing player. This task was handed over to Padath Infotainment where I was given the duty to manage the redesign of their website and to establish a new social identity to the brand.

Project
Overview

Design brief

Design a web portal that stayed true to the company’s ideologies of freshness and uniqueness. The major priority was to stay distant from existing themes followed by competitors and thus to invoke in potential customers the sense of superiority and individuality. All the information given in the existing website had to be present, but staying consistent to the new theme.

Commissioned by

Padath Infotainment Pvt. Ltd.

My roles

UI + UX designer   •   Social media designer

Outcome

The design and the prototype received great feedback from the clients. But unfortunately the design had to be toned down due to difficulties in the development stage which arose due to lack of manpower.

popup image

Design Process

Competitive Analysis

The city of Cochin is one of the most developing areas in the state. It was one of the first cities in Kerala to have high rise residential apartments. In the recent years, with the arrival of developmental projects like Infopark and Smart City, Kochi was seeing a rise in the need for residential buildings.

So, it is natural to hope for realty companies to take advantage of this scenario and ensure a thriving and competitive real estate market. But other than the realtors fighting to provide the cheapest houses at the most bizarre locations, competition in rest of the industry was rather stale.

This is what MPS hoped to change.

By absorbing a relevant player in the industry, MPS not only managed to get hold of expertise and resources, they managed to enter the fray just in time for the realty boom. To take advantage of the flat competition (pun-intended), MPS decided to positioned itself as a brand for the thriving middle class, and for helping them achieve that, they approached Padath Infotainment.

At Padath, I noticed that the competitors provided a vastly inferior online experience compared to the players in the same industry abroad. The major players like SI Builders, Asset, Heera etc had dated websites that were neither responsive nor user friendly. Almost all of the competitors websites had a similar structure and aimed at bringing their clients to their offices to gather more information rather than providing them  detailed information online.

I on the other hand speculated that the upcoming realty boom would be spear headed by the tech savvy upper middle class citizens who would be based on campuses in Infopark or Smart City. The BD team’s research supported my conclusion and I in turn decided to make them my targeted consumers thereby gaining a competitive advantage from the start.

By creating a mobile friendly, web friendly website and using minimalism to give the essence of a premium yet affordable brand, I hoped to instill a sense of freshness to MPS builders. This I believed would manage to make them stand apart from the competition.

Design Process

Moodboard

I focused my attention on bringing a design that would meet the global standards rather than just focusing my attention on regional designs. Most of the websites that I got inspired by had a strong visual appeal that would grab attention easily.

The highlight feature was the images where the apex of the building would stand apart from the rest of the image. This I used as the main element of my design as well.

Design Process

Ideation & Visualisation

At the time, Padath did not follow a rigid method to develop UI and UX since they were relatively unexperienced in this scenario. I, to my maximum capability, tried to follow the traditional UI/UX design process.

Though the internal phases went as planned, we faced severe difficulties with the phases that required feedback from the clients.

The prototyping stage was not successful as the clients were not pleased with being shown an incomplete and offline product. At the time, the tools that I used did not support any proper client feedback system unlike today. It was helpful to the developers though and I received praise for introducing Adobe XD to the company which until then were used to designing using Photoshop.

Sketching

All the sketches are presented to my superiors for approval of concept. The sketches allow me to explain my ideas in a clearer way and in a very short span of time.

Wireframing

Wireframes are build for the pre-final designs so as to test out the navigation and site layout. The development and the designs team together discuss further modifications.

Prototyping

Though meant as the first stage of client review, in this situation, it was mostly used for supporting the development team and related graphic designers.

Design Outcome

Essence

Spacious

Like the spacious rooms that MPS Builders provide, their website was also designed with breathability in mind.

Contained

A home is a private space. So is every section in the design. All the contents stay within a confined space reminiscent of the privacy in the apartments

Standing out

The major element in the design brief was to make MPS stand apart from the competition. That’s what the extrusion from the skyline symbolises.

Design Outcome

Navigation

Main Menu

Since every section contained a menu of its own, I designed the main menu to be simplistic, clear, unobtrusive and easily accessible.

Sub Menu

‘The major differentiating factor’, as the client put it, were the sub-menus specific to every single section. This allowed users to see more info without moving to another webpage.

Hidden Elements

Carousels were used as much as possible so that the users where not overwhelmed with a burst of information. These gave the website some motion and life as well.

Design Outcome

Other Pages

Design Outcome

Responsiveness

A major contributor which made the brand stand apart from the competition was the responsiveness of the design.

While the competitors websites struggled with the latest display resolutions, the MPS website was easily scalable to any kind of display.