Cut or Tap

What is it?

Cut or Tap is a multi-tiered membership-protected blog for professional tutoring of the Pokemon Trading Card Game or Pokemon TCG. It is a collection of articles and videos that explain and/or demonstrate the tips and tricks needed to have more successful Pokemon TCG matches in professional tournaments. Cut or Tap was a project undertaken by myself and Phinnegan lynch, who had been playing professional Pokemon TCG for the past 5 years. Together, we built Cut or Tap from the ground up starting with a WordPress installation and a lot of ideas.

Although I no longer continue maintenance and updates to the site, I played a major role in the development of the site. From time to time, I help Phin solve web-related problems that come up, but the business is his own, and I was more-or-less contracted to help build it.

Cut or Tap was probably the largest project I have ever worked on. I spent the majority of 2016-2017 building it and then continued maintenance and upgrades until late 2018. Through the process, I made a lot of changes to the original theme and added several of my own plugins.

What does it do?

Cut or Tap is designed with the freemium style in mind, meaning that you are offered a little for free, but if you want more, you will have to pay. All of the articles have free sections available to anyone who views them, but a pay-wall is introduced once you read up to a certain part of the articles. The pay-wall can be removed if you sign in to an account with an active membership subscription. Along with the articles, Cut or Tap also offers videos (hosted by Vimeo) that you can watch. They mostly feature Phinnegan playing a few rounds of Pokemon TCG to show the viewers how to play certain “decks”.

Cut or Tap also offers professional “coaching” from Phinnegan, which is done in the form of online video conferences. It also has a forum that can be used to talk about tournaments, deck-building, Pokemon Go, or thoughts and suggestions for the site.

How does it work?

The Platform

Cut or Tap runs off of WordPress. We chose to use this platform because it excels at providing a versatile framework that I could easily change and upgrade, while also providing a content management interface that made it easy for Phinnegan to write articles.

The membership functionality runs off of a plugin called Memberpress. The plugin does a lot of things, from managing the activation status of the user accounts, to interacting with the payment gateways in order to provide a way to enter credit card information online. It also manages the transmission of emails that are sent because of account activation/deactivation, payment conformations, receipts, etc.

Cut or Tap is pretty advanced in that the WordPress dashboard is never viewed by any staff member other than Phinnegan, myself, our editor, and content manager. This is because we have a plugin for creating/managing posts on membership restricted pages. With this, writers can submit their articles without having to interact with the dashboard. We created a page called the “Writers Hub” where they can view their current/pending posts and create new ones. We also have a plugin for restricting access to certain parts of the dashboard based on their role. This is so that our editor and content manager don’t have access to anything that isn’t related to their job.

On top of the plugins that we configured from other developers, Cut or Tap also features several plugins that I created myself. I created an email plugin that allows Phinnegan or myself to send emails with the same template that is used throughout all of the Memberpress emails. I also made a plugin to make buttons (since the TinyMCE editor that WordPress used at the time didn’t have functionality for that) and I made a profile-section shortcode, a decklist shortcode (and TinyMCE addon) which allowed the editor to create a decklist with a single button, and a table of contents shortcode.

The Design

Cut or Tap went through several stages of theme changes until we found a theme that felt right. Originally the site was going to have a “Magazine” style, where all of the posts were listed like a newspaper. The site was also going to be designed in a lavender color. I made hundreds of lines of style changes to make the theme in a lavender color, only to find out that the theme is not quite in the direction that Phinnegan wanted to go. As a compromise, I said that “we can choose a different theme, but we are sticking with whatever color it offers us”. We settled on a theme called “Canard” and that theme is still used in Cut or Tap today. The theme subsequently used the color red, so we changed the logo to match the site.

Though the site is based on Canard, it actually uses a heavily modified child-theme that I created. The style sheets have hundreds and hundreds of changes that I made to fix the page titles, fonts, post lists, widget placements, the navigation menu, search bar, and overall responsiveness. I also pretty much redesigned the forums to work with the theme and even redesigned all of the contact forms.

