Disclosure

A few years ago, I just joined a company. And during the all-hands meeting, the CEO of the company was talking about the conversion rate for our product. Our conversion rate is X. We need it to be Y. He said.

The only little problem was… I had no idea what the heck he is talking about. And what is the conversion rate in the first place? So I asked my product managers colleagues and did a little research to get a rough idea about what it is.

Conversion Rate Is

“The conversion rate is the proportion of visitors to a website who take action to go beyond a casual content views or website visit, as a result of subtle or direct requests from marketers, advertisers, and content creators.” Wikipedia

In other words. It’s about measuring how many users decide to take action towards a specific goal, for example, buy a product or subscribe to a newsletter.

The other problem is ‘How’ to get better in conversion rate is much harder and less clear than the definition. Every product manager has his own ideas on how to do it. So It’s a mix of art and science. And If you are developing a website/app you actually are tackling the topic one way or another.

So here I will list some ideas on how to improve the conversion rate for your product from what I observed at the products I worked on.

What Is The Benefit For Your Users?

“These things might generate revenue in the short to medium run, but if you prioritize this at the expense of actually delivering on the product benefits, then that’s a bad optimization in the long term.” – Andrew Chen

Improving conversion rates and similar metrics at the end is for self-interest gain for your product and company. But before focusing on the self-interest gain, you have to think first about the value you are creating for your customers.

Product Cost

Before everything else. Test different product prices and extra costs (shipping, tax, fees). Accordion to Baymard Institute research that 53% of users decide not to buy products because of extra costs is too high. Think with financial and legal departments in your company of ways on how to reduce it.

💌 Are you up to date?

Get updates to this essay, and new writing on building digital products:

Design

“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple.” – Steve Jobs

Make design simple, minimal, and clean. Easy to say, but hard to do. Because it starts in mind, you have to clear your thinking first. Getting ideas for many new features is not that hard. But to know which feature to develop and which not. To know which feature to remove because it doesn’t serve the purpose of the product story. This is the real deal.

Part of the success of any product is depending on how easy the user can navigate towards specific actions. And any distraction from these actions is a failure for product goals. For example, in some e-commerce websites, they are making a mistake to show the users multiple calls to action on the same page. Like add to cart button, Add to wishlist button, Subscribe to a newsletter, and Chat button. Click on ad promotion. All are big shiny buttons. They are leaving the user confused about what to do next. In the end, you have to decide which action you want to focus on and design the page accordingly.

The best is to have one primary action to focus on for every page. For example, the goal of the product page on e-commerce websites is to inform the user about a product to help him decide if he is going to buy this product or not. Any additions to that page should be less important in terms of page sections sizes, font sizes, colors, etc.

Take extra care of image quality and the writing style for product description. Don’t make the user wonder after reading half a page full of long sentences of a product description. You know the best about your product. Make sure you communicate this well to your website visitors. Some companies hire UX copywriters to make sure the message they want to deliver is clear and informative. If you don’t have this talent in house, hire someone to do it.

Navigation

If you are making a content-based website like an online magazine or a blog. You have to think through how to structure categories and subcategories in a way to make it easy for the user to find related content to his interest. Also, think about different paths based on user type. For example, if someone new is visiting the website. Maybe we can redirect him to a landing page that shows the most popular blog posts instead of the usual home page that appears to rest of the users.

Limited time offers

There is a debate around this direction on whether companies should do it or not. But no one can deny the numbers. For example, show how many product items are left in inventory if they are less than 10. Or time-limited newsletter subscriptions. Or give a limited time discount. All these are ways to give a little push for the user to decide soon if he is going to take action.

Experiment

“To set your expectations, teams competent in modern discovery techniques can generally test on the order of 10–20 iterations per week.” Inspired – Marty Cagan

In the end, there is no right answer. You need to experiment and test with many ideas. Test different content, different styles, different layout, and different functionality. Discover what is working for your product and your customers.

Want more?

If you liked this post, please subscribe or follow me on Twitter.

Recently I watched the first week talks of Startup School 2019 from Y Combinator. It’s not just interesting if you are a founder but also useful if you are working in a company to understand how to build better products.

So here a few points from the talks:-

Even if you have a product idea in mind. Reach out for people maybe at bigger companies to discuss problems they have in similar products before you implement your idea. What are the features they like? What are the pain points? If you can improve or fix any of these points, try to sell your solution.

You don’t have to build a solution first to be able to sell it. you can sell an idea by a simple landing page.

At the early stages of a company, Talking directly to users is so much cheaper and more effective than ads. Products can get so much worse when you don’t communicate with actual user for max 6 weeks.

Build features based on user feedback and get back to them when you implement it. It’s a good way to transfer them into customers and will make them so happy.

Usually, users don’t know what they want in your product. it’s your job to figure it out and they will know it when they see it.

Doing users interviews “before” building a solution is the best way to save you from “I built the best product” bias, without actually solving a user’s problem. This mistake I personally saw many times that companies try to pick a technology and then ask what kind of problems we can solve with it? You have to start from a user need and solve his problem with appropriate technology. Simply like in real life you want to fix something then you pick the right tool to fix it.

