Realty Trends

DIPLOMA PROJECT Realty Trends Information & User Interface Design Sponsor : Info Edge (India) Limited STUDENT : JISHNURAM C. A. PROGRAMME : Post-Graduate Diploma Programme

GUIDE : RUPESH VYAS

2014 COMMUNICATION DESIGN FACULTY (GRAPHIC DESIGN)

National Institute of Design Ahmedabad

The Evaluation Jury recommends JISHNURAM C. A. for the Diploma of the National Institute of Design Communication Design (Graphic Design)

herewith, for the project titled "REALTY TRENDS : Information and User Interface Design" on fulfilling the further requirements by

Chairman Members :

*Subsequent remarks regarding fulfilling the requirements :

Registrar(Academics)

*

Realty trends Information & User Interface Design

6

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Acknowledgment My sincere thanks to

Guide Rupesh Vyas

Price trend project team Lokesh Bitra Amit Singh Pratyush Sinha Ravi Kumar Singh

Feedback and support Yogesh Kumar Ajay Kumar Prabhudha Thanuram C. A.

Photograph Abhay Vyas

Proof reading Athira Gopal Swathi Rajagopal Gopikrishnan All my classmates, seniors everyone who helped me in some or the other way in the project. And, I would like to thank my parents and brother for giving all support they have provided throughout my life.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

7

8

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Synopsis

T

he project was to design a property price trend research platform for 99acres.com, which provides the user about past & current price trends with a heat map. This web GUI platform also provides the information about the future development plans across India, which would help the user to take better decisions on what kind of property to invest, where to buy, when to sell, and other research needs.

This informative GUI platform, providing maps and graphs shown at the same time, is customisable by the user according to their various real estate research needs; so that the user will get the proper information about the exact location. The user also can directly interact with deliverable was the interactive prototype of realty price trend along with the documentation of work processes.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

9

Phase

02

Understanding Context

Phase

10

01

23

Overview of Indian real estate sector

24

Ongoing and upcoming development projects

26

Realty terms & meanings

28

Competitor analysis

30

Price trend

42

Phase

03

Introduction

13

About NID

15

About Sponsor

17

Features

30

Realty price trend

42

About 99acres

18

USP

32

Existing similar products

42

About Guide

19

Visual Language

34

Literature study

45

My team

20

Rank

38

Trends in other context

47

Project proposal

21

39

Overall insights

49

Overall insights

Study of data visualisation

41

Contents JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Phase

06

Design development & 87 88

05

Phase

Design approaches

59

Target group

60

User persona’s

60

Concept explorations

62

Metrics

67

51

Summary of concepts

67

User interface

53

Final concept

68

Graphic user interface

53

User test

72

Evolution of GUI trends

54

Current GUI trend / style

56

Phase

04

Study of user experience

Realty price trend on various screen sizes

Typeface

89

Icons

89

Search box widget

90

Colour

92

Customised Google map

96

Layers

98

Grid

99

Phase

07

Conclusion

101

Conclusion

102

74

Future directions

102

Bibliography

103

81

Webliography

103

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

11

12

Introduct i JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Phase

01

t ion

About NID About sponsor About 99acres About guide My team Project proposal

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

13

14

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

About NID In 1957 the Government of India requested the Ford Foundation to invite Charles and Ray Eames to visit that would lead to the founding of NID and beginning of design education in India. NID was established in 1961, and has been a centre for design education, practice and research since then.

T

he National Institute of Design (NID) is internationally acclaimed as one of the foremost

education and research. The Business Week, USA has listed NID as one of the top 25 European & Asian programmes in the world. The institute functions as an autonomous body under the department of Industrial Policy & Promotion, Ministry of Commerce & Industry, Government of India. NID is recognised by the Dept. of of Science & Technology, Government of India, as a

NID has been a pioneer in industrial design education after Bauhaus and Ulm in Germany and is known for its pursuit of design excellence to make “Designed in India, Made for the World” a reality. NID’s graduates have made a mark in key sectors of commerce, industry and social development by taking role of catalysts and through thought leadership.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

15

Infoedge Brands >

16

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

About Sponsor The Company was incorporated on May 1, 1995 under the Companies Act, 1956 as Info Edge (India) Pvt. Ltd. and converted into a Public Ltd. on April 27, 2006.

I

nfo Edge (India) Limited (Info Edge)

recruitment, matrimony, real estate, education and related services.

Businesses

The company, with a view to tap into the growing and vibrant Indian internet market, undertakes investments in early stage companies / start-up ventures. As of March Pvt Ltd (www.zomato.com); Applect Learning Systems Pvt Ltd (www.meritnation.com); Etechaces Marketing and Consulting Pvt Ltd (www.policybazaar.com); Kinobeo Software Pvt Ltd (www.mydala.com); Canvera Digital Technologies Pvt Ltd (www.canvera.com) and Happily Unmarried Marketing Pvt Ltd (www.happilyunmarried.com).

