About TapeCards

   TapeCards began as an idea that came to me on a hike around the winter of 2019. The pitch was basically this: cassettes brought back for the digital age. Cheap, business card-like objects with QR codes that could be set up to redirect the user to someone's playlist or album. I knew I wanted them to be rewritable, so I'd have to have them linked to a database. The cassette angle was to give the idea any purpose at all. Of course, you can just text someone a link to your playlist, but there's something very nostalgic about being able to hand someone your fire mixtape and I wanted to tap into that.

   When I returned home I almost immediately got to work. The name TapeCards didn't take me long to come up with, they are business cards that look like cassette tapes after all. Truly some of my most brilliant work. With the name, I quickly snatched up the domain and moved on to the graphic design. I'm gonna let you in on a little secret here. I don't have the money for a photoshop license so I rely on free tools. For photoshop-like work I recommend an online tool called Pixlr (can't have any of those pesky "e"s in your name, right tech companies?). That's great for editing photos but when I want to design something myself I go to my secret weapon: Google Slides. It's great, you can make vector graphics and it has lots of tools for aligning things with each other. It's my go to for simple-looking designs like this.

All TapeCard Previews    Using Google Slides I designed 6 different possible designs and then proceeded to do some market research. I basically just surveyed 20 or so people I knew about which they liked best, not exactly scientific. After making some tweaks I settled on a simple red design that I thought would be a great launching point for the product. I made a Java program to create a unique base64 ID for each card and generate the image files of each card with it's corresponding QR code. This part of the process was fairly easy and I was able to test out the basics to be sure I could get brought to the right page from most built in camera apps on phones.

   The next step was doing some research. Alright, here comes another plug... I discovered a company called Moo that had exactly the feature I was looking for: they allowed each card to have a unique back which would be necessary since they would all need to have different QR codes that matched their IDs. Moo also offered a few different size options for the cards including one that is very close in size to a credit card as opposed to a standard business card that is a lot closer to a 2:1 aspect ratio. I decided to go with that since I thought it better matched the ratio of a real cassette. My experience with Moo was really great so if you ever need to print a bunch of business cards that are all different and they're a weird aspect ratio, I'd recommend them.

   I ordered 50 cards and promptly began work on actually making them functional. The backend was the same as my Tetrisn't leaderboard for the most part. The website GETs and POSTs data to a Heroku server that talks with an SQL table. It's not that secure at the moment but I'm not too concerned given the scale I'm working at. I'll probably add in some extra server-side measures when I feel bothered to. It's quite a simple system so I won't dwell on it too much.

Old TapeCards Site    My next step was the front-end. I originally bodged together a very ugly looking but functional website because I knew the users wouldn't spend much time there. It was just a red site with a couple of buttons at this point. For the functionality of scanning the QR codes I utilized a fairly easy to use javascript library called jsQR. This marked my first real experience working with cameras and video feeds which was kind of finicky, but resulted in a system that functioned perfectly, despite a low framerate. I was fine with this site for my first test-batch of 50 cards but I would change it in anticipation of my first real order that I would attempt to sell.

   After the success of my first batch of cards I ordered 100 more with the intention to sell them. I got 50 more of the same design and 50 of the white with the red-orange-yellow stripes. As of right now I've been selling them for $1 each or 6 for $5 and I've found some great success. Before this batch arrived, however, I resolved to improve the user experience of the site. The functionality didn't change much at all, but I redesigned the look to replicate a portable cassette player. I did a little bit of javascript to display the type of card that was just scanned and play a little animation of the reels spinning and the tape moving. I also changed how the camera works by playing the raw video from the camera and then displaying the markup information in a separate canvas on top of it at the slower framerate it calculates at. The end result is much smoother although the highlight of the QR code doesn't always line up perfectly. I'd still call the redesign a major success.