The number of likes that a skin’s tweet received could act as a proxy for how well that skin resonated with a modern audience. This gave us a binary good/bad rating for a large number of skins, but after each skin was tweeted, I gained even more data. People in the chat can then react to that message with a ? or ? to approve/reject the skin for inclusion in the Twitter bot’s queue.
This bot can be prompted via a !review command to show a random Winamp skin from the Internet Archive collection. To ensure a consistent quality level from the bot, I built a separate chat bot in our Webamp Discord channel. But how do we know which skins are the most interesting?Īfter collaborating with the Internet Archive, I built a Twitter bot that tweets out a few Winamp skins a day. By that, I mean delivering the most evocative images possible. Sort the Best Ones FirstĪfter maximizing the number of skins we can show the user - both in space and time - how else can we increase the density? By having more Winamp essence in each screenshot. So, we are left with an interface that is just an infinite scroll of a wall-to-wall grid of skin images. Infinite scroll is the canonical answer to this, so it’s what I did. This works particularly well on high density displays where sub-pixel rendering means we are still showing all the pixels.įrom an interaction perspective, maximizing density meant making it as easy as possible for users to get more skins. I also scaled them down by half so that more could fit on the screen while still leaving them recognizable. With a large number of skin screenshots in hand, the next step was to come up with a design that could show the user as many of them as possible.įrom a screen real estate perspective this was easy: just show wall-to-wall skins.
That’s more than enough to saturate any user!Īs part of this collaboration, I had also written some code that used browser automation together with my browser clone of Winamp - Webamp - to automatically generate screenshots of all 65k skins. This grew the collection up to its current size of ~65,000 skins. The attention this generated resulted in more people with skins coming forward. I had already worked with the Internet Archive to collect many Winamp skins. In the rest of the post I’ll outline how I solved these problems. I, correctly as it turns out, suspected that a site like this might generate a lot of interest, so I needed to ensure that the site could withstand large traffic spikes, and that the cost of running the site would be reasonable even in the face of large spikes. Delivering on this vision required solving a two interesting problems:īuild an interface that maximizes the skins we can show across all possible axisįinally I had an additional constraint. So, I set out to build a website that leveraged this technical progress to saturate the user with as much Winamp skin aesthetic as possible. However, since that time, the web, bandwidth, and CPUs have come a long way. Websites that curate skins have been around since skins were first “a thing”. But, both the decision behind that design, and how I built it, were driven by a well defined vision. At its core it’s just a single scrollable grid of filterable screenshots with a live preview when you select one. I hope that the site feels simple to users, even obvious. So I thought I'd share some of the thinking that went into the design and execution, which I believe contributed to its success.
The project has proven more successful than I could have hoped, serving ~30 million screenshots to ~50,000 users in the first 24 hours and receiving coverage by PC Gamer, AV Club, Gizmodo, The Verge, Hacker News, and Reddit in the following days. It features instant search and live preview. It’s a website where you can endlessly scroll through Winamp skins. Early this month I published a project that I’ve been tinkering with, on and off, for more than two years.