If you like cats and you like codes, this is the landing page review you've been waiting for.
If you like cats and and you like codes, well I have the perfect landing page review for you. "So, what is Catcode?" you may be asking yourself. "How is it possible someone has managed to combine my two favorite things? Is it anything like CatDog?" you wonder, hardly able to contain your excitement.
With Catcode, you can draw a symbol on a physical document, book, whiteboard, or cat, scan that symbol, and link it to any digital content such as a song, video, Instagram post, or URL. This is a very cool idea and the makers claim to have reinvented cats. No, sorry that's not right. The makers claim to have reinvented QR codes, and I don't think they are too far off.
Let's take a look at Catcode and see if there have been any attempts to reinvent landing pages. 🐈
The way I see things...
When I look at a landing page, I look at four key areas.
AudienceIs there a clear audience and does the page speak to that audience?
CopyIs the copy concise, engaging, and is there a consistent voice?
DesignIs the overall design functional, nice to look at, and accessible? How does it make me feel?
Calls to actionAre there clear CTAs that demand attention and do what they say they are going to do?
Will I dream, Dave?
First, let's take a look at the copy that sits on top of the hero image. The sentiment behind the headline, "Make your notes live" is good, but the phrasing is ineffective. Using a more common idiom makes the line more familiar and easier to read.
The next line is similar. I understand what the writer is trying to tell me, but this copy just does not work because it is too buzz-wordy.
Having the phrases "AI," "augment," and "digital content" in a single sentence is overload and makes my brain hurt. Remember, you need to communicate how you make your customer's life easier, not which fancy technology you use to accomplish that goal.
Although it is cool that you have implemented AI as part of your solution, nobody really cares about that. I love my iPhone because it works really well, not because of the type of thermal paste used on the circuit board. Users are smart and, believe it or not, can cut through bullshit pretty well. If you demonstrate that the app will make the user's life easier, they will buy it then thank you for letting them give you their money.
The concept of Catcode is not easy to explain with a simple one-liner, but one of the copy points further down the page does a good job. I've slightly modified that copy, and the new version is much more reader-friendly.
Bringing it all together, which option is more clear to you?
Early & fast
As we will see further down the page, visual aides are very powerful in demonstrating Catcode. The large hero image, however, doesn't tell me anything about how the app "brings my notes to life," but functions as a design element. On that point, the background should have a filter applied to reduce the brightness in order to improve the contrast with the white text.
Concise copy may be enough to get users to scroll down to learn more about the app, but this is a missed opportunity to capture the attention of your visitors and reduce your bounce rate. Embedding a video or gif showing the app in action will do a much better job of pulling someone in and keeping them interested.
As a minor aside, the catcode being scanned looks more like a pig than a cat, but I won't deduct any points for my lack of imagination.
Show, don't tell
As I scroll down the page I am greeted by the "Catcode in action" section header. This is what I've been waiting for. The video is well made and clearly demonstrates what the product does with several real use cases that I, a potential customer, can connect with. I can see the benefit of this app and how I can get creative using it in my own life.
The copy above the video has a couple of grammatical errors, but the message works. I like that you create a clear connection between the physical and digital by emphasizing that the code is "hand-drawn."
Two very simple fixes here. First, remove the quotation marks - since this is not a quote attributable to any individual, they serve no purpose. Second, switch "a" to "an" and remove the "s" on the word "contents". Now you're good to go.
Tell, don't show
Below the video are three points describing how Catcode works. These points essentially describe the video. This may seem redundant but not everyone is going to click play, so it is important have the additional explanation.
The first point is familiar territory so we'll just skip right over that one.
The second point stands out to me. This is the line I used to recreate the headline on the hero image. Enriching or enhancing paper notes is the key feature that makes my life easier. Linking hand-drawn codes to digital content is the means, enhancing and simplifying my physical notes is the end. When someone is making the decision whether to download/buy your app, the outcome is what matters.
The third point is effective as well. This falls into the "Uber for X" category of presenting a concept. Connecting a feature back to something that is already well-established in the user's mind can help them get to the finish line faster. Without the video, this point is key to understanding Catcode and its simplicity.
I think we've already met
The placement of the "Introducing Catcode" headline is strange. I am almost at the bottom of the page. I've watched a video and read three feature points. The introduction is far behind me. Get rid of that headline. Also, get rid of the "AI" name drop.
The production value of the second video is higher than the first, but the first video does a better job of simply and clearly explaining the product.
The FAQs at the bottom are a nice touch, but I think this information could be incorporated throughout the landing page itself rather than tucked away at the bottom of the page. The example provided in the image below "Record your professor's voice and add it to your notes" is a clear (and cool) use case that should be placed front-and-center.
Similarly, the fact that the app is free to download but has a paid "pro" version should be explained more clearly instead of being the last FAQ.
What do I get with the free version? What limitations are placed on my account? What do I get when I upgrade? How much does it cost? These are all questions that need to be answered upfront. People appreciate transparency.
Finally, there should be another CTA at the bottom of the page. Add another set of app store badges in or above the footer. I have read through the page, love the idea, and I'm excited to get started with Catcode. Don't make me put in any more work to get to the app store listing.
What did we learn?
✔️Don't overuse buzzwords. People can see right through it. The product must stand on how it helps users, not the underlying technology.
✔️Pull your readers in early and fast. Explaining how the product helps me beats snappy marketing copy every. single. time.
✔️The "Uber for X" format can be a powerful tool to help explain novel or complex products.
✔️Place a CTA in or near the footer. Reward your user for making it all the way to the bottom of the page.
What do you think?
Reach out on twitter and let me know what you think.