Recruitment – This comprises online recruitment www.naukrigulf.com a job site focused at the Middle East job market) and offline executive search (www.quadranglesearch.com). Related sites in this business are a professional networking site (www.brijj.

collection activities for their businesses. To cater to

the employee strength was about 3,150.

Matrimony – This comprises online matrimony Jeevansathi Match Points.

Real Estate (www.99acres.com), a real estate brokerage business (www.allcheckdeals.com), housed in a subsidiary named Allcheckdeals.com India Pvt. Ltd.

Investee Brands >

Education (www.shiksha.com).

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

17

About 99acres Info Edge’s online advertising, real estate brand, 99acres is amongst the pioneer in this space with its inception in September, 2005. It was launched as a gateway to the country’s exponentially growing real estate market since last six decades.

T

real estate market online and has a pan India listing of properties for sale, purchase and rent spanning 25 plus cities. It brings together builders, brokers, dealers and interested buyers /sellers and connects them over the online medium. Property listings were over 2.5 million

99acres.com is an information ‘exchange’ internet portal for all types of residential and commercial properties in urban and remote parts of India. It also caters to the NRI audience in the US now.

The website enables the netizens (Internet Citizens) an easy access to a huge property bank and connect directly with individuals/brokers/builders. It provides: information about buying, selling and leasing various types of real estate in India.

18

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

•

Information about renting or paying guest facility.

•

Discussion on queries regarding on buying, selling and leasing properties.

•

Advertisements for buying, selling, leasing or renting of properties.

•

Information about the latest projects coming up.

With properties being listed by builders, brokers and individuals, the portal has many listed properties at any given time for the visiting users and maintains an updated nationwide database of agents, builder/ developers, properties and registered buyers.

About Guide

R

upesh Vyas is a Senior Faculty in Communication Design, Activity Chairperson Online Programmes at NID. In the recent past he has been Head of Information Technology & Coordinator of Graphic Design.

He takes lead role in developing Information & Interaction Design as emerging domain under Communication Design & IT Integrated Design Disciplines at NID. He is a Board Member of International Institute of Information Design (IIID) which is based in Vienna, Austria.

He has Masters degree in Visualization & UnderGraduation in Applied Arts (Graphic Design) from M. S. University of Baroda. He has 17 years of experience in Communication Design education, research & professional projects. Prior to joining NID in 2002 he was a lecturer at Faculty of Fine Arts, M. S. University of Baroda.

He has wide areas of academic & professional interests which includes Visual Identity design, Static & Dynamic Graphic Application, Documentation of Visual Culture of India, Colour in Analogous & Digital medium, Way Finding Systems, Information Graphics, Complex Information Systems & Visual Diagraming. He has special interest in strategic design innovations with socially relevant issues & exploring newer ways of information, interactions & interfaces in governance, social sector & public domain.

level implementation, by Ministry of Road Transport & National Informatics Center, Government of India.

He has traveled & presented in various National & International conferences like ICOGRADA, in Japan, Austria, “Vision Plus 12” at Schwarzenberg, Austria on Designing Information Products in public spaces & in Korea Digital Design International conference on Vernacular Approaches in Designing Information for Information Connectivity System (ICS) for European Union project funded by Unesco.

He was key planner & Chair for “Vision Plus 2010” conference (www.iidi.in) in India hosted at NID. “Vision Plus” is an internationally recognised series of conferences, dedicated to all aspects of Information Design, initiated by IIID, which invited national & covered a wide range of engaging issues in the domains of Communities, Healthcare & Mobility.

consultancy projects having National importance like Information Design for Census of India 2011 Data Collection & Digitization processes & Multipurpose National Identity Card for Citizens of India from Ministry of Home Affairs, Government of India, Smart Card based Indian Union Driver’s License, Standardizing Visual Design for National DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

19

My team The project involved a product team and a UI team. The product team focused on the content and features of the product, and the UI team on the user flows and look and feel of the product.

Ravi kumar singh Product Development Manager

Pratyush Sinha AVP Product Management

Amit Kumar Singh Senior VP, Product Management

Lokesh Bitra Vice President, UX & Design

20

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Project proposal About the company 99acres.com is an internet portal dedicated to meet every aspect of the consumers’ needs in the real estate industry. It is a forum where buyers, sellers and brokers can exchange information quickly, effectively and inexpensively. It works under the parent company Info company in recruitment, matrimony, real estate, education and related services.

Project background 99acres started its inception in 2005. It has managed to collect a vast database of property listings. Now the company is looking on how this data can be customised to utilise public for their property research needs. This would make users more clear about realty sector. User friendly interface and reliant data attracts more users into the site which will make the site more trustworthy and help to grow further more.

Need for design The real estate sector in India is presently worth 15 Billion and it is growing at a phenomenal rate of 30% per year. High growth of GDP and increasing GDP per capita in the country providing a momentum to the real estate demand across segments. The current population of India is over 121 crores which will reach around 150 crores by 2030. This leads to a huge demand in real estate area for their residential, commercial and investment needs. But at the same time the realty sector in India lack transparency

Deliverable

and is dominantly handled by brokers and dealers. They put the customers into confusion during their property search. Currently, when the seekers look at buying or renting of property, they do not have any credible third party source to update them on the going rate in the

User flow and UI design for property price trend.

gathered from friends and relatives, leaving scope for an error. A research platform is needed for the user to know about past, current and future price trends with various locations. This would help the user to take better decisions on what & where to buy, when to sell and other research needs.

Understanding the realty sector and studying the users’ various needs, the user experience has to be enhanced through user friendly and sensitive interfaces.

Time plan: Duration: 4 Months, (1st Feb to 31rd Month

February 1

2

3

May 2014)

March 4

5

6

7

April 8

9

10

11

May 12

13

14

15

16

Understanding Context Research Analysis and Synthesis Conceptualisation User testing Documentation DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

21

Understand i 22

Context JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

d ing

Phase

02 Overview of Indian realty sector Ongoing and upcoming development projects Realty terms and meaning Competitor analysis Features USP Visual language Rank Overall insights

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

23

Overview of Indian real estate sector The real estate sector is a critical sector of our economy.

It is the second largest employment generating sector after agriculture. Growing at a rate of about 20% per annum, this sector has been contributing about 5-6% to India’s GDP. Not only does it generate a high level of direct employment, but it also stimulates the demand in over 250 ancillary industries such as cement, steel, paint, brick, building materials, consumer durables and so on.

The Indian real estate industry has been on a roller coaster ride since 2005. Consequent to the government’s policy to allow Foreign Direct Investment (FDI) in this sector, there was a boom in investment and developmental activities. The sector not only witnessed the entry of many new domestic realty players but also the arrival of many foreign real estate investment companies including private equity funds, pension funds and development companies entered the sector lured by the high returns on investments. The real estate sector has been riding through many highs and lows since then.

The industry achieved new heights during 2007 and early 2008, characterised by a growth in demand, substantial development and increased foreign investments.

However, by mid 2008, the effects of the global economic slowdown were evident here too, and the industry took a and what had emerged as one of the most promising markets for foreign investments experienced a downturn.

24

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Strength The size of country’s gross domestic product (GDP) was about 20-25% per annum, India’s construction and real estate industry sectors have been contributing about 5-6% to India’s GDP. India ranks as having the second fastest annual growth in residential property prices out of 50 world economies.

The Government of India Press Note No. 2 of 2005, permitted FDI up to 100%, under the ‘automatic route’ in townships, housing, built-up infrastructure and construction development projects.

Increasing urbanization at an unprecedented rate of almost 71million people being added to the urban population has resulted in growing demand for housing.

Weakness Decreasing sales volume against increasing demand with property prices increase ranging from 15% – 50%, Indian real estate sector has seen a substantial decrease in transactions

Cities are no more affordable. City properties have become frightfully expensive and incomes have not been able to keep up. On a per capita basis, annual gross a much lower rate than 30.8% growth in house prices.

Indian real estate, still largely a disorganized sector needs

to embrace professional standards and transparency to some extent.

Builder’s lack of funding result in incomplete projects because of their inability to ascertain repayment and huge debt backlogs, banks do not lend real estate developers with funds so easily, impacting execution capabilities of developers. Builders announce projects but

Opportunities India has huge potential to attract large foreign investments into real estate. With real estate reaching a point of saturation in developed countries and the demand and prices falling, global real estate players are looking at emerging economies such as India for tapping opportunities in real estate. Indian real estate will stay attractive due to its strong economic fundamentals and demographic factors.

The construction industry has immense potential for generating employment that has not been impacted by the slowdown. As many ancillary industries such as cement, steel, brick, timber and building material are dependent on the industry. In 2011, 10.2% of the employed in the construction sector in India.

Interdependent industries for Infrastructure support, growing infrastructure requirements from other sectors such as retail, hospitality and entertainment (hotels,

resorts, cinema theaters) sectors, economic services (hospitals, schools) and information technology (IT)enabled services (like call centers) are also providing opportunities in the real estate and construction industry and vice versa.

The falling rupee and the lull in the property market in many cities are attracting Indians settled abroad to consider property investments in India. Non-resident Indians are allowed to purchase residential or commercial property in India but not agricultural land /plantation property / farm house.

NRIs can also take interest-free loans from close relatives who are resident in India and are subject to pay TDS withholding (at the rate of 1 per cent) for property purchases over Rs 50 lakh.

Threats The key challenges that the Indian real estate industry is facing today are lack of clear land titles, absence of title insurance, absence of industry status, lack of adequate

increased monitoring of the sector by regulatory agencies, tightening of rules for lending to the real estate sector and increase of key rates by the RBI several times during the last one year, have arrested the growth of the sector.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

25

Ongoing and upcoming development projects Knowing ongoing and upcoming development projects is important for the people those who are involved in realty transaction. Infrastructure development like new roads, IT hubs, shopping malls, hospitals and schools being built, it is a sign that the community is set for a growth spurt.

Diamond Quadrilateral project The ‘Diamond Quadrilateral’ high speed network connecting the four major cities of India are located

450 km

991 km

Technical evaluation Amritsar

ministry

Chandigarh

591 km

Delhi

Tenders for engaging consultants to be invited shortly

Jaipur Jodhpur

Lucknow

Varanasi Howrah Haldia

Mumbai Hyderabad

Final pre-feasibility report submitted last year. cost estimated at Rs. 70,000 crore

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Agra

Ahmedabad

543 km

26

Ajmer

Patna

that is expected to get bullet train on the tracks is between Ahmedabad and Mumbai. This most probably will be followed by the Delhi-ChandigarhAmritsar stretch. Few other corridors on papers are Hyderabad-Dornakal-Vijayawada-Chennai, ChennaiBangalore-Coimbatore-Ernakulam, Howrah-Haldia and Delhi-Agra-Lucknow-Varanasi- Patna.

Envision of Diamond Quadrilateral high speed trains

Pre-feasibility submitted recently.

Cost around Rs. 90,000 crore

850 km

Pre-feasibility studyies being conducted.

135 km Dornakal Vijayawada

Bangalore Coimbature Ernakulam

Thiruvananthapuram

Pre-feasibility studyies being conducted.

Inception report and draft

Chennai

664 km

Study in progress

Golden Quadrilateral project

GIFT City in Gujarat

The Golden Quadrilateral is a highway network connecting many of the major industrial, agricultural and cultural centres of India. A quadrilateral of sorts is formed by connecting Delhi, Mumbai, Kolkata and Chennai, and hence its name. Other cities among the top metropolises namely Pune, Ahmedabad, Jaipur, Kanpur, Surat in the north and Bengaluru (mainly connects north-west and minimal parts of south-east regions), Visakhapatnam & Bhubaneswar in the south are also connected by the network.

Spread over an area of 886 acres, GIFT city project aims at state-of-the-art internal infrastructure encompassing all basic urban infrastructure elements along with an excellent external connectivity by roads, metro rail and Bus Rapid Transport Service (BRTS).

The 165kmlong Yamuna expressway is one of the longest access-controlled six-lane rigid pavements in India. With the help of Yamuna Expressway, the rapid transit corridor between Delhi and Agra, the drive from Greater Noida to Agra takes just 90 minutes.

On the 165 km Greater Noida-Agra expressway, the maximum speed limit is 100 kmph for cars and 60 km for heavier vehicles. The Yamuna Expressway, besides connecting Delhi to Agra through Noida-Greater Noida Expressway, touches 1,182 villages of Gautam Budh Nagar, Bulandshahar , Aligarh, Hathras (Mahamaya Nagar) and Mathura district.

The Hyderabad Metrorail is the world’s largest elevated Metro Rail PPP project based on DBFOT basis (Design, Built, Finance, Operate and Transfer).

The Union urban development ministry has decided to consider the proposal for Metro in Tier II cities like Lucknow, Kanpur, Patna, Ahmedabad, Pune, Surat, Indore, Nagpur, Coimbatore, Kozhikode. Guwahati will soon have Metro rail with the Centre approving Assam Government’s proposal for the mass transit system.

companies, a trade centre, housing colonies, social infrastructure and other associated amenities. The project is expected to create ten lakh new jobs in ten years.

system instead of air-conditioning. It will also use an automated waste collection system that sucks away garbage from buildings at high speed.

Metro rail projects in various cities While Bangalore has already started metro services, Jaipur, Gurgaon and Mumbai are expected to begin operations this year.

Mumbai’s Chembur-Wadala monorail section, which

The expressway provides a safe and an uninterrupted nation capital Delhi and Agra.

Palarivattom is expected to be completed by December 2015 and the second by March 2016.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

27

Realty terms & meanings Understanding terms & meaning of realty sector is important. This project would not have moved ahead without knowing the basics of realty sector. Some of the basic terms & meanings are shown here.

28

75%

85%

100%

Carpet Area

Built Up Area

Super Built Up Area

This consists of the actual area that can covered by a carpet.

This consists of the carpet area and includes the width of the walls and columns.

This consists of the carpet area, built up area as well as apartment’s proportionate share of the common facilities like the corridor, lift, lobby etc.

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Length

Area

Millimeter

1 sq ft

Centimeter

1 sq yard

One-thousandth of a meter

10 millimeters

Inch

50 millimeters 5 centimeters

Feet

300 mm 30 cm 12 inches

Meter

144 sq inches

9 sq ft

1 acre

43560 sq ft 4840 sq yd 4040 sq mt

1 hectare 11954 sq ft 10000 sq mt 2.4711 acres

100 centimeters 39 inches 3 feet and 3 inches 10.76 sq ft

1 sq mile

1 km

1 sq Jareeb 3 Kaccha Bigha 20 Bissa 3025 sq Yard 2529 sq mt 27225 sq ft

1000 meters

1 mile 5280 ft

640 acres

1 Pucca Bigha

1 Kaccha Bigha 6 2/3 Bissa 1008 sq Yard and 3 sq ft 843 sq mt

1 Bissa

1 Ground

1 Gaz/yard

1 Aankadam

20 Biswansi 20 Sq.Gattha

1 Yard 0.91 Meters 36 Inch

1 Hath ½ Gaz 18 Inch

2870 sq yd .2400 hectare

775 sq ft 72 sq m

1 Rood

1.1 hectare

1 Chatak

1Gattha 5 ½ Hath 2.75 Gaz 99 Inch

1 Jareeb 55 Gaz/yard

1 kanal 500 sq mt 5380 sq ft 597 sq yd

1 Bigha

2500 sq m 0.2500 hectare

35 hectare

450 sq m 4844 sq ft

1 Kottah 720 sq ft 67 sq m

1 Cent

435.6 sq ft 40.5 sq m

1 Perch 2931 sq ft

1 Guntha 1089 sq m

1 Are

1076 sq m

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

29

Competitor analysis Features REAL ESTATE Buy Rent Lease PG Land Commercial Sell Projects/Builder New projects Hot deals List view Map view 3D view Agent Post / Listing Post requirement Property review PROPERTY RESEARCH Price trend News Heat map Lifestyle rating Shortlist option Compare option Approvals Buy Vs Rent option EMI / Affordability calculator Feature

30

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

USP

CUSTOMER CARE Site visit Toll free Live chat Forum Home loans Legal assistance MOB APP Android ios BLOG Blog APARTMENT COMMUNITIES Communication Management Social Accounting Security HOME NEEDS Decor Service Appliance Community needs Health Education Lifestyle

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

31

Bar diagram for comparing all the features After listing down the various features of competitors, a bar diagram was made to compare the total features of each website. It shows that Commonfloor has got more unique features than the other competitors.

USP Commonfloor has unique features like site visit, social platform for communication among apartments, payment gateway, and it also provides the information about the vendors for various home needs.

32

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Housing Housing.com introduced the unique feature of map search in 2012 and later other competitors followed them. Nevertheless, they have the unique features of aerial view of new projects, price heat map, demand & supply monitoring tool, and it is the only

Makaan the home buyers including latest news on the Indian real estate sector and analysis of the property trends across major Indian cities. The Makaan.com Property Index (MPI) and Makaan.com Buy v/s Rent Index (MBRI) are two monthly indexes released by MakaanIQ that track property and rental prices in various cities in India.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

33

Visual Language

99acres of buildings, which the users can easily associate with the real estate rather than the brand 99acres.

The shade of blue is the prominent colour used for 99acres. Overall layout looks so crowded with advertisements. They have used different styles in the same page.

34

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

The Commonfloor used a key as the symbol for their logo, and it is well connected with the brand and realty sector. The alphabets ‘C’ & ‘F’ are used to create the symbol of the key. The shade of orange is the prominent colour used for commonfloor. The layout and features are arranged well.

Magicbricks

Housing

Magicbricks doesn’t have any symbol in their logo.

Black and a shade of red are the prominent colours used for their website. Layout and basic structures are similar to those of 99acres.

The key chain is used as the symbol of housing. The form of house is used for the housing.com. The shade of blue and white are used as the prominent colours for housing.com. It has a well structured layout.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

35

Indiaproperty Indiaproperty also does not have a visual symbol for its logo. The shades of blue and green are the prominent colours used on the website. The layout and structures are totally different from its competitors.

36

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

makaan The symbol of house is used for their logo.

The shades of blue and orange are used as their brand colour.

Propertywala also used the house as symbol of their logo. The complimentory colour scheme of red and green shades are used as their prominent colours.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

37

Rank Global Rank (India)

Country Rank (India)

http://www.alexa.com/website/99acres.com

http://www.similarweb.com/website/99acres.com

99% 74% 55%

46%

12%

1%

8%

2% -3%

38

406

830

291

830

938

353

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

2014

372

-7%

1,983

2,193

6,246

2,661

2,335

9,553

20,599

2013

2014

282

2013

-12%

2,177

4,059

885,597

2,710

9,060

9,518

19,205

Overall insights The study was done about the various features of 99acres and its competitors. Unfortunately 99acres doesn’t have any unique feature from its competitors.

Commonfloor has more features than its competitors. Their “site visit” feature lets potential buyers to have a free ride in a cab to the project site of their choice and back home. Through this feature the commonfloor has shown a physical presence to its users rather than virtual. They are not only providing the information about the real estate properties, but also providing features like apartment communities and home needs. Through these features, Commonfloor is trying to keep the users with them throughout their lifetime.

Housing.com also has unique features like price trend of heat map, demand & supply monitoring tool. These features help the user to know about the trend in realty sector. In this information era, housing.com provides the required and analysed information to the users. This would make a huge months the site improved its ranking from 885,597 to 2,710.

Competition among the realty sites is getting tighter day by day with each one of them trying to present new features, giving importance to user friendly user interfaces, providing customised data for various users.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

39

Study of

40

data visualisat i JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Phase

03

t ion

Price trend Realty price trend Existing similar products Literature study Trends in other context Overall insights

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

41

Price trend

Existing similar products

Price trend is the direction and momentum of the price of a security or another asset.

the right moment to buy and sell. Trends are especially important in technical analysis, which recommends buying at the bottom of a downward trend and selling at the top of an upward trend.

Realty price trend Realty price trend shows the direction of the sales & rent price of realty properties, such as land, villas, and builder floors. Price trend is usually shown on the basis of monthly or quarterly data.

Realty price trend helps the users to understand the evolving trends in the real estate market. Identifying moment to buy and sell. It helps the users to know the actual price in the market, which helps them while taking decisions. The realty price trend helps to increase the authentic data. It also saves the valuable time of users by avoiding random property search.

reports for the US and over 130 metropolitan statistical areas. The reports identify market trends. Home values

42

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Ahmedabad

Bangalore

Chennai

Delhi/NCR

Hyderabad

Indore

Kochi

Kolkata

Search Property

Home

Price Trends

Mumbai

Pune

Post Requirement

Forums

Login

Register

List Property

Advertise

Rent

Select to Compare

Property Price Trends for Renting

a property in Delhi / NCR 1.05% change

Top Localities Indirapuram

3

6

12 Months

30

DLF CITY PHASE V Gurgaon Sec-56 26

Dwarka Sec-6 Golf Course Road

Dwarka Sec-10 Dwarka Sec-22 Dwarka Sec-19

Rs./Sq.Ft

Dwarka Sec-12 22

18

Vasant Kunj Dwarka Sec-11 DLF CITY PHASE IV

14

Dwarka Sec-4 Kalkaji Crossing Republic Dwarka I.P Extension

10 Mar 2013

Apr 2013

May 2013

Jun 2013

Jul 2013

Aug 2013

Sep 2013

C R Park

Housing

Makaan

Housing.com had a unique feature for presenting realty price. A colour-coded heat map concept is used for this.

The map shows localities tainted in a gradation from red to green to indicate high to low prices. Mouse over on a locality shows average price.

Makaan.com offers price trends for two types of properties i.e., for sale & for rent. Price trends highlight the per square feet (psf) rate for the locality in which the property is located. The trends are drawn for a minimum duration of 3 months. For many properties, trends for the past 3, 6 and 12 months are highlighted.

The price heat maps is available for both services, rent and buy and even allows the users to choose the rate according to the area or the number of rooms.

Oct 2013

Nov 2013

Dec 2013

Jan 2014

Feb 2014

Delhi / NCR *Disclaimer

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

43

99acres.com & magicbricks.com 99acres and magicbricks have similar features of rates & trends. It is a resource that provides residential and commercial property price trends for localities in 16 cities across India. These price trends can be viewed in the form of tables or graphs from the locality’s sale and rent

with near by location.

44

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Literature study Envisioning information

Small multiples: A series of small information slices, positioned within the eye span, that allow to compare at a glance. They are visually enforcing comparisons of changes.

“It is not how much empty space there is, but rather how it is used. It is not how much information there is, but rather how effectively it is arranged.”

Micro/macro displays: High-density designs that allow simultaneous local and global readings.

“Simpleness is another aesthetic preference, not an information display strategy, not a guide to clarity.”

Micro/macro readings

Layering and separation Layering of data, often achieved by felicitous subtraction of weight and enhances representation of both data dimensionality. Usually this involves creating a hierarchy of visual effects, possibly matching an ordering of information content. Small, modest design moves can yield decisive visual results, as in these intriguing demonstrations of the illusory borders of subjective contours

A graphical or tabular display of data is what is called here as envisioned data and it is done so to reason about, communicate, document, and preserve knowledge.

The main problem we are facing today is that the data we are dealing with is multi-dimensional, but we (mostly) have to represent it in 2D. Then, how can we “escape flatland” and the limitation of the 2D medium is by increasing the number of dimensions and/or the data density shown in 2D. This is only possible with extensive compromise.

suggests for envisioning information are: Average and variation of data: If working with vast quantities of data, it can be more useful to show means and variation within the data set rather than the data points themselves.

Dimensionality and data compression: Dimensions can be added by e.g. the ordering of data entries, color, spacing.

Micro and macro display Simplicity of reading derives from the context of detailed and complex information, properly arranged. A most unconventional design strategy is revealed: to clarify, add detail.

Fine-textured graphics with high detail lead to personal micro-readings, they call for individual stories about the data. The vast complexity is organized through multiple and (often) hierarchical layers of contextual reading.

That is, the same ink serves one than one informational purpose. Read on a macro-level, the (micro-level) data blurs into a gray shape and allows for a different reading.

When envisioning information, we want to show differences that make a difference. We can enforce that difference within the information if we consciously layer and separate it, visually stratifying various aspects of the data. Failure to differentiate the data leads to cluttered

Context switching is disruptive, and users have to rely on visual memory. High-density designs, on the other hand, enable selective, narrated, and personalized readings. The control of information is given to the users.

“Confusion and clutter are failures of design, not attributes of information.” 1+1=3 or more, We need to be aware that elements interact, creating non-information patterns and texture. Negative areas of white space are visually activated.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

45

Color and Information “Above all, do not harm.”

Uses of color: • to label (color as noun) • to measure (color as quantity) • to represent or imitate reality (color as representation) • to enliven or decorate (color as beauty) Have good reasons for your color choices (more than just taste preferences). Do not use too many colors. More than 20-30 colors don’t just have less effect, they have negative effects. Mute unnecessary contrast. Don’t overuse bright, saturated colors. They have loud, unbearable effects when used over large areas. Use only small spots, on dull background. For two large areas of bright colors: it can work if you repeatedly intermingle one with the other. White with mixed bright colors produces unpleasant results. Prefer backgrounds in light gray or muted colors.

Color palettes: prefer the use of colors from nature.

Human cognitive processing gives considerable and often decisive weight to contour information. Make sure to use color (contours) for a purpose, not explaining something that is already obvious. Be aware of ”Cognitive Contours”, colors/shapes appearing where there aren’t any.

Color for quantifying data color brightness) are often used, because they are easy to remember. Rainbow scales are an alternative, but are 46

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

