Published on | Prototyping: From UX to Front End — Medium Shir Zalzberg

A few weeks ago I attended a design event about analytics.
I arrived late and the only available spot was exactly behind a pillar that blocked the view of the stage. So lesson A — arrive on time.

Usually when I arrive to lectures I listen to about 60% of what’s being said, but this time I sat there like an old lady in a bingo contest, trying my best to soak it all in. Analytics are a major part of my day to day work, so I was intrigued by how can you make analytics approachable to a crowed of designer, where do you start?. I left that lecture with a neck pain (from sitting behind the pillar) and an idea for a new post about analytics for designer. so…YAY! Let’s get started.

<a href="https://medium.com/media/0f8cfbdcc780d0a77b2c4365ff3d0ff4/href">https://medium.com/media/0f8cfbdcc780d0a77b2c4365ff3d0ff4/href</a>

What are analytics exactly?

״Analytics is the discovery, interpretation, and communication of meaningful patterns in data.״
I’ll assume that the majority of you have already heard about the term “analytics” in some shape or form. Analytics are tests we conduct on our product and about the behaviour of our users. After running the test, we go through our hard earned data in search of patterns.
Armed with this knowledge, we can create a better experience and product for our users. What could this test be? We can check how many users entered a page in our app or site, we can check how many of them pressed a certain button, how long have they stayed in the site and many more question just like that.

Cool… Why do we care about this? (that’s what you say at this point)

Think about the opportunity to know if the decision you got was a good decision, think about how much you could learn from that. Analytics give you direct feedback from your users, without them even knowing it. thats incredible. We use analytics to check how our users respond to the design does it work well? If not, why?

With analytics on your side, bad decisions can now have good outcomes — If you made a mistake you now have the tools to learn from it, and move forward with a better decision making system. This does require a change of perspective. The process becomes dynamic and nonlinear, and our work as designers becomes much more ongoing and less ad hoc. The understanding that this is all part of a dynamic process that keep on improving is a change of perspective but a very positive change. The majority of companies in the world today conduct analytics in some way or another.Getting familiar with analytics will help you understand what it’s all about and it will allow you to have a common language in your workplace.

OK, how should I get started? (again, this is you talking)

There are plenty of analytics tools and each company usually picks the tools that works best for their needs, based on information such as: price, amount of work in the setup process and the company’s key performance indicators (What measurable data can we retrieve using those tools, such as amount of signups for the product for example).
Today I want to tell you about 4 different and very known tools. I chose those 4 tools because I think they are great for beginners in the field of analytics, they are easy to use and great for designers needs.

I should say there are A LOT of analytics tools and many of them are awesome, so feel free to write me recommendations of your own in the comments ;). The tools I picked are: google analytics, optimizely, unbounce and hotjar. If this article is getting to long for you, just search the td;lr at the end of each tool.

Google analytics (rules!)

If you’ll know how to use google analytics you’ll probably be able to handle the majority of all the other tools, because the terminology and principles are usually based on those google analytics set out. Google analytics is the most complicated tool out of the 4 I’m about to introduce today. It’s important to understand that you really don’t need to be familiar with everything you can check using google analytics (seriously, I would doubt even google are aware to all the information available in google analytics) in most cases you would probably use just the most common tests. Google divide their test into three categories: audience, acquisition and behavior.

Audience: under this category we will find all the information about our users. Information such as geographic location, what languages our users speak and which device they use. You can also learn additional information on your users such as gender and age.

Learning about your users will help you design features that match their needs. If a big part of your users are Spanish speakers for example, you could create a spanish version of your site to make it more approachable for them.

Acquisition: This category is all about where your users are coming from, or which nurture streams pulled them in. Did they come through your mailing list? Was it something they Googled? Maybe they saw your ad on Facebook? This information is vital for understanding which nurture streams work and which don’t. As designers, Acquisitions teaches us where to improve. If for example we see that a small amount of users came through facebook, we can work on different variations for our banners to see which version brings better results.

