ContentSquare - Survival Kit Campaign
ContentSquare - Survival Kit Campaign
How might we create a bold digital campaign to spread ContentSquare's mission?
ContentSquare - Survival Kit Campaign
Type of project
Responsive Web Site
My role
UI Designer / Project Manager
Paper, markers, Adobe Illustrator, Adobe Photoshop, Sketch, Invision App and Google Web Designer.
Web and Mobile UI, Digital Prototype, Assets for a marketing campaign.
Client / Owner
ContentSquare (

The Project

ContentSquare is a digital experience insights platform that helps businesses understand how and why users are interacting with their app, mobile, and websites, computing billions of touch and mouse movements, and transforming this knowledge into practical actions. For this campaign, we had a goal: how might we create a bold digital campaign to spread ContentSquare’s mission?

The Goals and Challenges

Create a digital campaign with a bold message, to spread ContentSquares mission. It has to be an interactive experience, that could give the user the sense of what ContentSquare analytics does.

1 – Understand the Message

Draft the main points of the campaign with stakeholders. Create a clear message to communicate the company’s goals. Gather enough data from the communication channels to spread it out.

The team was spread out in 2 continents: Creative Team in Rio de Janeiro, UX/UI, Content and Marketing and Stakeholders in New York, developers in Israel.

2 – Sketches & Wireframes

Sketch message flow and decide what type of environment we could create. We decided to go with “the jungle” because of the name of the campaign: Survival Kit.

First scroll:

Our Product:

What We Do:

Your Results:

Why Us:

Contact Us:

3 – Decide & Design

Converge the possibilities from phases 1 & 2, refine and explore the flows separately. Also, develop a design system, to integrate all findings with visual aspects.

Color palette:




Font Families:

Title: Trim Poster Compressed

Paragraph: Proxima Nova Light and SemiboldCompressed

Symbols & Support Elements:



To keep the jungle in the color palette, we created different shapes, different lightening and shadows.

High-end Visuals

Desktop: First Scroll Transition


Desktop – Second Scroll Transition, Who We Are:


Desktop – Third Scroll Transition, What We Do:


Desktop – Fourth Scroll Transition, What We Hate:


Desktop – Fith Scroll Transition, Why Us:


Desktop – Sixth Scroll Transition, Clients and Link with Digital Analytics Benchmark Report:

4 – Campaign Assets

Create assets based on the distribution channels specifications: Facebook Ads, Google Ads, LinkedIn, CS Blog Post.

5 – Development & Campaign Launch

The development was made using HTML5, CSS3, and JavaScript, creating the online experience for desktops an mobiles.

The campaign was launched during the Adobe Summit 2018, boosting the number of qualified leads for ContentSquare.

Click here to see the live page.

The Outcomes

ContentSquare was able to create a bold digital campaign to spread the company’s mission and launch it during a strong Summit for brand awareness. Because of the campaign strategy, ContentSquare’s booth at the Adobe Summit was a must-see sensation.