hard to remember and thus need other cues to be able to interpret the data.

Any color coding of quantity is potentially sensitive to contextual effects. (i.e. the same color appears to be lighter on a darker background). These interactions are only very seldom wanted (i.e. using a combination of two colors for a line, to avoid having to introduce a third color). Also, translating color back to data is error-prone, as readers have varying color perception.

Therefore, don’t rely on color as the only way to send your message. Use multiple signals, redundant and partially overlapping methods. But make sure that there is a need for the redundant signal, and that you choose the appropriate redundancy.

Trends in other context Realty price trend in realty sector is not in a much advanced stage. So it was decided to look into the trends in other contexts, and how they visualise these trends in different scenarios. This would help in exploring concepts for the project. Some of the interesting visualisations are shown here.

Photographer Eric Fischer uses Flickr’s geotags to create city maps that show the places of intense human interest. The map which plot the places locals and tourists frequent. Taking the images submitted to the Geotaggers World Atlas and placing them on the map colored based on the length that person has been in the city, these images give a good idea of where locals and tourists visit. It’s also a handy travel reference to see what quiet spots still exist in these popular places.

Diagram shows the selection of 25 plants for a garden project in Holland. It represents dominant colors in the landscape for one year cycle, showing blossoming periods and change of foliage throughout the seasons.

