Competitive Analysis:
Mobile Shopping Search Design
I’m currently building a search page for a shopping app. As this work has been done roughly 23 million times before, I decided to take a look at the design solutions that the most popular shopping apps brought to their search pages.
Here are the results.
Fab
Starting with my alma matter, we have a fairly standard grid (UICollectionView), with a weird amount of empty space at the bottom of each cell. If I remember correctly this is for discounted pricing (you only see the MSRP if it’s full price).
Amazon
We don’t like to think about it this way, for whatever reason, but shopping is a compartively data-rich experience: how much does it cost? Is it cheaper than other options? How fast can I get it? Is it any good? Do they have my size in stock? The list goes on. Amazon acknowleges this and tries to fit as much information as they can will still allowing you to see multiple products. The list view (a UITableView for us iOS dev) is ideal for this.
Jet
The newest and hypiest of the e-commerce companies is Jet, the the shopping-club-esque marketplace aiming to compete with Amazon. They too go for the list view, but with notably more negative space. Prettier than Amazon, for sure, but less information-rich.
Etsy
Etsy goes for the grid view, fairly successfully I’d say. Generally speaking, the grid view lends itself to a more image-focused search, which in turn would imply that purchases are more emotionally based (e.g. looking for something unique to give as a gift). But the cardinal rule of shopping still applies: always show a price.
Instacart
Instacart too goes for the grid view, but notably opts for three columns instead of the usual two. One would guess this is to get as many products as you can on the display, which makes sense given the variety involved in grocery shopping, in addition to the fact that most of the products will be things you’ve bought before.
Target
Target chose the list view, and while at first glace it’s fairly visually appealing, I personally question their decision to sacrifice image size in order to place the star rating at the bottom of the image, especially considering the amount of negative space they leave at the bottom of their relatively large item name.
Google Express
Google Express — Google’s same-day delivery service — chose an interesting approach. Because they’re esentially a marketplace of major retailers + a delivery layer, they chose a list-of-lists: a vertical scroll view of retailers, each with a horizontal scroll view of product results from the search. While it’s not as product-focused as you may like (shouldn’t I see the most relevant results, regardless of retailer?) it’s a decent solution if you do in fact want to group products by store.
Home Depot
While Home Depot takes a very similar route to Amazon, they offer as visual option to further filter your search in the form of a horizontal scroll view, which is pretty clever.
Best Buy
Best Buy, while also going for the simple table view, is definitely my favorite. Resisting the temptation to put as many products on the screen as possible, they have an image-centric view that gives images and price the strongest emphasis.
Overall, search design is kind of boring! But for better or worse, it’s going to be one of the most used features of your shopping app. So maybe spend some more time thinking about it.