All of the emails are hand-made as well. The membership plugin we use (Memberpress) manages the transmission of the emails through Cut or Tap’s mail server, but actual email templates are my own. They are made using HTML tables and contain links to the Privacy Policies, Term of Service, and contact forms. These are the same emails that are sent when you make an account, buy/renew a subscription, cancel a subscription, etc.

The Logo

Phinnegan had an idea of what he wanted the logo to look like, so he drew it out on a piece of paper and showed it to me. It was a very skinny pencil drawn sketch that resembled more of a signature than a logo. Still, I did my best to incorporate that logo into the site. I re-drew it using Adobe Illustrator so that it could be scaled up for larger devices, but at the end of the day, it wasn’t really a website logo.

I created a new logo that was more “blocky”, dual colored so that it could match the theme, and a bit metaphorical as to give the logo some meaning. The “Cut” part of the logo was cut in half and the “Tap” part of the logo was pushed in as if it was tapped to top. The letter o in “or” was also changed to a “Pokeball” since the site was designed for the Pokemon TCG. Originally, the site was going to be lavender and the theme was going to be in a “Magazine” style, so I made the logo lavender to match.

Once Phinnegan decided that the Magazine theme was not what he envisioned for the site, we compromised on a theme called Canard. The theme was predominantly red and didn’t offer any ability to change the color without paying for the theme. Instead of changing hundreds of styles as I did with the first theme, I just changed the color of the logo to match Canard and it stayed like that ever since. The red logo has a lot more contrast, and tends to look a lot better on forms, emails, playing mats, t-shirts, etc. I drew the first-generation logo with Adobe Flash, but it was later converted to an Illustrator drawing so that I could fix some of its flaws and scale it to any proportion desirable.

Creating variations of this logo was easy. I added text and images behind or around the logo for different occasions or titles for different pages. The Pokeball was cut out for the site icon, and is even used as the profile picture for Cut or Tap’s Facebook page.

The Membership

The membership system works in the form of tiers: Basic, Stage 1, and Stage 2. The names were modeled after the “Pokemon Evolution” stages that appear in the card game. Each tier has an associated subscription price that is required to be paid monthly in order to maintain an active membership. Basic Membership is free and offers the ability to take part in the forums and write comments/replies to articles. Stage 1 was supposed to offer access to the videos, but that was later changed to be Stage 2 exclusive. Though Stage 1 exists on the website, it is labeled “Under Construction” for the foreseeable future. Stage 2 is the standard subscription for the site which offers full access to all of the content on the website.

MemberPress handles the interaction between the membership forms and the payment gateways. Cut or Tap use to utilize both PayPal and Stripe, but due to some issues regarding payment delays, PayPal had was dropped. Part of the maintenance fees that Cut or Tap has to pay involve having a dedicated iPV6 address on hosting platform as well as a yearly-recurring SSL certification so that payments can be made on the website without having to redirect to another page.

The Coaching

The coaching system is pretty simple. I created a form that has questions regarding their basic information (name and email), what times they are available, what days of the week that they are available, and who they would like to be coached by. The coaching button is only available to those with a Stage 2 membership, so you will have to be a subscriber to schedule sessions. The pricing and scheduling times are done through the consultation email.

The Forums

The Forums are made with a plugin called BBPress. The plugin is maintained by the company Automatic, who also maintains the WordPress core, and many other accompanying themes and plugins. As a plugin, BBPress works really well for what it does, but its style sheets conflicted with a lot of the styles in the theme. In order to fix a lot of the problems, I had to write styles that overwrote both the theme and plugin’s style sheets. The end result was okay, but even today, I can still see some issues I would have liked to resolve.

Like most forum-based SaaS solutions, BBPress is equipped with a profile manager, moderation tools, award system, tiered replies, thread categories, and many other features that were fun to manage.