Blue dots on the maps represent where locals have taken photographs. Red dots represent where tourists have taken photographs. Yellow dots are photographers who can’t be determined.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

47

Feilding Cage from Time, designed this infographic with interactivity in mind. This is probably the best three dimensional representation of the U.S. population based on geography. One can instantly decipher where most of the U.S. population lives.

48

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Overall insights World is going through an information era. Overflow of information hijacks the human brain. Being a designer it is important to think about how to present this information in a simple and easy way for the users to perceive. Mostly all website’s business are related with by simplifying this data for the users comprehension.

Almost all realty website provide realty price trend

location. All the realty sites have the data of price trends.

So the difference has to be shown in terms of data visualisation. Data should be customised for their users according to their needs. 99acres’s price trend platform concepts are generated by considering all these aspects.

“7 Billion: How Did We Get So Big So Fast?” is a video that uses colored liquids to visualize the population rates of the different continents. High birth rates mean fast liquid pouring in, slower death rates slow down the liquid dripping out of the bottom.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

49

Study of

user 50

experien c JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

n ce

Phase

04 User interface Graphic user interface Evolution of GUI trends Current GUI trend / style

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

51

52

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

User interface “The way that you accomplish tasks with a product what you do and how it responds, that’s the interface” — Jef Raskin

communication between humans and devices, able in some way to give back a response.

User interface design isn’t just about buttons and menus, it is about the interaction between the user and the application or device, and in many cases, it is about the interaction between multiple users through that device.

This means that user interface design isn’t about how a product looks, but rather about how it works. It is not just about arranging buttons and picking colors, but rather about choosing the right tools for the job. The user sees and interacts with the user interface, not the underlying back end architecture of your application. Getting this element right will thus has a big impact on how much your customers enjoy using your product and how easy your product is to use. Start by designing the interface

interface “wrapper” over top.

Graphical user interface interface bloat, where there is just too much stuff on the screen at the same time. If too many things are on the the interface becomes tedious to use. The real challenge in making a great interface is to make it concise and clear at the same time.

Familiarity : Even if someone uses an interface for the metaphors can be used to communicate meaning.

Responsiveness : A good interface should not feel sluggish. Secondly, the interface should provide good feedback to the user about what’s happening and whether the user’s input is being successfully processed.

Designing the visual composition and temporal behavior of a GUI is an important part of software application programming in the area of human, computer interaction. the underlying logical design of a stored program, a design discipline known as usability. Methods of user-centered design are used to ensure that the visual language introduced in the design is well tailored to the tasks.

Consistency : Keeping your interface consistent across your application is important because it allows users to recognize usage patterns.

Aesthetics : While you don’t need to make an interface attractive for it to do its job, making something look good will make the time your users spend using your application more enjoyable; and happier users can only be a good thing.

All great interfaces share eight qualities or characteristics

Time is money, and a great interface should make the user more productive through shortcuts and good design.

Clarity : The interface avoids ambiguity by making

Forgiveness : A good interface should not punish

everything clear through language, flow, hierarchy and metaphors for visual elements.

Graphical user interface is a type of interface that allows users to interact with electronic devices through graphical icons and visual indicators. A GUI uses a combination of technologies and devices to provide a platform that the user can interact with, for the tasks of gathering and producing information.

users for their mistakes but should instead provide the means to remedy them.