Behavior: This category is all about user behavior:
-Page views — how many times a certain page has been viewed.
-Unique page views — How many users watched a certain page (a user can watch the same page multiple times, this is why unique page views will always be a lower number than page views).
-Avg. time on the page — the average time users stayed on a certain page.
-Bounce rate — the amount of users who left a page without having any interaction in it (like scroll or a click).

Reviewing your user’s behaviour will help get a better insight into the usability of your product \ website, and make the necessary changes to make it work better. For example, if an important page gets very little pageviews, maybe it’s time to create more links that will direct users to that page.

Hopefully now you have more grasp of what Google Analytics can give you, but as I mentioned before, it can also prove a little tricky at first.

Lucky for us, one of the biggest advantages with Google Analytics is the excellent onboarding experience Google has created for it. Google prepared a short and free learning program that explains how to use Google Analytics. Even if eventually you’re planning to use another tool, I would still recommend you give those videos and look because many of the features in Google Analytics are also available in other tools, and work fairly the same. https://analytics.google.com/analytics/academy/

Tl;dr — Contains all the basic terminology you should know. Busy but you’ll get used to it (did anyone say photoshop?), free, no need to know how to code, recommended to start with. https://analytics.google.com/

Optimizely

Optimizely is one of the best tools for a/b testing. But first, what’s an A/B test?In an a/b test we create two versions of the same page and check which performs better. It’s recommended that the difference between the two versions will only be one thing, in order to really understand if that change is what caused the results. The change can be a change in the color of a button, a change in copy, changing an image on the page, or any other change you feel it’s worth exploring. Once we decided what’s the change we want to test we create two versions of the same page, a version before the change and a version after the change.. 50% percent of the users will watch the earlier version and 50% will watch the version after the change. Once enough time had passed and enough users had watched the two versions, we check the results to see if the change was beneficial and if so we make it permanent.

With Optimizely you can create and edit a/b tests without using code. You can change color, copy, move elements, create adaptation for responsive screens and you can do it all “live” from the browser itself. Once you applied the changes and started the A/B test, you’ll be able to see real time data about the behaviour of users in the page you’re testing, and you’ll get analysis of how much those results are reliable (depending on the amount of users who watched the pages).

When creating a new A\B test, you can also define as specific set of goals- Maybe you want to check how many times a specific button was clicked? Maybe this test is about reaching a different page? You can also define a number of goals.

Optimizely offers many types of goals that you can use, but if you wish to create a new type of goal that isn’t available you can always enlist the help of your fellow developers and create goals with JavaScript.In the end of the day, Optimizely is very easy to use, and most of the times no coding will be needed. The First month is free, and after that you can find payed plans depending on your company’s needs.

Tl;dr — an A/B test tool, very easy and simple to use, no need to know how to code
www.optimizely.com

Unbounce

A moment of honesty-I hated unbounce when I started using it.
Unbounce is a web based tool for designing landing pages. You can work with existing templates, or create landing pages from scratch. Once your landing page is ready you can set it to “live”, and all of this without a single line of code. Just like that. The Unbounce editor can also create mobile version just as easily. Remember talking about A/B testing? Unbounce helps you with that as well. You can create several variants for every landing page, and even define the percentage of users that land in each variant.

Each Landing page (and its variants) will have stats on how many users landed on it, how many views it got (usually there will be more views than users because one user can watch the page more than once) and even define specific goals (like how many times a button was clicked…).
Another great feature Unbounce offers is targeting — you can customize the landing page to the user watching it. For example, if a user is from a spanish speaking country, you can send him to a Spanish variant. The targeting abilities can get quite complex and offer a wide range of options I won’t get into it right now, but if managing campaigns is apart of your work routine — I’m sure this feature will give you goose bumps.

Sound amazing right? So why did I hate Unbounce? Keep in mind, this is a landing page creation platform, not websites, just landing pages. A download page for you latest E-book, a signup page for a webinar, a specific campaign you’re running etc… The Unbounce platform is very simple, and you shouldn’t expect complex features when using it.

