Goal #1: Launch a pro plan for my side project
The project
This is my centering tool for TCG collectors. If you are curious about the app before reading this post you can find it here: JoshBeeTCG
Shipping a product
This year one of the first things I wanted to do was ship a product (and have someone pay for it). I've been building dashboards, admin panels, integrations, and other products for other businesses but really wanted to deploy my own product end to end. I had a free version of my TCG centering tool out for almost 6 months and was getting pretty good traffic with a bare bones features set, I was building this for fun as a way to learn Svelte, but was starting to wonder if it could be more.
Honestly I was a bit surprised at how popular this simple concept of correcting perspective would become in my app. It seemed to really resonate with quite a few people as well.
So I decided to add a single feature (a custom camera module) and release it under a pro plan under the idea that this would save a user ~50% time per card over the existing workflow.
And to my surprise again, in the first couple days of releasing the custom camera module I already had a few people sign up for the pro plan.
Cleaning up the design
There was a lot of ui card elements and borders. For a prototype it was fine, but after watching some Y-Combinator videos with Ryo (Product designer) from cursor, I was super impressed at his view on design and how simple he made it.
I really wanted to focus on this idea of "Kill all distractions" and keeping the app interface clean by really thinking about where I was using borders. (1) (2)
I went from 6 ui cards per view, to a tab slider and 1 card per view, so a 66% decrease in the amount of borders from just a simple design change. I also took out a lot of unnecessary information by removing features that I may have liked for myself but were not really used by other users.
This idea of "Unshipping" features and moving around non-critical features off of the main view was really inspired by some of the interviews with Boris Cherny based on his time at Instagram. (3)
My past projects working directly with businesses almost nothing gets removed, usually we just add on another layer of complexity and move as fast as possible without really thinking about simplifying UX, so this was a nice change of pace.
Building out the user experience (UX)
Now that I was starting to get serious about the app, I really wanted the focus to be on the user experience first. The original was a quick prototype and 'just worked,' but it didn't look all that good. I rebuild the main app to perform much better and be mobile first, while also accomidating users on desktop. The original app required a lot of scrolling which felt janky and just didn't translate well on mobile (but at the time it worked!). I moved this interaction to a swipe pattern where users can now swap between views in a fraction of a second where before it may have taken a couple seconds a few flicks to get to the secondary view. There was also area's that could be hidden like once an image was uploaded the, upload button could be moved to a small action bar if a person wanted to replace the existing image.
Keeping it distraction free
I hate popups. Like a lot. Ads? Popup. Cookies? Popup. Newsletter? Popup?
I don't care if these things work from a business perspective, I want my app to be clean, without distraction, and without frustration.
To accomplish this I'm not adding any type of popup/modal not related to a specific user action/feature if possible.
- Cookies - No tracking cookies.
- Ads - None. I want people to feel like the pro plan is a good enough deal so they upgrade for advanced features to help fund the app.
- Newsletter - People can opt in and out when they sign-up, but outside of that I don't track or collect emails.
Stripe experience
Stripe was super easy to setup. You generate a redirect URL with a plan + discount and the user can pay using the Stripe checkout. There is minimal setup and the user receives a great checkout experience. Once they are done they can be redirected directly back to the app to use it directly.
When I was looking up how to integrate a billing admin panel for users to self manage their subscriptions, many tutorials and people were having their users sign in to Stripe by email. This is the easy and quick implementation where a user enters their email on the Stripe hosted login page, receives an OTP code, and then is able to login.
This is a big context switch for a user as they have to leave the current flow to grab the OTP, and then come back. I was debating if this was good enough. From a revenue standpoint this actually made a lot of sense because someone may get distracted when going to unsubscribe. But I wanted it to feel native and do what made sense from a great UX standpoint, so I generate a session on the server and the user is automatically logged into their billing panel without any additional login if they are already logged into my app.
Summary
Overall, I'm very happy with the progress I've made on this side project, as both a learning experience and product. This year I have a lot of ideas for both new and simple features to add to continue increasing the value of the pro plan, and also starting to explore optimizing SEO which I have never had a chance to do some scratch.