Concision : It’s easy to make the interface clear by over-clarifying and labeling everything, but this leads to DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

53

Evolution of GUI trends GUI trends also evolved along with the technology. Every technological upgradation dramatically changed GUI and its possibilities. Software and hardware upgradation helps the growth of GUI. This can be seen through the evolution chart below.

NetBSD is an openT

Alto computer is completed at Xerox PARC.

1973

Xerox introduces the

Apple introduces the

Star, the commercial successor to the Alto.

Macintosh.

Apple Macintosh II

1981

1

1987

1980 Three Rivers Computer Corporation introduces the Perq graphical workstation.

1983

Apple introduces the Lisa.

1985

M

The Amiga computer was launched by Commodore in 1985 with a GUI called Workbench.

54

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Mac OS

System 7 was released

1991

source, Unix-like operating system that descends from Berkeley Software Distribution (BSD)

1

1990

1993

1995

Windows 3.0, a

Newton OS was the

Windows 95

graphical environment, is the third major release of Microsoft Window

operating system for the Apple Newton

W

preemptive, graphical operating system

1996

consumer orented graphical user interface based operating system

T

Windows ME was the

Windows 98

graphical operating system by Microsoft

1998

successor to Windows 98 SE

I phone released Mac OS X version 10.2

at home PC users

Jaguar is the third major release of Mac OS X

2000

2002

OS X 10.9 Mavericks I phone 5s released

T

Alto computer is completed at Xerox PARC.

2007

I

2010

2013

1997

1999

2001

2

2009

2012

Mac OS 8 is an

Mac OS 9

Mac OS X version 10.0,

Symbian OS 8.0

Windows 7 released

Windows 8

Mac OS X

Windows CE 5.0

operating system that was released by Apple Computer

Apple’s Classic Mac OS operating system

code named Cheetah, is

is released

2

is released

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

55

Current GUI trend / style Minimalism

Skeuomorphism

After years of bells and whistles, user interface design is going back to basics – at least according to some big name companies, including Google and Microsoft to name a few. Glossy icons are replaced by simpler one-color versions or text-based buttons, rich gradients with simple solid color combinations.

When to use it: When designing mobile applications, skeuomorphic designs are highly popular and well accepted among the community. In part, due to touchscreen nature of these devices which gives an impression of touching real-world objects. For web apps and projects, skeuomorphic designs are usually not the best path to take, although some elements can be used to enhance parts of the interface.

Laser focus Laser focused user interface puts visual focus on a single, obvious task to do once a user opens the web application, instead of providing several equally important – users instantly know what the application is about and what the suggested action is.

Windows 8 uses monochromatic icons and simple solid colors for its new interface.

When to use it: Minimalism is a great way to design a web application which focuses on user generated content – if done right, users will rarely complain about it. However, approach too simplistic for their taste, so one might want to check their preferences before starting the project.

56

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

by Apple, and then adopted by many other companies.

Basically, this design approach relies on imitating the look and functionality of traditional and familiar objects to make the interface more intuitive. For example, using wooden bookshelf with book covers to represent digital content is a prime example of skeuomorphism at work.

There is a battle going on in the user interface design community whether such highly skeuomorphic designs user experience because imitating real-world objects necessarily means imitating the limitations that come with them, while others say this is a good trade-off for the friendliness and familiarity that comes with skeuomorphic designs.

Google homepage is the prime example of laser focused web application – the search box is prominently displayed, everything else being demoted. Below: Air B’n’B is a great example of a laser focused interface.

When to use it: Laser focusing is a great approach for web applications and projects that have a single, most

important function to promote. In most cases, this will be some sort of search or browse function but makes sure to discuss this with the client.

Context sensitive navigation Context sensitive navigation came with the rise of dynamic user interfaces and is a great way to declutter your design. Basically, one needs to ask him/herself a simple question: which navigation elements should be on screen all the time and what can be shown only in certain situations (actions)?

Pinterest uses simple but effective button toolbar which appears only on mouse over action.

For example, Pinterest shows action buttons only when one mouse over a pin, as shown on the image above.

Gmail shows message action buttons only when one selects the message. This way, these applications visually appear much simpler than they really are.

When to use it: context sensitive navigation can be used in almost any project. Carefully target buttons and gadgets that can be hidden until the user performs a certain action, such as hovering a link, selecting an entry and so on.

Content chunking

It is important to note that content chunking hasn’t always been around. It emerged during internet era, when people started consuming large amount of information and needed a way to digest it more easily. In a way, it is a phenomenon which developed spontaneously.

When to use it: Ultimately, the usage of this technique is something which ultimately depends on the client. However, one can use it in the design proposal to suggest how the content should look on the website, explaining why it is

Content chunking is a technique of presenting a large amount of content in smaller visual chunks, so it’s easier for people to read and mentally digest. For example, splitting this article into several sections with headings and accompanying pictures makes it a lot easier to read compared to long monotonous stream of text.

Product pages on Apple website are one of the best examples of content chunking – they are a mixture of bitesized text blocks coupled with beautiful product pictures.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

57

Design

approach e 58

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

h es

Phase

05

Target group User personas Concept explorations Metrics Summary of concepts Final concept User test

Realty price trend on various screen sizes DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

59

Target group

User personas

There are mainly three groups involved in the real estate sector: Buyers, sellers and brokers. The target group

User personas was made for the realty price trend, considering different user categories of investors. All scenarios represent these different categories. This would help to understand the overall border view of target users and their needs, which would help to design the realty price trend concept.

living purpose and second time buyers those who are looking for an investment. This group normally has less knowledge about the realty sector. So the price trend section would make them aware about real estate sector’s various trends.

60

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Santha

Anil Kumar

Praful Gandhi

Arun Nambiar

Occupation : Teacher

Occupation : Gov. Clark

Occupation : Software Engineer

Occupation : Retired professor

Native Place : Mumbai

Native Place : Delhi

Native Place : Kutch, Gujarat

Native Place : Kochi, Kerala

Lives in : Pune

Lives in : Delhi, Gov. quarters

Lives in : Germany

Lives in : Pune, Maharashtra

Family Members : Single

Family Members : 4 (including him)

Family Members : 3 (including him)

Family Members : 5 (including him)

Looking For : 1BHK Flat

Looking For : 3BHK Flat

Looking For : 3BHK Villa

Looking For : 3BHK Independent house

Location prefered : Mumbai

Location prefered : Delhi NCR

Location prefered : Ahmedabad

Location prefered : Kochi

Budget : 20-30 lakhs

Budget : 40-50 lakhs

Budget : 120-150 lakhs

Budget : 50-70 lakhs

Device used:

Device used:

Device used:

Device used:

Android phone, Desktop

Android phone, Desktop

iPhone, iPad and iMac

Android phone, Desktop

Age : 52

Age : 45

Age : 35

Age : 65

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

61

Concept explorations

Search by place, pincode Show by

States

Buy

Rent

Property Type Residential Apartment Currency INR

Unit Sq. Ft. Sq. Ft.

< 2k

2009

62

10

3k

11

4k

5k

6k

12

13

14

2015

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Concept 01

Realty price trend through heat map

Search by place, pincode Show by

States

Buy

Rent

Property Type Residential Apartment

Initially a concept of interactive heat map with political borders was designed. Political borders would help the

Currency INR

Unit Sq. Ft. Sq. Ft.

< 1k

in the left side, allowing the users to get the desired location’s price trend. The heat map legend is also given with the widget. These color codes are also customizable according to the user’s budget. The red color is used for the most expensive and the green colour for the cheapest. A timeline is also given at the bottom left corner of the screen that helps the users to identify the prices in the past.

2009

10

2k

11

3k

4k

> 5k

12

13

14

2015

The concept of the widget was further explored:

value and the selected property value at present. This would help the user to know about the selected property value’s position.

The second widget incorporated the price trend. So the user gets to know about the past price trend of the current location. The overall price trend is divided into three price categories, which are upper, average and lower values colour coded by red, yellow and green respectively.

codes. And the price trend is shown using black, gray and white line.

Search by place, pincode Show by

Search by place, pincode Buy

States

Rent

Property Type Residential Apartment Unit Sq. Ft.

Currency INR

Show by

States

Search by place, pincode Buy

Rent

Property Type Residential Apartment Unit Sq. Ft.

Currency INR

Sq. Ft.

Show by

Sq. Ft.

Sq. Ft. 6k

5k

5k

5k

4k

4k

4k

3k

3k

2k

2k

1k

1k

2k

3,200

Selected Property Value Average Value

1,600

1k Lower Value 0

2,100

Rent

Unit Sq. Ft.

Currency INR

6k

Upper Value

Buy

Property Type Residential Apartment

6k

3k

States

400 0

2010

2011

2012

2013

2014

2015

0

2010

2011

2012

2013

2014

2015

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

63

Concept 02

