About Product
HepsiEmlak is one of Turkey's real estate-specific buying, selling, renting, and advertising platforms, focused only on the real estate sector, providing advertisements and value-added services to its customers.
As a Senior Product Designer, I was responsible for browsing, reviewing, and suggesting improvements to the user experience and interface of the mobile application of this platform.
That was a product home design assignment, and of course, I could only cover a few parts of the application and features due to the lack of time.
Assumptions
-
The user is logged in to his/her account.
-
The user has already searched among the ads and has a search history.
-
The user searches in the house rental type section.
-
Adding Ad and user accounts sections are not covered.
-
Some parts and features of the currently used platform have not been covered due to a lack of time in the study. (e.g., message, find for me, etc.)
Expectation
-
The main focus is on improving the interface and working experience.
-
The filters section needs to reshape. Providing a new filter that can search ads based on commute time from the user's desired location.
-
Using a range slider in some filters for more accessibility. (e.g., price).
-
Revamping the design of the property's card, listing, and map view.
Benchmarking
By analyzing & benchmarking significant competitors in the local and global market, Sahibinden, Apartments, Bayut, Zillow, and Domain apps, I identified our strengths and weaknesses. By knowing those, I could become aware of opportunities to grow and surpass rivals and get insights into better user experiences and new features.
Home Structure
In the current structure of the app, the main page is considered a search page.
In redesigning this page for logged-in users, we can have the list of the user's latest searches along with a CTA to land on the main list of views.
Also, displaying the list of new items near the user. (if the location is active). We can use CTA to land on the posted ads page through this page. (for seller/renter)
The vertical menu was changed to a simple tab for more space, allowing users to switch between real estate types.
The Tab bar menu has been redesigned, and the favorites tab moved to the “Bana Ozel” page.
Property Card
There are some changes in the property card. I show some badges like "premium office" and "near to me" top left of the image. Also, the price is shown in red to increase readability according to its importance. Some icons help users to identify properties and rapidly.
Search
I added search history labels on the search page that scroll horizontally, and the user can select each.
Also, I added the popular search section that can be applied by location, city, or region. (based on search analytics).
If the user lands from Home, we show the CTA for listing based on the kind of property. (default is rent).
Listing View
Many changes have been applied to this page.
The filter section is now more accessible and has more readability; the user can drag primary filters to see what is used and also can open the filter drawer or reset all filters without opening it. The search bar is added here for searching locations based on the user's interest.
The map/list switch button with now available, floating at the bottom of the page.
Filters
The users can now change the type of property directly from the filter drawer, according to maybe they choose the wrong one or leave that by default.
All filters now have a specific icon.
I used the switch toggle for a better experience for filters that need to turn off or on instead of the radio button.
The range slider was added to filters with from-to inputs for a better user experience.
New Filter - Commute Time
One of the features that I reached out to in my research is called travel time/commute time.
The user can set the desired place, e.g., X school. Then select the transportation method and ideal commute time. Now the results will be based on this configuration.
This option is related to location so that it can be reached in this layer, and if it's active, the other options about the location will be disabled.
We can use ready APIs like TravelTime Location APIs or implement ours to develop this feature.
Filters Bar
The user can play with filters in the filter bar and apply them to the list.
The first icon opens the filter drawer, showing all the filters based on the property type. The user can search for filters and select their choices. Some primary filters show in this bar so the user can change them directly without walkthrough all filters and sublayers.
There is another touch point called "All filters" for users who can not initially identify the filters icon.
Also, they can reset all filters at once with the "Reset" button.
Save Search
One of the primary user needs is saving the listing with applied filters.
So I redesigned this part and added the applied filters section to that. Now users can see which filters are used in this list; meanwhile, they want to save that.
Switch between List & Map
The users want to switch between the list and map view for more dominance, so I put a float switch button in both, and the users can switch between them whenever they want.
I remove the search box and filter bar at the map view to have more space. A compact version of the filter button shows in this view with a badge number sum of applied ones.
I used a circle that shows the sum of things in that area for easy readability and knowledge about the concentration and frequency of items.
So the user can tap on each, and the view zoomed-in to that area in the map.
Map view and Card
After the user zooms in on the desired area, the price labels show themselves.
Now the user can tap on each and see the item card with preliminary information about that.
Also, the user can browse items with the help of dragging cards to the right and left and switch between the nearest things.
Details of Item
The structure of this page has been revamped.
The assumption was images and videos are one of the most important things that users pay attention to, and they want to see pictures of items in appropriate size at the first effort.
So I use a full-width image slider that can scroll vertically. The user must tap on each image to see the image gallery in a dedicated area.
Also, on this page, we show the preliminary data about the item bottom of the page as a card. This card can be expanded, so if the user wants to see details of the item can drag the card upward.
The fixed tab bar shows at the top of this area so the user can switch between tabs easily. The action bar changed to the iconic version with the corresponding color of each type of contact.
Outcome & Retrospective
This assignment will be prepared in a few days.
I don't have access to data & analytics, which are critical factors in designing this product. Because data is king, it makes decisions aligning with the customers' needs and business profit.
But the purpose of this study is to show that this product can be more helpful and have a delightful experience for the user, which, of course, you know.
All in One Protoptype
I described almost all parts of the improvements with per-page interactive prototypes. But for a better experience, now you can see all the prototypes in one place and walkthrough in app flows.
Please consider that because of lack of time, the whole parts of pages could not be more actionable, and just hotspots are clickable.