First-order thinking is fast and easy. It happens when we look for something that only solves the immediate problem without considering the consequences.

Second-order thinking is more deliberate. It is thinking in terms of interactions and time, understanding that despite our intentions our interventions often cause harm. Second order thinkers ask themselves the question “And then what?”

There are many examples of the first type of incomplete thinking — for example, personal decisions like taking a job or investing your time and money into something. Or as in society like voting in elections.

And I say ‘incomplete’ because even if consequences seems to be positive in the short run, it doesn’t mean that it will stay positive in the long run. And more importantly, that also if it is positive afterward it will be just a matter of coincidence not based on a logical way of thinking.

Second order thinking

I enjoy reading about the history of personal computers and the internet. Especially the period of 80th and 90th. As it’s the history of the industry, there is a lot to learn from it. What kind of ideas are working and what aren’t? What makes a software product successful? What makes a software team successful? And what could be the fastest ways to fail? Etc..

And recently I was listening to an interview with the creator of Internet History podcast. And just going throw the list of episodes the topics are quite impressive. Check it out.

P.S. You can find it in any podcast app.

“The struggle itself towards the heights is enough to fill a man’s heart. One must imagine Sisyphus happy.” – Albert Camus

The Myth of Sisyphus

Albert Camus on his book The Myth of Sisyphus introduced a thought experiment. Imagine if we are watching Sisyphus pushing a massive rock to the top of the mountain over and over again. Everyday to the end of time. For us, that’s absurd and pointless.

Imagine also that he stopped pushing for a while. To reflect on what he is doing. To ask what is the meaning of what he is doing. Most probably he will get the same result. Then he will have to continue pushing.

And about that, Camus is saying the only solution for Sisyphus is to choose to make this process of pushing the rock his all world. To decrease the desire of making meaning out of it. To make the rock “his thing.” To engage himself entirely in the process and “try” to enjoy the small details.

Of course, Camus meant that as a metaphor. The point is the reflection from time to time is right and essential. But overdoing it is a waste of experience and enjoyment. The solution for Sisyphus is to be engaged enough in the activities that can bring him joy, And if he doesn’t know any. Then his job is to try and try more things until he finds one. To find his rock then make it his thing.

See more:-

The Frankfurt school – Philosophize This!

Several months ago I was reading Prof. Taha Hussein biography The Days. And one of the main points of his biography as you might expect was his experience with blindness. How he learned by listening. How he finished his degree. How he mastered new languages like French and even Latin besides Arabic. How he finished his Ph.D. in Paris. How was he able to sit for hours and hours to just listen to someone who was reading for him. How was he remembering all that without even taking notes?!

His life was hard, and his experience was just amazing and motivating.

After I finished the book, I wanted to try that. To try listening instead of reading. So I tried Audiobooks from Audible. I liked the idea so much, and I switched most of my books reading to Audiobooks. The experience is entirely different.

I was listening recently to Masters Of Doom book. The book is so well written that made me feel like I was listening to a movie! Besides a brilliant narrator Wil Wheaton the book experience was even better.

It’s the story of John Carmack and John Romero. Following their creation of Doom, Quake, and other games. They started from almost nothing to a paycheck from shareware royalties one morning of 100 thousand dollars, to a gaming empire that changed the face of the gaming industry.

I liked the curiosity, creativity, and the dedication they put into something they really really cared about. Creating a good gaming experience alone is hard. Combine that with the weak technology at that time to create small details like the infinite scroll as in Mario game when they imported it to PC the first time.

“In the information age, the barriers just aren’t there,” he said. “The barriers are self-imposed. If you want to set off and go develop some grand new thing, you don’t need millions of dollars of capitalization. You need enough pizza and Diet Coke to stick in your refrigerator, a cheap PC to work on, and the dedication to go through with it. We slept on floors. We waded across rivers.” — John Carmack

I watched Spotlight recently. The movie brief from IMDB:-

The story of how the Boston Globe uncovered the massive scandal of child molestation and cover-up within the local Catholic Archdiocese.

Besides that, the movie was well crafted directing and acting. It made me think again about the continues importance of spotting the social biases.

And how it is also essential to rethink about society ideas now and then. – Including our small social circles – which we inherit without even notice. With marketing words like the standards or the right and wrong, etc..

Although it seems like an intuitive idea, it’s incredible how we forget this and do what everyone else is doing. And that alone leads to disasters.

https://twitter.com/mastersofscale/status/966318967970201600

I was recently listening to an interview on Masters of Scale with Ev Williams. He is the guy who co-founded Blogger, Twitter, and Medium. The episode has many interesting ideas. I will share here, briefly, some thoughts about it.

As mentioned in the podcast, it all started when he read an article in Wired magazine about connecting brains and the instant publishing of text and ideas. He believed that the value was in the network, not in the software. But programming was the gate for him to create the idea.

