Design: Apartment page

[darshi-shah]

Design for individual apartment page.

Currently, a popup open when you click on inquiry button. Instead of using popup, we should also consider using something like a off-canvas slide-in element that works well on mobile too.

[darshi-shah]

Hi Rainer,

Please check the design for this page. Please let us know your feedback for the same.

Thanks

[heliogabal]

what if we could have a full width photo just like airbnb.com? With a button to see the photos as well? That way, we wouldn't have the problem with portrait mode pics, as these would only be seen in the fullscreen gallery mode, we would save space and remove clutter because we don't need thumbnail pics, and we can profit from the visual bang provided by the photo.

Of course this can get tricky because of image format, it would have to be cut to about 1920 x 700, so the images composition could get hurt. Maybe this wouldn't be so problematic if the cover picture would always be some detail that can be resized without a problem. I would love to see if this could work though...

Maybe we could put the address in top of the pic, and would put the map in the bottom right instead, as it takes up quite some space only to provide the location information.

I like the idea with the icons, helps get the most important information across quickly, but we have to be aware that not all info will always be available, so the number of icons might vary. We would need to put the most important information (rooms, space, price) also there, so there has to go some work into this still.

Energy consumption should get an upgrade and get a visual scale in a manner like this:

Floorplans is nice, but you have to be aware that while mostly, there is only one, there can be more of them.

The Other accordion element has always be opened when the page loads, as it contains mandatory legal text.

I would maybe also add the responsible agent card on top of the inquiry form, given a more personal touch.

Looking forward to your input!

[darshi-shah]

Hi Rainer,

Full width images will be in landscape mode mostly. Portrait images needs to be adjusted for this. Also, please let me know how energy consumption graphics will work with existing data we have.

Thanks

[heliogabal]

there should only be landscape mode pics possible here. as we don't use a slideshow here, we just have to make sure that the first apartment pic is always landscape.

for the energy consumption: you can see the necessary values from the graphic, so we would need a scale from A+ to H, designed from green to red, and we have the value of energy consumption that should be placed on that scale. I will try to find some examples how other sites do this best.

[heliogabal]

Maybe we could also do the image only two thirds of the screen, and the map the other third? A bit like https://www.onradpad.com/apartments-for-rent/austin-tx but on the apartment listing itself. That way, we could also show the other houses in the area and invite people to look further via the map. We would have to put the other offerings back on this map, and distinct the result somehow (green house?), but I think this would be a good way to easily show that we have a map search also, now that we don't have the map as frontpage any longer.

[darshi-shah]

Hi Rainer,

Below is the revised design. Please let us know your feedback for the same .

Thanks

[heliogabal]

As discussed in person, this should be revised:

• Big wide-format hero picture spanning the whole width of the page.
• Title and address on the wide-format photo
• Change the icons / main properties of the apartment the following (in this order): -- Price, Rooms and m² go in first row and need icons -- Second row consists of: floor + number of floors combined (2 of 5), Balcony, Lift
• the remaining properties go where Living space, rooms and price are right now
• K55-1 apartment reference number goes on top of right column
• Order of right column: Apartment reference number, energy certificate, remaining properties, fittings, floor plans, Inquiry form (including photo of responsible agent, phone number)
• Map on bottom, including other apartments in the area

[darshi-shah]

Hi Rainer

Please see attached design as per your comments.

Thanks

[heliogabal]

sorry, that's not what I meant with "full width" - I meant full width, like in https://www.airbnb.de/rooms/444289 or like that (without the parallax) http://montecito-realestate.com/1590-east-mountain-drive-2#1590-east-mountain-drive-3

The title and address could hopefully go on the image with white color. We have to convey a sense of luxury here, and visually stun the visitor.

[darshi-shah]

Hi @heliogabal

Please see revised mockup.

Thanks

[heliogabal]

almost, put the title (Apartment - maybe put something longer and more realistic there, like "Abgefahren: Autofahrerfreundliches Studio-Loft im Winsviertel") also onto the image, and don't work with a background box of white, but just white font-color directly on the image. That seems more modern and is seen on lots of site, like on the second link I shared.