Realty price trend through radial variance The second concept is with circles. Four types of radii were used for the circle. More the radius means more the cost and lesser the radius means lesser the price. Users can directly interact with these circles. Political borders is also provided in the left side, it allows the users to get the desired locationâ&#x20AC;&#x2122;s price trend. The timeline is also given along with the widget to help the users to identify the prices in the past.

Search by place, pincode Show by

States

Search by place, pincode

Buy

Rent Show by

Property Type Residential Apartment Delhi NCR

Unit Sq. Ft.

Currency INR

States

Buy

Rent

Property Type Residential Apartment Currency INR

Sq. Ft.

Unit Sq. Ft. Sq. Ft.

5k - 6k

Ahmedabad

4k - 5k

Dadar

Kolkata

Parle

3k - 4k 2k - 3k

Thane west Pune Mumbai

Andheri west Hyderabad

Vishakapattanam

Goa 0

2010

2011

2012

2013

2014

2015

Bangaloru 0

Chennai Cochin Tiruvananthapuram

64

Vishakapattanam

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

2010

2011

2012

2013

2014

2015

Concept 03

Realty price trend through 3D projection The third one is heat map with 3D concept. The data with 99acres is sector/location wise. User can see the price as heat map in top view and there is an option to tilt the trend timeline with average, max and low value, search, customisable unit and various currency options were also provided in this concept.

Search by place, pincode Show by

States

Search by place, pincode Buy

Rent

Property Type Residential Apartment Unit Sq. Ft.

Currency INR

Show by

States

Buy

Property Type Residential Apartment Unit Sq. Ft.

Currency INR

Sq. Ft.

Sq. Ft.

6k

6k

5k

5k

4k

4k

3k

3k

2k

2k

1k

1k

0

2010

2011

2012

2013

2014

2015

Rent

0

2010

2011

2012

2013

2014

2015

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

65

Concept 04

Realty price trend through bar diagram The last concept is based on bar diagram. Home page shows the rent and sell price together. This would help the user about the ratio of buying and rent price of the various prices. If the user clicks on the bar, it would again be distributed into several bars that would show the various property prices of villa, independent floor, land, etc.

Search by place, pincode

Land

in

ch

Co

66

ra

da

do Va

ta

ka

l Ko

a

Go

ai

nn

e Ch

e or

al

B

g an

a

Go

A

m he

d

ba

da

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

ad

ab

r de Hy

i

ad

ab

r de Hy

ba

M

um

i

lh

De

ne

Pu

ne

Pu

in

ch

Co

ra

da

do Va

ta

ka

l Ko

a

Go

ai

nn

e Ch

e or

al

B

g an

a

d

ba

Go

da

A

m he

Renting price

Un furnished Apartment

Selling price Furnished Apartment

Renting price

Villa

Selling price

Shops

Search by place, pincode

ad

ab

r de Hy

i

ad

ab

r de Hy

ba

M

um

i

lh

De

ne

Pu

ne

Pu

e c i Pr E D TR

Metrics

FEATURES

METRICS .com s e r ac Place search

.99 www

Current location identifier

Shown with political border

Price trend for Rent & Buy Price trend for Rent & Buy chart in single view

Summary of concepts Concept

Concept

Concept

Concept

01 02 03 04

These four concepts are drawn from the objective of attaining user satisfaction by providing the required data of 99 acres according to their demands or needs.

but the data with 99acres is sector wise.

The second concept of circle is comparatively easy to develop, because it doesnâ&#x20AC;&#x2122;t need to show the exact from this concept, because it restricts the detailed view of location.

Selection for property type Various currency Various Unit Price trend forcast Price trend for past 5yrs Price trend comparison with places Heat map 3D map Bar chart Comparison option with all property type Selected property value indicator Lower/average/upper value indicator

The third concept shows sector wise heat map and its 3D view. This allow the users to easily compare the locations. But it require more time in developing stage, because this concept demands the exact sector wise borders all over India.

The fourth one is totally different, that it allows the users not only to compare the locationâ&#x20AC;&#x2122;s price but also allows to compare with various properties type of the location in a single view. But it does not show the map view.

Each concept has its own advantages and disadvantages. A metrics chart was made after the four concept generation. Then considering this metrics chart the required features were sorted down, according to

Link to the property listing Location identifier within the budget

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

67

Final concept Heat map price trend platform. Here user can access information either through map or through search box. There are three zoom in levels being provided for the price trend detailing, which are state, district and sector level. A price trend graph is also provided in this concept, which can be opened and closed whenever user needs. And also it shows the following links at the bottom of the screen, which lets the users to see the available properties in desired location.

Home page allows two way of interaction, which are interaction with map and interaction with search box. The Map is shown with political borders of state and provides the names of cities.

68

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Second zoom level shows the heat map with the political borders of districts. The heat map legend also given on the right bottom side of the screen helps the users to quickly understand the value of the location. Heatmap

legend box allows the user to enable and disable various price groups, which helps the user to focus on the location which comes within their budget. It also allows the user to change the unit.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

69

Eg: Noida Price trend for Buy

Residential

Rent

Noida Delhi NCR State

Commercial

Project

Select property type Find Price Trend

View Price Trend for Residential Apartment Price/Sq. Ft

Embed in blog

Disclaimer

Share

20,000 18,000 16,000

Heat map

Price per Sq. Ft.

14,000 12,000

>18,000

10,000

Sector - 159, Noida

8,000

Avg. Price Rs. 6,000 Sq. Ft. Q/Q Growth rate 24.59

6,000 4,000

Compare in graph

2,000 2011

2012

Location

2014

2013

Q/Q

Noida, Sector 22

+30 +30

Noida, Sector 19

+30

Add to Sector compare Noida, 24

Noida, Sector 21

+30

Add to Sector compare Noida, 135 +30

View Price Trend

Top localities in Noida

Top projects in Noida

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

14,000 - 16,000 12,000 - 14,000 10,000 - 12,000 8,000 - 10,000 6,000 - 8000 4,000 - 6,000 2,000 - 4,000 < 2,000

Top Societies in Noida

Third zoom level shows the heat map with the political borders of sectors. If the user mouse over through these sectors a pop up box appears showing the current rate and the growth rate. User can see the price trend 70

2015

16,000 - 18,000

graph by clicking the button “Compare in graph” which price trend graphs of various sectors, which helps to understand the price direction through the past years.

Following links are provided at the bottom of the screen directing the user to the properties’ lists which are available in the short listed sectors.

India

Delhi NCR

Eg: Noida

Noida

Upcoming projects The Delhi Metro Rail Corporation (DMRC) is planning to run trains at a higher average speed of 4045 km per hour on the approved extension from Noida City Centre to Bodaki village. The line , which will run along the Noida-Greater Noida expressway, is slated to be completed by 2017.

Upcoming metro extension Upcoming metro station Existing metro line

Heat map

Price / Sq. Ft.

>18,000 16,000 - 18,000 14,000 - 16,000 12,000 - 14,000 10,000 - 12,000 8,000 - 10,000 6,000 - 8000 4,000 - 6,000 2,000 - 4,000 < 2,000

View Graph Top localities in Noida

Top projects in Noida

Upcoming projects page shows the information about the upcoming development projects that will be helpful for the users to understand the projects and according to which they can plan their investments. There are no

Top Societies in Noida

such platforms in India dedicated for the information about the upcoming development projects. This kind of time investors.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

71

User test An interactive prototype was made for the user study.

User observation was done to see how they interact with the price trend platform. Various users were chosen for the test. Several visual and interaction problems were found during the test. Later it was analysed and solved.

72

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

01

Home page

02

All pages

03

Sector level page

The following links at the bottom misdirect the user from the price trend platform

Wrong visual hierarchy of information in the mouse over pop-up menu To expand the interaction area for opening and closing the graph menu

05

All pages

06

All pages

07

All pages

Confusion about what has been selected among the ‘Residential’ and ‘Commercial’ options

08

District & Sector level page

No information about the type of heat map opened

09

Home page

Lack of distinct colour contrast in the home page

10

All pages

The location names are not visually interactive

11

Sector level page

Users are tended to click on the ‘Add to compare’ text

12

District & Sector level page

13

Sector level page

Confusion due to non-uniform mouse over interaction

The interactivity and clarity of the price trend graph could be improved The position of the location address to be corrected according to the user’s interactive behaviour

15

Sector level page

Misleading color code used for showing the Q/Q growth rate

16

Sector level page

The colour of the price trend graph close button drawing more attention

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

73

Before user study The thickness of search box border was reduced to lesser attention

Lack of distinct colour contrast between sea and land was found because of the different contrast setting on various screen. Later the problem was solved by increasing the color depth.

The following links at the bottom misdirect the user from the price trend platform. Users are directly click on these following links without using price trend platform. So it was decided, to remove these following links from the home page of price trend platform.

74

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

