InSite
InSite
ClickTale
Data analytics Desktop App
Product Overview
Clicktale is a SaaS, cloud-based analytics system that allows customers to visualize their visitor's experience on their website. Clicktale has tools like heatmaps, funnels, form analytics, visitor recordings and the Experience studio, a querying tool, to help understand visitor behavior.
Pageset Re-design
The mission
My first task when I joined Clicktale was to perform a complete “Face-lifting” and implement a unified design system.
Together with the product team and the R&D, we decided to start with one of the most important screens in the app - The Pageset.
​
The Pageset, a form of a highly customizable product dashboard (including product insights, KPI’s and relevant actions), was dated and inusable.
​
Research
In usability tests and user interviews, we realized that there were several main pain points for our users:
​​
-
Trends were not used and clutter the screen
-
Main buttons were overlooked by users
-
the layout wasn't clear and not responsive (didn't support low resolution)
The challenge
The main challenges were two:
​​
-
Having the facelifting of The Pageset done on a live working system.
-
Solving the UX issues through the UI while avoiding major changes to the layout. (as required by R&D)
​
Solution
We took the following actions:​
​
-
Removing trends as we saw they are not used and just clutter the screen
-
Making the heatmap and recordings buttons more dominant as we saw people miss them
-
Putting the page components in cards to get a clearer layout
-
Changing the design of the "Experience metrics" to accommodate a larger amount of metric
-
Fix the code to be responsive and support low resolution
Old design
Removed trends
Removed trends
Icons got clearer
Made icons more dominant
Added boxes for clearer layout
New design
Part of the complete design system I created & implemented
Sandbox Heatmap
The Problem
Clicktale’s platform required to set up a workspace prior to being able to generate heatmaps, a lengthy process that many customers found too cumbersome for day-to-day work.
One of Clicktale’s largest customers requested to be able to generate heatmaps ad hoc, without any prior setup.
​
​The account team needed to present a visual design to the decision maker to convince them of our commitment to developing the feature.
The Process
​
Due to the tight time frame for the presentation, a War Room was set up together with product managers and marketers to brainstorm and sketch initial mockups of a new heatmap solution.
​
Once we got “green light” we moved on to detailed design.
Main challenges
In the Heatmap tool (not like other tools in the system like “Recording” or “Funnels”) the customers need to be able to compare between two maps.
Example Use case 1:
A user wants to compare two heatmaps for a specific page while filtering comparing visitors who performed the action “clicked add to cart” to those who did not.
​
Example Use case 2:
A user wants to compare two versions of an A/B test, and filter each version by a different population of visitors (e.g. “logged in users” vs. “not logged in users”).
This feature challenged us with the overall platform layout in terms of horizontal space as our solution needed to work for tools both with and without a side-by-side comparison option.
Another challenge was to come up with a solution which enables complex filtering capabilities and at the same time blends with the design’s look and feel without attracting too much attention or taking up too much space.
​
War Room
We set up a special "War Room" and worked together with the product managers and marketing to come out with a concept that then was presented to the customer
High level mockups
Solution
We created the “Filter Bar” and a guide for all the different use cases:
​
-
Single heatmap vs. side-by-side heatmaps
-
Height of the filter bar (one row by default, can expand to two rows if needed)
-
Maximum “Pill” (filter) width
-
Defining different behaviors for different types of filters (some filters may be both be edited and removed while others can be edited only)
-
Defining edge cases (e.g. the user added more filters than the two rows can contain)
Usability tests
Just before development, we conducted a usability test to validate the design.
Several changes were made “On the fly”.
We invited 10 participants (testers) from a variety of positions (Analyst, marketing, Customer success manager)
we then summarized all the answers in one excel doc and gave each task a score:
​
​
Here is an example of how the filter bar appears in the different tools
Clicktale Player
The Problem
The “Player” is one of the fundamental tools of the product.
It allows our customers to view visitor playbacks and to understand how users interact with their content.
​
User interviews revealed a few pain points we wanted to address:
-
Customers wanted to easily identify “friction” in their user’s visit, directly in the player.
-
The player was too large and overbearing on the page
The Solution
​
​
Phase 1
we reduced the size of the player to a bare minimum (with an additional level of minimization when scrolling). We also moved the player to the bottom of the page to maximize the viewing area.
​
Phase 2
We addressed the need to monitor, identify and categorize important events (high friction) in the recording. We added an easily accessible list of events and marked those events directly on the player timeline.
​
Old version
New version
Minimized view
(while scrolling)
1st option:
Light Version
Match the brand better
2nd option:
Dark Version
Better contrast with the recording
Answering users’ needs with inline indications
