Redesigning Polovni Automobili — Case Study
Polovni Automobili (Used Cars) — a platform most commonly used in Serbian regions for vehicle purchases, especially automobiles.
Problem:
This Web Platform itself has a good user experience and covers a lot of aspects, but it has some mistakes in UX and there is a room for improvement in order to further enhance the user experience. On the other hand mobile version need a lot of improvements.
Solution:
Modernize and enhance the design to provide users with an optimal experience and a visually pleasing interface.
Research:
As I mentioned before, this application already has a good user experience, and with that in mind, I embarked on a search for similar platforms.
After researching those platforms, I began to compare them with the Polovni Automobili.
After identifying ways to improve the platform, I surveyed three respondents, asking them what they consider most important when looking to buy a car. I also inquired about any frustrations they experience during this process. Here’s what I found out:
Respondent R — “I enjoy browsing and scrolling through cars until I find what interests me; I could do that for hours. The most important thing for me is that everything is clear and well-organized.”
Respondent A — “Most important to me is to see all the information about the car, such as fuel type, price, mileage, engine size, and similar details. Additionally, it’s crucial for the process to be as short as possible because I am an impatient person. If I can’t find what I need quickly, it frustrates me, and I might give up. It’s also frustrating not to be able to locate a listing I viewed earlier, as I’m unsure whether it’s sold or just challenging to find.”
Respondent T — “I’m not familiar with cars, and I don’t know what to look for when choosing one, but the price and the appearance of the car are most important to me. The challenge is that I mostly don’t know the actual market prices of cars, so I could make a mistake in my selection.”
Moodboard:
User Persona
UX map
This UX map is specifically tailored for the mobile version as I have mostly changed UX.
Color and Font Style
I haven’t changed the CTA because the Polovni Automobili platform is recognized for it, and users are accustomed to it.
Final Design
Let’s see what have I done.
Home
1. Mobile Version
❌ The original mobile version on the homepage features only highlighted ads and business sellers. The name is placed over the image, making it difficult to read. Business sellers are located at the bottom of the screen, and the background is transparent, making it challenging to read without close inspection.
✔️ I moved the search bar from the navigation bar to the top part of the screen so that the user can immediately take action. Right next to the search bar, there’s a drop-down menu with vehicle options. I added a section for new listings, followed by business sellers, and then highlighted ads. I made some changes to the navigation bar, adding the homepage because usually we navigate through the menu to get to featured ads. I also included a section for messages to facilitate quicker communication. I relocated my ads into the profile section.
2. Web Version
❌ In the navigation bar, there are sections that are immediately visible, such as ‘Parts and Accessories’ and ‘Vehicle Offers.’ Additionally, within the selling section, there is a ‘Advertising Offers’ subsection, which is prominently featured in the navigation bar. There is unnecessary sections.
✔️ I removed unnecessary sections from the navigation bar and moved it to the top bar. I also added a ‘Latest Listings’ section for users who frequently visit the platform and like to stay informed. Business sellers are still there. The option to rate business sellers already exists; I just added the rating to the seller’s card. For highlighted ads, I reduced the number of cards per row from 6 to 4 for better visibility and included location information. I removed the ‘Sold in the Last 24h’ section because it’s not meaningful to users unless the specific vehicle they were viewing was sold (I addressed this differently, as you’ll see below). I also eliminated the ‘Vehicles with Reduced Prices in the Last Few Days’ section for the same reasons as sold vehicles, incorporating discounts into the sorting section while user search.
Search
- Mobile Version
❌ Firstly, the search button is at the top and looks unusual. High cognitive load. Some cards are red, some blue, and some are white. White cards seem standard, while I’m unsure about the significance of blue and red — possibly highlighted ads. The shadows on the cards are too pronounced, and the information is not well-organized. There is no button for back in section Search.
✔️ I divided the search into two sections. In the first section, users can see their previous searches, thus saving the entire search history. In the second section, we collect general information. I kept the detailed search in the filters. I did not make too many changes since people are accustomed to the existing system. Regarding the results section, I made significant modifications. I prioritized the image to attract buyers, placing it prominently with essential information below. I also added a price rating, indicating whether the price is realistic or not. This is useful for users unfamiliar with standard vehicle prices. I also added a search bar for searching by keywords.
2. Web Version
❌ In general, it’s very similar to the mobile version, but on the web, the search section is better due to lower cognitive load. Therefore, the cards are less of an issue, and they are more readable here compared to the mobile version.
✔️ Here, I placed the detailed search on the left side along with basic search information. Additionally, there is an icon on the card for users to save the ad, allowing them to track whether it is sold, etc. (I discussed this in the home section). Everything else is essentially the same as the mobile version you saw earlier.
Vehicle Information
- Mobile Version
❌ Unnecessary new navigation bar. The image doesn’t take up the entire width of the screen. There’s a large space between the image and the price, and the price and the information.
✔️ Now, we also have an icon to save the ad. I changed the layout of information to be vertical rather than horizontal, so users read items vertically. This makes it more organized and aesthetically pleasing. Why is it more readable? When reading horizontally, there’s empty space between two words, and as a result, there’s no visible direction so we can just move down to the word below; this can’t happen when we read vertically. I also added color to sections where the answer is YES or NO to emphasize that information for users and speed up its processing.
2. Web Version
❌ This section isn’t bad, except that the price is the same color as the rest of the text, so it’s not particularly highlighted.
✔️ I moved the title next to the image so that users have all the basic information on one side and only the images in focus on the other. Right below the basic information, there are the buyer’s contact details with two buttons, one for calling and one for messaging, for quick contact. Next, I divided sections with 4 columns of words (like in the Equipment section) into 3 columns. Why? When there is too much information or too many words, everything can get cramped, look messy, and be harder to read. I added a section for additional costs so that users immediately know what additional costs they might have, without having to search in the description.
Conclusion
We all have our habits, and we don’t like them to be disrupted. For example, Person 1 has a habit of leaving their headphones in a box next to the TV, and Person 2 takes them and puts them in a drawer in the hallway. Now, Person 1 is wasting time and getting frustrated because they can’t find them. It’s the same with app users; they are accustomed to a certain way of using the app, and if we change everything, users will feel the same as Person 1. In case of drastic changes, there is a simple solution — a pop-up or a notification with that information — inform the user!
Contact:
vesovic.natalijaa@gmail.com