If you ever created “live” designs with more complex tool, you might feel like I first did — Unbounce’s simplicity can be frustrating, and reaching the exact design you want can be tricky at times. But, spoiler alert! Once you get used it, and learn how to think a little bit “out of the box”, you’ll be able to create just about anything you want. To end my unbounce saga on a high note, today this is one of my favourite tools. One of my favorite work routines is to check each morning if the variant I like has done a better job than the variant our vp marketing prefers (sadly, his variant always wins over mine).

TL;DR — A simple landing page creator for both desktop and mobile, without a single line of code. It also allows you to create different variants of the same page and A/B test them.

https://unbounce.com/

Hotjar

OMG, I just love the look and feel of Hotjar. As a designer, I can’t help but appreciate the clear and visual way hotjar shows us data. When I think of Hotjar I imagine a conversation between two team members. One will say “ok ok, so what doesn’t google analytics do?” after hearing the list he will say “great, we will do it all.” So what are those great features available with hotjar?

Heat and scroll maps — These are two fundamental tools for understanding user behavior, especially when you have to deal with thousands of users.

With Heat Maps, we can see where users click, and how many times. How do you see that? With color! The “warmer” color the more clicked that spot received. The colors vary from blue to red. Heat Map truly are a great tool, think on a scenario for example, where you have a static element on your page, but your Heat Map shows that many users are trying to click it, thinking it’s clickable. Scroll Maps display scrolling patterns through our pages, and show how much each area of the page has been viewed by users. For example, think of a page with important content in the middle of it. Checking the Scroll Map reveals the majority of the users don’t see it because they didn’t even scroll that far.

Recordings — As the name implies, these are actual recordings of user sessions as they scroll through your page. This is a simpler way to do what some of you might know from very expensive user tests. In the recordings you can view each mouse movement, click and type over the page. This is a great tool for situations you’re afraid users are not noticing an element on the screen or don’t understand how to use something. Recording will show you exactly how users behave on your page, and help you reach critical conclusions regarding the User Experience you’re trying to create.

Form analytics — Probably my favourite feature, and if you have Forms you need to work on, you might agree with me :). The Form Analytics shows how users interact with your forms. You can see general data such as how many users filled the form successfully and how many users bounced without any interaction. You can also view more specific data about each individual field — how long does it take a user to fill it, how many users came back to this field after they were finished with it, how many users didn’t fill that field and how many users left the page while they where on this specific field.You won’t believe how much information you can gather from just one form, so if you have a form you want to test — this is the best tool in my opinion.

Funnels — Follow an entire user journey from point A to point B, according to the points you set. Let’s say you want to see what your users go through between the homepage and the purchase page. Which pages do they visit along the way? Which pages did they visit and left immediately? How many user did that journey?

All this information is available through the Funnels, and it gives us a great insight into the decisions of our users. BTW, funnels are also available with google analytics, but they just look SO good in hotjar.

–

Those were the main features hotjar has. Hotjar has a free version (!) so I really recommend on downloading it and playing around with it. It’s an easy to use tool, beautifully designed and simple to implement. It’s important to mention that Hotjar gives us sampled information. The advantage of sampling is that it almost doesn’t create any load on your site, but the disadvantage is that you’ll never be able to see specific numbers.

Tl;dr — Has a basic free version, offers a lot of great features missing from google analytics. Easy to use and implement but you should ask for the assistance of a developer.

https://www.hotjar.com/

Yes, we have reached the end of the article.

<a href="https://medium.com/media/5a49956f32d977fe1cded0ca787b07a8/href">https://medium.com/media/5a49956f32d977fe1cded0ca787b07a8/href</a>

If you stuck through, I hope you’ve realised analytics are not as complicated as you might have first thought. Analytics are the way us to become decision makers as designer. Instead of talking about the design in the terms of “pretty”, the conversation moves to “does it work? How do the users respond to it?”. When we work this way, we create better, more user friendly products. We just need to learn to listen to the users.

Thanks, and long live the data!

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Don’t be afraid of data: A beginners guide to analytics for designers (YES!) was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Don’t be afraid of data: A beginners guide to analytics for designers (YES!)

Cool stuff, every week

More Articles