Custom Boards for a Marketing Automation SaaS tool

User Interview | Task flow creation | Prototyping and Wire-framing | Style Guide Creation | Visual Design | Prototyping

Problem Statement

CleverTap users need a space to group, save, view queries which will enable them to spot trends and patterns in their data by changing date range directly within the space and be able to easily collaborate and share with different members of the team without wasting any time.

1. How did we identify this problem
We conducted a surveys of around 250 users from our top clients and asked them a fair few questions. Some of them are listed below

1. What is your role in your organisation?

2. How often do you visit Clevertap?

3. Could you elaborate the tasks you perform when you visit CleverTap?

4. Which feature(s) do you use the most in Clevertap?

5. What is the feature you use on a regular basis, like the most and why?

6. What is the one thing we at CleverTap should change to make you day to day interaction with our product seamless?

7. What do you like the most of the CleverTap product?

Of the 250 users we sent the survey to, around

• 65% (150)were campaign managers

• 25% were marketing managers

• 7% (18) were CEOs or Head of Marketing

• 3% were product managers

Almost 80% ie 120 campaign managers has similar replies to 3 questions

1. What is the feature you use on a regular basis, like the most and why?
   Ans 1:
   Bookmarks, because I have to create daily, weekly and monthly reports and bookmarks enable me to save my query.
   Ans 2:
   The query builder. It has so many features that I can slice and dice campaign related data to gather insights that I then share with the team by downloading the pdf.
   

2. What is the one thing we at CleverTap should change to make you day to day interaction with our dashboard seamless?
   Ans 1:
   The time taken to render the query after I click on bookmarks
   Ans 2:
   Can you make the pdf download a bit faster. it is nerve racking to wait for CleverTap to complete the process and send me a mail. I sometimes miss this mail and then have to go digging my inbox find it and mail it to the team involved.
   Ans 3:
   Need a way to save my queries in one place, group them by campaigns and then slice and dice them on some filters like time etc.

We sent out a follow up questionnaire to these Campaign Managers as we could see a certain pain point regarding querying data and saving and then reviewing it.

2. Learnings from the survey
From this Survey we learnt the following:

1. Users used the query builder often but found the time taken from rendering the query, analysing it, then downloading it, then having it mailed and then sending it to their colleagues was a lot and cumbersome.

2. Users liked bookmarks as a feature but bookmarks was just a list of query URLS. It was not accessible visually, they could not compare the queries in bookmarks over time. Campaign managers generally created large number of queries that they grouped and stored in an excel sheet.

3. Identified the Jobs-to-be-done
Post this I wrote down the what a user will achieve after the launch of this project.

• A user will get a snapshot of the metrics important to him/her by bringing them into a single board. They will have quick access to view key metrics of campaigns/segments/analytics.

• A CleverTap user will save time digging into multiple reports in order to present data during team meetings and other team collaborations.

• As a CleverTap user he/she can quickly compare metrics in a single view and prioritise engagement metrics that affect their marketing strategy.

• As a CleverTap user they can spot trends and patterns in their data by changing date range directly within the Custom board screen.

• As a CleverTap user he/she can define who sees a board that is created by granting access to everyone in their organisation or limiting it to a few people or for private viewing.

4. Feature Doc
Post this I created created a feature doc that contained the Problem statement, Solution, Comepetitor research, Design Iterations.

For the V1 release of Custom boards I also noted the minimum viable features that would be picked by design and development teams

The work on competitor research doc helped our sales team leverage and up-sell this feature to our potential paying customers.

5. Redefining the Clevertap user flow
Redefining the Clevertap user flow was a challenge from a customer as well as engineering stand point.

For the customers the first page after they landed in the CleverTap product was a set of 4 system defined boards which were not very useful for the users. We were about to change this and make the user land on his or her desired custom board. This would mean that after the feature was launched when the user logged in to CleverTap they would now see a “no data page”. Until the creation and pinning of the first custom board. This was going to be the first roadblock

For the engineering team this meant restructuring the backend completely as once the user had defined his custom board the team had to fetch the different metric. Hence we involved them at this stage of the feature design. Their feedback helped shape the user flow as seen below.

6. Paper prototype for Custom Boards
After agreeing on our user flow we moved on to the paper prototyping stage. We created almost 10 - 15 variations of the design and exhibited it to some of customers and team members for feedback. After testing these layouts we arrived at one layout that worked for our customers the best.

7. Visual Design Phase - 1
After finalising the paper prototype we moved on to creating the visual design with the existing style guide.
The result is as shown below.

8. Style guide creation
When we as a team saw the result of the existing visual design style guide on the custom boards project we were not impressed and in awe of the output. After a lot of deliberation and design iterations we still could not achieve the impressive visual aspect of the page.

This is when we decided with the consent of the front end engineering team that we needed to re-haul the visual appeal of the dashboard as we were already restructuring the backend to support CT boards feature. Along with the style guide we came up with the component library that would make future designs consistent and also make development easier and less time consuming

You can see some style guide screens below.

9. Visual Design Phase - 2

The visual design 2 was following a new style guide created by our team. Using the new components I now created the visual design for the launch of our MVP. This had the bare minimum features that would make this feature usable for our customers.

Some of the designs are as below

10. Outcome:
Using tools like Hotjar for video recording user sessions , CleverTap events and Google Analytics page visit analytics we observed the users and found that the users found it easy to access and save important metrics to dashboards. Users ended up saving time by not having to run queries to find data points.

The Campaign Managers has managed to save 6.4x time on their routine tasks by creating and saving their metrics on the Custom boards. Also this enabled us to deprecate out bookmarks feature over time as the usage of bookmarks went down by almost 89% users over 3 months after launch of custom boards :) .

My Contribution:

1. Task flow creation

2. Prototyping and Wire-framing

3. Style Guide Creation

4. Visual Design

5. Prototyping

6. Asset generation and post design engineering support

What I would like to change about the process:

• Talk to and observe more users in the problem definition stage to refine the problem

• Iterate with prototypes more and get user feedback earlier.

• Slice down the scope more in and have smaller release to reveal obvious design flaws/adoption or discovery issues

Duration of project : 12 weeks