CRO Development, a Brief Introduction
Tags: webdev, frontend, cro, javascript
Published: 2022-03-12 05:33:46

If you are anything like I was at the point of accepting my first frontend development role within a CRO team you are probably wondering what on earth CRO even is.

So let me try and explain…

For a start CRO stands for Conversion Rate Optimisation. Yes, I can hear you… what on earth is Conversion Rate Optimisation?!  

To put it as simply as possible CRO (I’m sticking to the initialisation) is essentially optimising a website’s design/functionality/usability in order to improve said website’s conversion rate.

Generally speaking a conversion rate can be seen as the number of users whom visit any given website and end up satisfying the end goal of said website.

Usually this is measured as the number of people which enter their credit card details and buy some stuff. However, I have worked on websites which have a variety of conversion goals.

These goals vary from users that signup to a mailing list to users which donate some money to save a donkey (literally).

The common theme across all conversion goals is that the end user does something which satisfies the website’s intended use case.

## A simple analogy

The simplest way to explain CRO would be compare a website to a general shop. In all general shops the overall aim is to get potential customers in the shop to buy stuff.   

The act of buying stuff is what we would consider to be the conversion goal of our shop. The experience the potential customer receives while in the shop is what we would consider to be the user’s journey.

If the potential customer ends up going through the shop, putting some bits and bobs in a basket and then feeding the tills with some of their hard earned cash we can happily say that the customer converted.

In the event the customer did not feed the till we can begin to question what went wrong during their time in our shop. This is where a CRO team would step in.

## Enter CRO

It is our job to find out why that customer did not buy anything.

Did they even have the intention to buy anything when they entered the shop? Were they just here to look around? Did they know we have a promotion on? Did a shelf fall on them and break their leg? Did they somehow manage to summon Cthulhu and end being sucked into an unknown mythical realm?

The only way to find out this information is to go through our shop’s CCTV and find the point at which the customer decides to leave the store (or gets sucked into another mythical realm). We can then go through CCTV from previous days and see if other customers have exhibited the same behaviour.

In the event we notice a large number of our potential customers are being sucked into a blackhole when walking past the bread we can safely assume that, maybe, people are not so fond of the Cthulhu summoning bug which resides next to the Hovis Superseed loaves.

We can then hypothesise how to improve this bug and get to work on formulating some kind of test (usually an A/B test) which takes a percentage of the store’s footfall and shows them the Hovis Superseed without the Cthulhu summoning bug.

After a large enough number of customers have been subjected to our test we can then analyse whether our hunch was right. If it was we can implement the fix for everyone and, hopefully, the shop will make more money.

## The skills required

Generally speaking, in order to perform as an efficient frontend CRO developer you will need a very strong understanding of the way in which the internet actually works.

Knowing JS, HTML and CSS/SCSS is also essential but, I would argue that a deep understanding the overriding infrastructure which powers the entire digital realm is paramount to successfully performing as a CRO developer.

The reason I say this is, when entering this role you will be handed briefs which ask you to complete tasks such as “add an add to cart button to every single product on a category page”.

Any experienced developer working as part of an internal dev team for an e-commerce store probably just read that and thought “well, that isn’t hard, what’s this guy on about?” And they’d be right.

In traditional web development adding a CTA (call to action) to a tile in a grid is trivial. But what happens when you are working in a team which is isolated from all the internal tooling which you rely on in your day-to-day work?

Those brand guidelines/reusable react components/helper functions/react hooks are not available. You will need to essentially find a page with an existing add to cart CTA and then reverse engineer it.

You will need to account for side effects and situations which you otherwise may not have even considered: does the nav bar show a counter for items in the cart? Is the website static? Is it an SPA (Single Page App)? Does the API call want a json? Form data? Query parameters? What are the values the form expects? Are there any validation fields attached to the form? Where does the request get the product’s ID from?

There are so many questions which will need answering that I could write a post about that in itself and if you do not have a solid fundamental understanding of the internet, the HTTP protocol, REST APIs and, more recently, SPAs (and their frameworks) you are going to have a huge baptism of fire.

## The difference to traditional Frontend Development

As you can probably decipher from the the above list of considerations when adding an add to cart CTA to a product listing page CRO development can be considerably more complex than working as a dev in a traditional integrated team.

I personally have experience in working as a CRO dev as part of an in house CRO department at New Look UK and in my current role as a CRO developer for an agency (Journey Further).

When working as part of an internal team I must admit a lot of the challenges are easier to circumnavigate by virtue of the fact that you are only working with one code base and you will generally be able to access the source code of the overriding website.

You will also be able to liaise with other departments about the requirements of their API instead of having to reverse engineer a user flow.

Within an agency things start to get insanely complex due to the fact that no two devs ever come to the same conclusion on how to solve a problem — unless they copied an answer from some tutorial or Stack Overflow question.

This means that you will need to make internal memory maps for each of your clients’ codebase, web architecture, brand guidelines, the CRO tool which they are using, limitations of their servers and everything in between.

For example, if I am making the above CTA on an SPA I am going to need to account for the fact that the web page technically never changes. Sure, it may seem like it does, but it doesn’t.

React uses the navigator API to unload the page and then re-render the content which simulates a page change.

This means I need to account for the fact that my code will only run once and I need to ensure that the CTA is removed when react-router does its thing.

I need to ensure that the CTA is re-added when the user returns to the correct page. I also need to account for the fact that anything in the main app container is most likely going to be removed, including my code (so how can I ensure that the CTA is re-added?).

Different CRO tools have their own methods to account for the SPA problem but this brings me back to the point of the mental map which needs to be made in order for a CRO dev to be able to work efficiently and effectively.

## Finishing up

I hope this article helps to explain the role of a frontend CRO developer to some people and removes some of the stigma and biased opinions that we face. Most notably that it is not real development.   

Sure, there are many drag and drop user interface which allow non-devs to conduct their A/B testing but they fall short of enabling their users to conduct more complex tests — such as adding an add to bag CTA to a product listing page.

As a dev (freelance and on personal project) I have worked on full stack react/nextJS apps; Built SPAs from scratch using JS; Authored basic JS libraries; Created entire WordPress themes; Modified Shopify plugins; Built brute force tools to crack passwords (my own, I got locked out of a doc which had a BTC private key, whoops); Created bash scripts to streamline trivial tasks; Made scrapers which use regex to decipher covid travel entry requirements from the gov.uk website.

And I can honestly say that CRO development is something which has enabled me to advance my skills and knowledge much faster than any of the above.

So there you have it, a brief introduction to CRO development and what it entails.

Thanks for reading, love, peace and happiness.

[Original post](https://somethingdecent.co.uk/development-and-coding/cro-development-a-brief-introduction/)