The problem was that there weren’t as many people using the internet as there are today. It was different back in the late 80s. If you couldn’t code, you couldn’t even start. It needed to be easy to use, so he created a video on a VHS tape to teach non-tech users how to use the internet. That was an entirely unusual approach to solving such a problem at that time.

Then he moved to Silicon Valley, where he worked for O’Reilly Media to write technical books for the first generation of web engineers. At that time, he started a weblog at evhead.com which is currently redirecting to medium.com. However, if you are interested, you can look into it at archive.

Then the idea evolved, so he co-founded Blogger, Twitter, and Medium. Also, it was so exciting to see the development of ideas grow his story. That helped online publishing to form the internet we have today.


The main idea is ‘Don’t underestimate your first ideas.’ First ambitions. First desires. You have to go back to them. Review them. Develop them. Try to remember where you wanted to get to when you were a child or when you started your career. What were the things you were obsessed with? Because most probably these are the things that will make you satisfied after all. Maybe they are who you are. So who knows with being more yourself, where that could lead you?

I can relate to this. One of the first activities I liked when I was a child was writing. Of course, it was a simple level of writing, but I liked it. However, when I grew up, I also wanted to pursue a career in software engineering. But somehow that wasn’t enough for me. Thinking about pursuing a career in writing stayed. And just the idea of choosing between both was painful. But then I thought… maybe I don’t have to choose. There is a way to combine them, to find a middle ground.

Maybe this blog is just the place to do so.

Simple Twitter clone in Vue

Vue was released in 2014. Since that time I was thinking: ‘Yeah, just another JS framework to reinvent the wheel.’ But since last year it started to get more popular and got my attention. After the initial reading, I thought it is worth a try to see if it has something to say to solve the downsides of React or Angular.

Also lately a discussion became popular that Vue won the star war on Github ⭐️ for JS projects which is cool. But at the same time that doesn’t reflect the actual popularity in the current JS market although adopting Vue is increasing.

So I wanted to play around with Vue; therefore I sat a challenge to build a Twitter clone in Vue with no configuration to create a timeline for some of the best writers I like. So I started reading about Vue and will share here what I have learned and some ideas.

The first thing you notice when you start working with Vue it’s easy to kick-start, and easy to maintain. It has two ways data binding which reminds me of Angular 1.x and and a component-based system is inspired by React made satisfying combination. Regarding that in the documentation:-

On a higher level, we can divide components into two categories: presentational ones and logical ones. We recommend using templates for presentational components and render function / JSX for logical ones. The percentage of these components depends on the type of app you are building, but in general we find presentational ones to be much more common.

In Vue documentation, there is also a comparison between it and other main JS frameworks. You can find it here for more information.

The challenge was possible because Vue doesn’t require any build processes. Just like Jquery old days. Speaking of Jquey, There were some discussions around that Vue is the new jquery. But I don’t see it as a right comparison since Jquery focused on a specific need to make it easier to manipulate the DOM, but Vue or any other modern JS framework is a different story as it has also state management and routing, etc. to build entire Frontend application.

In fact, it wasn’t 0 configuration as I aimed for because I needed to add a local HTTP server to make it better for loading components. But I tried to keep the balance between showing Vue features without the need to add extra libraries as much I could resist 🙂.

Vue App

To start Vue app. you need to include a CDN version and initialize a new instance.


Components loading

To be able to make separate component and having a better-structured application I found a useful loader http-vue-loader.


Routing

In the last example that we have defined two routes /home and /addTweet which is using Vue routing. And routing link will look like:

Router link

State management

You can consider different solutions for state management, but in my case, I didn’t need additional solutions and was enough to define store variable and append it to Vue app data property as mentioned before.

In general, I find it a good idea to separate state management files, and only to allow modifying throw actions functions to make it clear where to look in the future, that makes state maintainability way easier especially when the app grows — and it will.


Then we can call store action to add new Tweet:


Component structure

Vue single file component usually includes three tags:-

  • Vue-HTML <template />
  • <script />
  • <style />

By default, you can use Vue-HTML templates. Which I prefer but if you prefer to use JSX syntax that’s also possible.

Modern JS frameworks which built on components based systems “including Vue” it supports the idea of having CSS styles in the same component file. I’m not a big fan of this approach especially in case of bigger components. But for feed.vue wasn’t a big issue since it’s relatively small.

https://gist.github.com/karimal/fe245740e0f8155e1a5da3347ab3d94b

methods vs. computed

One of the things that weren’t clear for me, in the beginning, was the fact that Vue has two similar ways to write the app logic. So you can write methods or computed functions.



So what’s the difference? 🤔

As mentioned in css-tricks article:-

Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object — typically the Vue instance itself or a Vue component.

Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use data to track changes to a particular property that we’d like to be reactive. Computed properties allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies. You can consider computed properties another view into your data.


If you like to see a live demo of the app you can find it here.

And for the full code example on GitHub.

In the next episodes

  • Best practices for building a better Vue app
  • A real-world data source
  • More advanced state management using Vuex

So feel free to share your ideas and recommendations to improve or more features you want me to write about 😉


Finally, if you liked the post, share it and spread the word 📡 😉