The location names are not visually interactive for the users. So the color of location names were changed into a tint of blue. Later user test was done for the same, it was found that it solved the problem.

After user study

Enter Location / Locality / Pincode

Delhi NCR

Kolkata

Ahmedabad

Pune Mumbai

Vishakapattanam Hyderabad

Goa Bangalore Chennai Cochin

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

75

Before user study The interaction area for opening and closing the graph

Price Trend for Residential Apartment

menu was expanded . Because the user used to click any where of the bar.

Price/Sq. Ft

Embed in blog

Disclaimer

Share

20,000

The overall layout was decided to redesign because of crouded feel of the price trend graph.

18,000 16,000 14,000 12,000 10,000 8,000 6,000 4,000 2,000 2011

76

2012

2013

2014

2015 +30

Location

Q/Q

Noida, Sector 19

Noida, Sector 128

+30

Noida, Sector 135 +30

Noida, Sector 140

+30

Noida, Sector 135 +30

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

The colour of the price trend graph close button, draws more attention. So the users tend to click without any reason.

After user study Embed in blog

Share

Disclaimer

Location

Price / Sq. Ft. 20,000 18,000 16,000 12,000 10,000

Q/Q

Sector 27, Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

8,000 6,000 2,000 2011

2012

2013

2015

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

77

After user study

Before user study

Sector - 159, Noida

Sector - 132

+24.59

Avg. Price Rs. 6,000 Sq. Ft. Q/Q Growth rate 24.59

Noida

Q/Q Growth rate

6,000

Avg. Per Sq. Ft.

Compare in graph

Compare in graph

Corrected the wrong visual hierarchy of information in the mouse over pop-up menu. The user want know the average price and quarterly growth rate. So it was decided to give more importance to it.

After user study

Before user study Eg: Noida Price trend for Buy

Delhi NCR Residential

Rent

Commercial

Project

Select property type

Buy

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Commercial

Rent

Apartment Find Price Trend

78

Residential

Project

After user study

Before user study

India Noida Delhi NCR State

Delhi NCR

Noida

Noida

Residential Buy

Commercial

Rent

Project

Apartment The plus and minus signs are just indicators for the users to identify the location and its zoom level. There are three zoom levels provided in price trend platform. Intention behind this location address was that when the user wants to go back from the current zoom level she/he just need to click the zoom level here. But the user study reveals that whenever the user wants to go back from the current level she/he always uses the back button provided on the browser that is placed over the top left hand side. So the location address was moved to just above the search box that is placed over the top left hand side.

The search box was redesigned entirely, because it was found that users were confused about what had been selected among the ‘Residential’ and ‘Commercial’ options.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

79

Enter Location / Locality / Pincode

Delhi NCR

Kolkata

Ahmedabad

Pune Mumbai

Vishakapattanam Hyderabad

Goa Bangalore Chennai Cochin

80

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Realty price trend on various screen sizes Home page of price trend plat form in various screen sizes

Enter Location / Locality / Pincode

Enter Location / Locality / Pincode

Delhi NCR

Delhi NCR

Kolkata

Ahmedabad

Kolkata

Ahmedabad

Pune Mumbai

Vishakapattanam Hyderabad

Pune Mumbai

Vishakapattanam Hyderabad

Goa Bangalore Chennai

Goa

Cochin Bangalore Chennai Cochin

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

81

India

Delhi NCR

Noida

Panipet

Delhi NC.. / Residential / Buy / Apartment

Sonepat

Baghpat

Meerut

Rohtak

Bhiwani

Delhi

Ghaziabad

Jhajjar Noida

Gurgaon Mahendergarh

Rewani

Bulandshah

Faridabad

Mewat

Price / Sq. Ft.

>18,000 16,000 - 18,000

Alwar 10,000 - 12,000 8,000 - 10,000 6,000 - 8000

< 2,000 Top localities in Delhi NCR

82

Top projects in Delhi NCR

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Top societies in Delhi NCR

View properties in Delhi NCR

Second zoom level of price trend plat form in various screen sizes

India

Delhi NCR

Noida

Delhi NC.. / Residential / Buy / Apartment Panipet

India

Delhi NCR

Noida

Sonepat

Sonepat

Baghpat

Delhi

Meerut

Noida

Rewani

Noida Faridabad

Bulandshah

Price / Sq. Ft.

>18,000

Bulandshah

16,000 - 18,000

Faridabad

Mewat

Ghaziabad

Jhajjar

Gurgaon Mahendergarh

Jhajjar

Rewani

Delhi

Ghaziabad

Gurgaon Mahendergarh

Bhiwani

Meerut

Rohtak

Bhiwani

Baghpat

Rohtak

Panipet

Delhi NC.. / Residential / Buy / Apartment

Price / Sq. Ft.

Alwar

>18,000

10,000 - 12,000

16,000 - 18,000

8,000 - 10,000

Alwar

6,000 - 8000 10,000 - 12,000 8,000 - 10,000 6,000 - 8000

< 2,000 Top localities in Delhi NCR

Top projects in Delhi NCR

Top societies in Delhi NCR

View properties in Delhi NCR

< 2,000 Top localities in Delhi NCR

Top projects in Delhi NCR

Top societies in Delhi NCR

View properties in Delhi NCR

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

83

India

Delhi NCR

Noida

Noida / Residential / Buy / Apartment

Embed in blog

Share

Disclaimer

Location

Price / Sq. Ft. 20,000 18,000 16,000 12,000 10,000 8,000

Q/Q

Sector 27, Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

Sector 132, Noida

6,000

+24.59

Q/Q Growth rate

6,000

Avg. Per Sq. Ft.

Sector - 132

Price / Sq. Ft.

Noida

Compare in graph

>18,000 16,000 - 18,000

10,000 - 12,000 8,000 - 10,000 6,000 - 8000

2,000 2011

Top localities in Noida

84

2012

2013

Top projects in Noida

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

< 2,000

2015

Top societies in Noida

View properties in Noida

Third zoom level of price trend plat form in various screen sizes

India

Delhi NCR

Noida

Noida / Residential / Buy / Apartment

India

Delhi NCR

Noida

Noida / Residential / Buy / Apartment +24.59

Q/Q Growth rate

+24.59

Q/Q Growth rate

6,000

Avg. Per Sq. Ft.

Embed in blog

Share

20,000

Sector 27, Noida

18,000

Sector - 132

Q/Q -15%

6,000

Per Sq. Ft.

Sector - 132 Noida

Compare in graph

Noida

Compare in graph

Price / Sq. Ft.

Disclaimer

Location

Price / Sq. Ft.

Avg.

>18,000

Embed in blog

16,000 - 18,000

20,000

16,000

Sector 19, Noida

+22%

Sector 21, Noida

+35%

18,000 16,000

12,000

Sector 56, Noida

10,000 8,000

+37%

Sector 132, Noida

6,000

10,000 - 12,000 8,000 - 10,000 6,000 - 8000

12,000 10,000 8,000

Top localities in Noida

2012

2013

Top projects in Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

Price / Sq. Ft.

>18,000 16,000 - 18,000

10,000 - 12,000 8,000 - 10,000 6,000 - 8000

2,000 2012

2013

< 2,000

2015

Top projects in Noida

Top societies in Noida

< 2,000

2015

Top societies in Noida

Q/Q

6,000

2011

2011

Disclaimer

Sector 27, Noida

Sector 132, Noida

Top localities in Noida

2,000

Share

Location

Price / Sq. Ft.

View properties in Noida

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

85

Design

developm e

86

&

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Phase

06

m ent

Typeface Icons Search box widget Colour Customised Google map Layers Grid

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

87

Price trend

Search box

Enter location

Map

Find current location

Buy / Rent / Project

State

Cities

Districts

Select property type

Heat map for sector wise

Find price trend

Add selected sector to graph

Compare graph

Link for properties in selected location 88

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Remove unwanted sector from the graph

Typeface The entire typeface used for the price trend platform is “Roboto” since the price trend platform is incorporated with Google map which uses “Roboto” typeface for its labels.

The font was designed entirely in-house at Google by Christian Robertson. Roboto is a purely digital construct.

It was built from scratch and density displays. The font works great on screen at different sizes and device resolutions. Google describes it has having a “dual nature. It has a mechanical skeleton and the forms are largely geometric.”

More tracking space increases legibility Squarish dot is used for the pixel perfection

realty price trend

Icons Flat icons are used for the price trend platform. All icons are created manually for achieving consistency. Even thickness is used for the all the icons.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

89

Search box widget Search box widget is one of the main element of this platform. So it was tried to explore friendly user flows.

User flow based on buy, rent and project options.

giving the importance to the locality and the society. But it was found that there was too much complication on it.

Finalised user flow based on residential and commercial options.

90

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Eg: Noida Price trend for Buy

Enter Location / Locality / Pincode

Residential

Rent

Commercial

Project

Residential Buy

Select property type

