UXD
Logical Grouping of Content In current resale PD, the content is scattered which needs to be logically regrouped.
The exercise • The content of the existing PD is analysed and is grouped and sub-grouped using affinity diagram method. • The sections are reformed using the logically grouped content.
Logical grouping exercise
PROJECT COMPILATION 1
UXD
Showcasing SEO content more efficiently Some content on page like header line, titles are too lengthy that user either gets lost in it or ignores the data.
Header title -Old PD
Header -New PD
The design team took initiative to work on this problem too.
The challenge • The titles are made crisp and clear while assuring that the SEO is not impacted.
Price trends title-Old PD
Price trends title- New PD
Similar properties-Old PD
Similar properties-New PD
Fat footer-Old PD
Fat footer-New PD
Content/ titles on Old PD vs New PD
PROJECT COMPILATION 2
UXD
Info Plotting The existing information on the PD page is plotted on the new PD after grouping it logically.
Key points: • The hierarchy has been set to the content as well as to the sections. • Property Alerts section has been eliminated from existing PD and a Society section is been introduced.
Old PD
• The sequence of the sections is set as follows: Image gallery Header Overview Society Location Map Locality photos Locality Price trends Dealer details Similar properties Ask and Answer Fat footer Footer
New PD
Old PD
New PD
The image shows content located on old PD and how it’s been plotted on New PD along with its hierarchy PROJECT COMPILATION 3
UXD
Grid, Typography and Iconography New PD is implemented in 1366 px resolution which also handles case of 1024 px resolution screens. 12 column and 10 column grid is implemented in the respective resolutions with 4px baseline height.
1200px 12 column grid Typo implemented as per UI assets library Font size 14pt is a default size for better readability
New Icons introduced
1024px 10 column grid
PROJECT COMPILATION 4
UXD
Inpage Navigation Since PD is a property specific page, we worked upon giving more priority to the property details than other information.
Key points: • The user journey is supposed to be from Propery info to Society to Locality • The tabs were changed to Overview, Society, Locality • Later the tabs were changed to Overview, Society, Location, Price trends as per product decision to give more visibility to price trends section.
Inpage navigation journey on Old PD vs New PD
PROJECT COMPILATION 5
UXD
Sections on PD
Overview Old PD-Overview
New PD-Overview
Key Features Overview is splitted into 5 sections defining them in terms of hierarchy: • Key details/highlights, • Additional details • Property description • Features/Amenities • Action buttons
PROJECT COMPILATION 6
UXD
Sections on PD
Photo Gallery Old PD-Photo gallery
New PD-Photo gallery
Key Features • Image experience is enhanced by providing a gallery where user can explore the images upfront. • Property and society images are put together under a toggle • Locality images are placed into
Carousel Cases PROJECT COMPILATION 7
UXD
Sections on PD
Society Section - New
Old PD-Society page Link
New PD-Society Info Section
• This section is newly introduced on PD to give the user context of the property. • The section provides highlights of the society and also leads the user to the society detail page Case- maximum info points
Case- minimum info points
PROJECT COMPILATION 8
UXD
Sections on PD
Location, Price trends Old PD-Location Map
New PD-Location Map
• Map experience is enhanced by expanding it to the full width resolution i.e. 1366px. • Functionalities like ‘get direction’, ‘neighborhood’ are incorporated on PD • Property marker is introduced
New PD-Locality photos • Locality photos are displayed on PD page itself under location section to give user a better context of the property location.
Old PD-Price Trends
New PD-Price Trends
• Price Trends graph is extended to 1366px resolution • Line graph is changed to curved graph for better readability • Section is designed in such a way that it comes in a single page view
PROJECT COMPILATION 9
UXD
Sections on PD
Dealer details, Similar properties
Old PD-Dealer details
New PD-Dealer details
Old PD-Similar properties
New PD-Similar properties
• Section is visually enhanced • Links like ‘no. of properties listed’, ‘verified properties’ are added
• Section is incorporated with carousel • more information points are added like locality name, posted on, posted by, etc • Information heirarchy is set
PROJECT COMPILATION 10
UXD
Sections on PD
Fat footer, Footer
Old PD-Fat Footer
Fat Footer
Old PD-Footer
New PD-Footer
• Better readability of the SEO links
• To match the existing footer’s design language to the new PD, as a quick fix, background color is changed.
PROJECT COMPILATION 11