Over the past two weeks, we’ve been rolling out a significant number of interface changes on the Price Guide, Watches for Sale, and RepCheck pages. Overall, we’ve gone for a design with an integrated search bar, and switched the Price Guide and RepCheck pages over from a tile display to a list display.
In this post, I’ll talk about the motivation for the redesigned Price Guide and what we hope to accomplish. Going forward, I’ll be writing about the changes that we make to the website here, to keep our community informed about what we’re working on and open up a two-way channel of communication.
For reference, here is what the old Price Guide looked like. We used this old design for a long time - it’s almost completely unchanged from when we first launched WatchCharts early last year.
Based on the feedback we received from our users, as well as our own assessments, we found a few problems with this design.
First, it looks very similar to the tiled listing design on the Watches for Sale page. We received several reports from users indicating that the visual distinction between the Price Guide and Watches for Sale was not sufficient. It was not immediately clear whether they were looking at model information or listings of watches for sale.
Secondly, presenting the price guide information in this format restricts the amount of information that we can clearly display. Because the model name gets cut off after two lines, you may not be able to see the entire reference number of the watch unless you hover over the tile. Furthermore, we’d prefer to display the fair market range rather than the market price, but we cannot do so cleanly here without making the text significantly smaller, or breaking it into multiple lines.
Finally, and most importantly, this just doesn’t look like a price guide. Each piece of information is compartmentalized in a small box. It requires the user to look at each box, left to right, then top to bottom. It reads more like an Instagram feed, a layout that is more suitable for casual browsing than researching information.
So needless to say, we weren’t happy with the design and I personally spent several days devising and implementing a new layout. Here is the new design that we’ve come up with.
The first thing you’ll notice is that we’ve put a big search box at the top of the page. This is something that was sorely missing from the previous design. While browsing thorough all the models in the price guide, it’s only natural that you’ll want a way to quickly search as well.
We also ended up opting for a list layout. We’ve put less emphasis on showing the image since it is not as important in this context. And it makes room so that you can actually see the entire name of the watch without having to perform any interaction. The information is also more clearly organized, with individual rows for each field.
The last thing I’d like to point out is the shift from displaying the market price to displaying the fair market range. Displaying a single market price value is an oversimplification, as there can be significant variations in the actual market price of their watch based on a number of factors: age, condition, box, papers, etc. Displaying the fair market range instead provides much more information at a quick glance. It captures the variations in the market and allows someone to quickly see, for example, the lower end of the market if they are looking to sell quickly or sell a watch in worse condition.
Overall, I’m pretty happy with the results. We’ve already seen that a significant number of our users are taking advantage of the new search bar. I think overall, the information is presented in a much clearer manner. As a bonus, the design is now much more visually distinctive from the Watches for Sale page.
How do you feel about the redesigned Price Guide? Vote in the poll below and leave your thoughts in the comments. We’d really appreciate the feedback!
- I like it!
- It could be better
- I prefer the old design