CRO and A/B Testing

HipagesGroup has recently introduced OKRs through all the departments. OKR (Objectives and Key Results) is exactly what it stands for: Objectives – goals that tell you where to go and Key Results – indicate how you will get to your goal for each objective. Our company OKR has been closely linked to Growth.

I was very privileged to be assigned into the Growth focus team where we created a CRO (Conversion Rate Optimization) pod consisting of our VP of Product, a product manager, myself and another developer. Our aim is to push out two CRO A/B tests a day and in the last few weeks, I am beginning to really appreciate and understand what Growth Hacking is all about.

  1. Analyse data to get insights on where the opportunities for conversions are on the site
  2. Look at user behaviour
  3. Come up with a hypothesis of how we can increase conversions
  4. Create an A/B test based on our hypothesis
  5. Analyse data of A/B test and the process starts again…

Once you get familiar with the process and deploy a few tests, it can get quite addictive. After the last few weeks, I find myself chasing those test results, wanting to know whether the tests we rolled out have moved the needle. The results for one of our CRO tests, aimed for the increase in mobile traffic, show that we have raised the conversion rate from 3% to 6% – that is a whopping 3% increase in conversions! CRO has now become one of my passions! Feel free to drop me a line if you have any questions or would like to discuss anything CRO.

Some other useful Reads and Resources:

I heart Handlebars

I was assigned an extremely exciting project at work the other day. We would like to make our articles section of hipages.com.au responsive – 100% mobile first responsive! We were excited to be using the new infrastructure built with node.js. I worked alongside our engineering excellence developer, Siyang Bi to create the ‘holy grail’ approach, as Airbnb calls it, it runs on both sides of the wire, serving up real HTML on first pageload, but then kicking off a client-side JavaScript app as users interacts with the app. This means we use the same template for both server side and client side. We did this with handlebar templates.

Write your own Register Helpers

A handy tip I got taught was to look at the built-in helpers for handlebars in the git and write your own based of theirs as a starting point.

Great Reads

Digging Angular

After diving into backbone last month, I thought it’s time to have a look at AngularJS. What’s the hype with AngularJS? Why is it a popular choice for large scale websites? I often ask people at meet-ups whether their company uses Backbone, Ember and/or Angular and quite a few people usually reply with ‘Angular’. My next question usually would be why they have decided to choose AngularJS and majority of the responses is that AngularJS is backed by Google and that there is a wider support and documentation.

AngularJS is considered a new paradigm for web development. Why? Well, here are some Angular vocabulary and examples to show you just how powerful Angular can be…

Directives

One of the first observations I made when I first started looking into Angular was the statement on the AngularJS website; “AngularJS is what HTML would have been” – that’s a pretty strong and bold statement! AngularJS allows you to ‘extend’ the HTML vocabulary. You can set your own ‘directives‘; custom attributes and elements.

<html ng-app="ngApp">

The ng-app attribute in the html tag above is an example of a directive which is used to auto-boostrap the application. This is commonly forgotten by beginners.

Data Binding

The two way data binding in Angular is extremely powerful and simple – it’s automatic synchronisation! When the model changes, so does the view.

<input type="text" ng-model="firstName" />
hi {{firstName}}!

Filters

AngularJS comes with many handy filters built-in. Filters allow you to manipulate and filter the presentation of your views. You can apply Angular filters directly by extending the bindings in your HTML views

{{ 12 | currency }}

The Code School “AngularJS Tutorial for Beginners” is also a great way to get an insight of what it’s like to code in Angular.

There are still lots to learn in AngularJS – will definitely write more as I dive deeper… stay tuned!

It takes time to ‘git’ it

At work, we have been transitioning our codebase from SVN to Github. With ten years of legacy, we thought it would be a lengthy process but with the right team of people, dedication and perseverance, it can be done and it’s not as overwhelming as you think!

If you’re new to Git, you can get some pretty handy tools like Atlassian’s SourceTree to help visualize your changes through an interface but if you’re like me, (trying to put my geek hat on here) and like to type in the Terminal, then the GitHub Help docs and Atlassian’s Git Basics (I truly recommend them!) may help you get started.

