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
Tools
Paper, markers, Adobe Illustrator, Adobe Photoshop, Sketch, Invision App and Google Web Designer.
Deliverables
Web and Mobile UI, Digital Prototype, Assets for a marketing campaign.
Client / Owner
ContentSquare (www.contentsquare.com)
Year
2018

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:

Primary:

Secondary:

Typography:

Font Families:

Title: Trim Poster Compressed

Paragraph: Proxima Nova Light and SemiboldCompressed

Symbols & Support Elements:

Buttons:

Leaves:

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.