Sep 17, 2020
How My Latest Scheme Became Legitimized Through the Magic of UI
A case study of ShopBySub.com’s launch
Background
I’m a schemer. I like schemes. I was looking for a new scheme. My last successful scheme relied on referrals to Coinbase and Binance. I thought that was the way to go — something infinitely scaling where I can set it and forget it.
Enter the Amazon Associates program.
For those of you who don’t know, you can earn a commission by referring people to products on Amazon. Working backwards from this, I warehoused and categorized a ton of comments that included links to Amazon product pages. The next step was to create a frontend for this data so users could consume it.
The Product
Enter ShopBySub.com.
The goal of this website was to allow users to, you guessed it, view and sort all Amazon products links by subreddit. I thought there were several use cases:
- People interested in what subreddits linked to what products because it was that, just interesting (do not look up /r/wallstreetbets on ShopBySub.com). They might happen see something they like and decide to buy it.
- People looking to get into a new hobby and wanted to know what products Reddit recommends for that hobby, avoiding trying to discern fake reviews and cheap knock-offs from the real deal.
- People looking for gift ideas — e.g. Bob is looking for a birthday present for Alice; he knows Alice likes Star Wars; Bob browses ShopBySub.com/StarWars and finds an interesting book on The Secret History of Star Wars.
So I spent the next couple weeks hackathoning it, staying up til 3am and working 14 hour days on the weekends gathering as much data as I could as fast as I could, learning and tweaking my capturing code to make sure I was getting good data, building the UI, and devopsing it as best as I could to be hands-off with CI/CD.
I really didn’t need to go to market within 2 weeks of the ideation phase, but I got excited — it was a new scheme.
The Launch
I launched to a resounding “huh, that’s kinda interesting” from friends and colleagues. Strangers were even less thrilled. Feedback from Reddit was virtually non-existent, which, in a way, was feedback in itself. I paid like $30 for some Reddit ads, and Google Analytics showed similar behavior: a high bounce rate* (~87%), an almost 0 engagement rate.
But what did I do wrong?
I delivered everything I had originally set out to. ShopBySub.com served its purpose — it displayed Reddit comments linking to Amazon products grouped by subreddit. It was even sortable, mobile-friendly, very performant, and ADA compliant!
But it looked like garbage. Functional, but garbage.
The color scheme was whack, there was nothing to indicate pictures were links, the search bar was forgotten about and confusing, the homepage was just a long list of subreddits, and the misalignment of information within cards was subconsciously anxiety-inducing.
It makes sense why user engagement was so low, doesn’t it? This website is unknown. Nobody knows what ShopBySub.com is. It could be a random website that someone spun up to dropship, farm user data, or steal credit card information. Why would you click on a link on this site if it looked like a scam instead of someone’s side hustle?
Redemption?
My hypothesis was set: build a better UI and users will stay and interact with my site.
I decided to put the pedal to the metal and pull another 3am day.
First thing was first — attack the bounce rate. My hunch here was that people would scroll down through all products of a subreddit immediately after being linked to a specific sub’s page (e.g. ShopBySub.com/battlestations). This could easily cause them to overlook that there was more to the site, that you could search by subreddit.
BAM hit ’em with the sticky search bar. I also changed the text from search by sub to search by subreddit so it would be more explicit.
Next I had to do something about that ugly color scheme that looked fine to my non-designer brain. I was on Material UI’s site and I liked the way the dark theme looked — so I tried to do something similar in terms of colors.
After running that by some buds I got the 👍 in terms of it looking better.
In case the site wasn’t obvious enough to some people, I also added a tagline to the header providing some context.
Then I completely rehauled the comment card:
- Added a white background as most amazon products have white backgrounds so things would feel more the same size.
- Added a material-ui icon to signify that the image was an external link.**
- Squished all the content together so that things weren’t misaligned or sticking out.
- Added a slick lil’ vertical bar to the left of the comment inspired by how Slack, Discord, and CISCO WEBEX TEAMS® does quoted text.
- Added a gold border hover state to the image to really hammer home that it was a link.
That long list of subreddits on the homepage had to go, that wasn’t useful at all. There’s a search bar and it always felt like more of a placeholder than actually functional.
I decided to create a leaderboard of Top 100 most upvoted comments with Amazon products in them that would be updated every time I added any content to the site.
These changes were all well and good, but how did things turn out? I loaded up another $30 for ads and waited a day.
The average session duration nearly quadrupled, and the bounce rate dropped by about 24%. There have only been a total of 126 visitors to the site, so take these results with a statistical grain of salt, but I can say I’m happy with them so far!
As for the real deal — my clicks to Amazon products went from 0 to 17. No products purchased yet, so I’m still in the hole for about $2 in devops costs + $9 in domain cost + $60 in ads = -$71 lol. We’ll see how things pan out. I’ll continue to add more features.
If you enjoyed this article, please check out https://www.ShopBySub.com or share it with a friend.
If you would like a specific subreddit to be super-indexed please enter it in this Google form https://forms.gle/tbuNuxgXh1PPm7xH9
*Author’s note: A high bounce rate in SPAs isn’t necessarily something to worry about. It just meant that, on average, users would never navigate to browse another subreddit’s content on the site. E.g. if a user was referred to https://ShopBySub.com/woodworking, they may spend some time browsing specifically woodworking products, but then close the tab without navigating to another page. A low bounce rate means that users found the site as a whole more engaging and are more likely to return.
**I’m still not entirely in love with this icon as it doesn’t tell you anything about the external site being Amazon, but I’ll figure somethin’ out and it’s better for the time being.