Commercial

Rent

Project

Apartment

Find Price Trend Digitalised version of search box widget / Residential selection / Before user test

Enter Location / Locality / Pincode

Eg: Noida Price trend for Buy

Digitalised version of search box widget / Residential selection / After user test

Residential

Rent

Commercial

Project

Select property type

Commercial

Residential Buy

Rent

Project

Apartment

Find Price Trend Final search box widget / Commercial selection / After user test

Digitalised version of search box widget / Commercial selection / After user test DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

91

Colour Colour codes for the heat map were selected from the colour wheel, keeping in mind the change of hues from warm to cool colours. Ten hues were selected initially. But the different grey values made some colours more prominent than the others. This difference was later corrected by setting the grey value of each colour equally.

Initially selected color palette for the heat map

Various grey values explored for the color palette for heat map

Final color palette for the heat map

92

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Heat map

R 087 G 219 B 207 # 5ABDB8

R 177 G 213 B # 68C5DA

R G 207 B 255 # 83BFE9

R 165 G 198 B 255

R 187 G 187 B 255 # AAAAD5

R 205 G 181 B 255 # B8A7D2

R 232 G 176 B 255 # BF9BC8

R 255 G 161 B 255

R 255 G 161 B 220 # F096BF

R 255 G 155 B # F18B89

Price / Sq. Ft.

>18,000 16,000 - 18,000

10,000 - 12,000 8,000 - 10,000 6,000 - 8000

< 2,000

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

93

Graph

R G B 212 # 8EC370

R 119 G 201 B 210 # 79C8D1

R G 173 B 255 # BEABD3

R 251 G B 157

R 211 G 251 B # D3B876

Embed in blog

Disclaimer

Location

Price / Sq. Ft. 20,000 18,000 16,000 12,000 10,000 8,000

2,000 2011

2012

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

2013

2015

Q/Q

Sector 27, Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

Sector 132, Noida

6,000

94

Share

Typeface

R 109 G 167 B 255 # 76A0D5

R 125 G 127 B 126 # 7D7F7E

India

Delhi NCR

R G 185 B 187 # B8B9BB

R 255 G 255 B 255 # FFFFFF

R 255 G 255 B 255 # FFFFFF

R 255 G 255 B 255 # FFFFFF

Noida

Enter Location / Locality / Pincode

Residential Buy

Commercial

Rent

Project

Apartment

Embed in blog Price / Sq. Ft. 20,000 18,000 16,000 12,000 10,000 8,000

Share

Disclaimer

Location

Q/Q

Sector 27, Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

+24.59

Q/Q Growth rate

6,000

Avg. per Sq. Ft.

Sector - 132 Noida

Compare in graph

Price / Sq. Ft.

>18,000 16,000 - 18,000

10,000 - 12,000 8,000 - 10,000

Sector 132, Noida

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

95

Customised Google map The realty price trend plat form is incorporated with the customised Google map. The Google map is customised according to the needs of realty price trend.

As of version 3 of the Google Maps API custom styles can now be applied to maps. This allows developers and designers to pick a style that matches the theme of their website. Google Maps API is a collection of APIs that enable one to overlay their own data on a customised Google Map.

Theme: Just places

This map shows only place labels, their circle markers and a couple of borders.

Wonderful for thematic overlaying at zoom levels up to 10.

Theme: Shift Worker The Factory on November 7, 2013 Almost grey scale, this style uses subdued tones to display streets with a minimum of distractions. Best used around zoom level 16 to show a local address.

Theme: Blue water Xavier on November 5, 2013 A simple map with blue water and roads/ landscape in grayscale.

96

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Theme: Light Monochrome Derrik Engel on November 7, 2013 Light Monochrome theme was chosen for the realty price trend map since the theme was well suited for the heat map. Colour used for the labels is blue shade, which is well suited with the brand colour.

This map style was created for the Streng Design & Advertising website redesign. Used primary as a design element, it needed to be light and subtle but still recognizable.

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

97

Layers The map is developed in four layers, the background of google map (layer 1), Heat map (layer 2), Google map labels (layer 3), & the

Layer 01, All interactive elements are placed over the top of realty price trend plat form.

Layer 03, Google map labels are placed over the heat map

Layer 02, It shows heat map of realty price trend.

Layer 01, This layer contains the background, which shows Google map without labels.

98

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Grid The realty price trend plat form is optimised for almost all screen sizes except mobile devices. The background of map would adopt the screen size of various devices. And the search box, graph and legend box would move

their positions according to the screen sizes. All the key information visible above the fold, so that users can see it without scrolling.

320 pix

India

Delhi NCR

1280 pix

Noida

Noida

Residential Buy

Commercial

Rent

Project

Apartment

or Screen size Embed in blog

Share

Location

Price / Sq. Ft. 20,000 18,000 16,000 12,000 10,000

Price / Sq. Ft.

Disclaimer

Q/Q

Sector 27, Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

8,000

>18,000 16,000 - 18,000

10,000 - 12,000

320 pix

8,000 - 10,000 6,000 - 8000

6,000 2,000 2011

Top localities in Noida

2012

2013

Top projects in Noida

< 2,000

2015

Top societies in Noida

730 pix

View properties in Noida

50 Pixel grid 200 pix

10 Pixel grid

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

99

100

Conclusi o

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

i on

Phase

07

Conclusion Future directions Bibliography Webliography

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

101

Conclusion Realty price trend platform is the second work related bus route map made in the printed medium, had a huge difference in the context and execution with this project which was a fully interactive web design work. Thus this project demanded a higher level of concentration, deeper understanding of human psychology, and better knowledge on how users interact with each element on the interface. Each interaction is a journey of the user which needs to be made hassle-free. Working on information and interaction design is challenging. As

a worthy experience to work with professionals from the helped in understanding the various view points on price trend platform.

Future directions Price / Sq. Ft. Location / Locality / Pincode

work does not end there as it requires collection of data for each sectorâ&#x20AC;&#x2122;s border of all over India, which is timeconsuming, and also needs more focus on mobile based platform too. It is also required to make improvements in later versions according to the user experiences.

Hope this would be a useful and convenient realty price trend platform for the Indian citizen.

16,000 - 18,000 Sonepat

Pune Mumbai

Noida

Gurgaon

Vishakapattanam

Mahendergarh

Hyderabad

10,000 - 12,000

Jhajjar

Rewani

8,000 - 10,000 Bulandshah

Faridabad

6,000 - 8000

Goa

Mewat

Bangalore Chennai

Delhi NCR

< 2,000

Alwar

Cochin

Embed in blog

Kolkata

Ahmedabad

20,000 18,000

Vishakapattanam Hyderabad

Goa

Cochin

It needs to be worked out more in terms of mobile user interface.

Share

Disclaimer

Location

Price / Sq. Ft.

Pune Mumbai

Chennai

16,000 12,000 10,000 8,000

2,000 2012

2013

2015

Q/Q

Sector 27, Noida

-15%

Sector 19, Noida

+22%

Sector 21, Noida

+35%

Sector 56, Noida

+37%

Sector 132, Noida

6,000

2011

JISHNURAM C. A. // PGDPD // GRAPHIC DESIGN // NID 2014

Meerut

Ghaziabad

Delhi

Bhiwani

Kolkata

Ahmedabad

Baghpat

Rohtak

Delhi NCR

Bangalore

102

>18,000

Panipet

Bibliography

Webliography

Tufte, edward, 1983, The Visual Display of Quantitative Information

How design and user experience translates to the bottom line Author: Anthony Wing Kosner http://www.forbes.com/sites/ anthonykosner/2013/11/23/how-design-and-userexperience-translates-to-the-bottom-line/

Tufte, edward, 1990, Envisioning Information

Emotional Design : Why we love (hate) everyday things

Robinson G., 2011, Visualising the user experience

Factors that affect the housing market Author: Tejvan Pettinger http://www.economicshelp.org/blog/377/housing/ factors-that-affect-the-housing-market/

Jenny B., Kelso, 2007, Color Design for the Color Vision Impaired

Design Approach http://enginegroup.co.uk/approach/

Wurman, Richard Saul, 2000, Information Architects

Prototyping tool http://www.justinmind.com/features

Krug S., 2005, Donâ&#x20AC;&#x2122;t make me think

Peter, Wildbur, Michael W. Burke, 1998, INFORMATION GRAPHICS: Innovative solutions in the contemporary design.

Customised google map http://snazzymaps.com Customised google map http://gmaps-samples-v3.googlecode.com/svn/ trunk/styledmaps/wizard/index. html?utm_medium=twitter Google maps javascript API V3 reference https://developers.google.com/maps/documentation/ javascript/reference Website analytics tool http://www.alexa.com Website analytics tool http://www.similarweb.com

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

103

DIPLOMA PROJECT DOCUMENT // REALTY TRENDS : INFORMATION & USER INTERFACE DESIGN

105