Some Quick Git Terminology

(The definitions below are taken from GitHub and Atlassian Git Tutorials)

  • Fork – A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.
  • Branch – A branch represents an independent line of development. Branches serve as an abstraction for the edit/stage/commit process. You can think of them as a way to request a brand new working directory, staging area, and project history. New commits are recorded in the history for the current branch, which results in a fork in the history of the project.

Quick Git Cheatsheat for Dummies

I find that these are the commands I tend to use most days… this is a guide to help get you started only ;p

  • git clone [github repo]
  • git add [your file(s)]
  • git commit -m “[your commit comments]”
  • git remote -v
  • git remote add upstream [github repo]
  • git push origin [branch name]
  • git pull upstream master

Some other useful Reads and Resources:

Girl Geek Sydney @ hipagesGroup – Networking, Talks and Ping Pong!

hipagesGroup is hosting Girl Geeks meetup this month! Come along for a night of lightning talks, activities, food, drinks, ping pong and geek challenge with amazing prizes up for grabs! Register now

prizes

I will be speaking again… ‘How to move away from 10 years of legacy code’. It will be a fantastic night…

My very first backbone app

At work, we thought we would try to integrate a mini backbone app into the main site. We chose to take the out log in status on the header into a backbone app.

So what is Backbone.js?

Backbone.js is a JavaScript frontend framework that provides structure for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface. Simply put, Backbone.js allows us to develop applications much easier and better (more scalable, reusable, and modular code).

What stood out to me straight away is the structure of setting up a Backbone app. As I have been writing php for some time, I am familiar with MVC structure and so I was immediately intrigued. There are many different ways you can design and make your own decisions with the architecture for your app in Backbone.js.

Great reads to get started

My first experience as a speaker

My 2 cents for speaking in front of a crowd…

For my 29th birthday this year, I tried something out of my comfort zone; speaking in front of a crowd… but not just any ordinary crowd, it was a bunch of people who shares the same passion as me. It was a great experience all round. At first it was nerve wrecking, the idea of sharing my experience and knowledge with people from the same industry. Many nights preparing, thinking about what to say, how to present and deliver my points across and then wondering whether people will be judgemental. At the end of the day, we are our own worst critic. It was exhilarating speaking up and realizing a lot of people have also gone through the same obstacles as me, understood where I was coming from and wanting to know about my journey.

Speaking at industry meetups are brilliant to share your ideas around. You may find that someone has already tackled a challenge you are experiencing and can give some valuable advice! Don’t be shy, I encourage all of you to try it 😉

Some photos of the night and my speech.

SydCSS - View from in front the crowd
SydCSS – View from in front the crowd

Grrrrrunt… I wish I met you earlier…

Thanks to my new manager, Chris Iona, we have put aside time to experiment with a new tech stack at hipagesGroup! All that time in the past few years spent on concatenating, obfuscating, minifying and versioning files along with slow and manual deployment processes… gee, I wish I have been introduced to Grrrrunt earlier! It may have taken some time for me to get on the band wagon, but it’s better to be late than never!

So what is Grunt?

Grunt is a Javascript Task Runner which helps you automate repetitive tasks and simplify chores. To experiment with Grunt, you will first need to get familiar with npm (node package manager) and node.js.

Here are some helpful links to help you get started:

I would personally recommend the following plugins:

My 2 cents on icon fonts

Craig, our UX Design Lead, recommended we transition to icon fonts last year and since then, my love for icon fonts just keeps growing! I could go on and on about the benefits of using icon fonts…

  • great for responsive web design and retina display
  • less maintenance on your sprite sheets
  • can all be controlled with CSS – colors, sizes, shadows

Get on the band wagon. Implement icon fonts onto your sites! Here are a few resources to help you get started:

Tips on implementation

  • Make sure your fonts are served from the same domain or enable CORS
  • Remember to version your font file in your CSS if you’ve added or modified your icon list
  • [My Fav] Use pseudo elements to stack multiple fonts (a.k.a stackicons) on top of one another
  • Convert SVGs into icon fonts in IcoMoon (click on Import)