Helping clients to generate Leads through Pop-ups at RD Station

August, 2016

Case popup 1 f18dffb4e9ec3425270ef75ea42d764ec34ad2601d6f90d469399ce18693212d
Part of the final solution - First screen to create a new Pop-up


Product Designer


Pop-up is a RD Station Marketing tool. It's a feature that generates Leads (prospects) through a form inside client's website.


One of the biggest problem in any SAAS (software as a service) product is Churn - clients asking to cancel company's service. At RD Station Marketing is no different, being top priority in 2016. A study about the Lead Indicators behind this metric showed that one of the strongest correlations was the number of Leads generated by the client.

Design Process

I was part of the squad responsible to build Lead Generation tools. We had a huge challenge to revert Churn metric through a software solution. The Product Manager gave the first step, studying conversion points and it's gains. After the study, we made a MVP (Minimum Viable Product) to test a solution hypotheses: Pop-ups. We applied a hard-coded Pop-up inside a sample of customer's website. Given the success, we decided to go on with this feature inside RD Station Marketing.

The Design Process started defining the Persona and it's Journey through Lead Generation. I reunited the squad (multidisciplinary team) responsible to build the tool, to co-create the Design Principles behind the solution. For more details, check this Medium post.

Case popup 2 f1bcde1fe3c3ca108a3ef8ab7230a98b9d1c2578270e94f8cf5d6cb947b86899
Design Principles Workshop - Developer filling Empathy Map

The goal of Design Principles Workshop was to show Pop-up's value to developers, who saw Lead Generation problem behind user's lenses. Before the Workshop, developers were contrary to the solution, as they thought Pop-up was too intrusive for them.

At the end of the Workshop, we had a brainstorm session to list possible features that fit with the Persona's need. We defined the ROI of each feature e prioritized, creating 10 Waves of Launch. The process was based on Lean Inception, by Paulo Caroli.

Following the First Wave of Launch, I started to draw the flow with the Quality Analyst.

Case popup 3 ab7c50b0c1c5b38e59624cf19bb3c28bf92edd28fe7d0253d1524480acea9694
First wave flow

After that, I built a high fidelity prototype in HTML/CSS using Tangram Design System. At the end of the design process I validated the interface with users. The whole process - from the prototype to results - took only one week.


The solutions consists on a Pop-up editor, where the user can create and manage their website Pop-ups.

Case popup 4 3f651df073cb3c5107b68ced80aed0eabdbb1a74850e0024c597d4c564c93750
Pop-up edit screen

After the Second Wave of Launch, the user was capable to customize text, styles and even select the pages where the Pop-up would appear. At the end, the user could publish, create and remove Pop-ups.

Case popup 5 45f7f0b4ff253aa7455fa8f7c514caead8d543e88f70932c19eee56e0c2d4a57
Pop-up contextual publication screens

Lessons Learned

The first step of any project should be to align all features, vision and objective of the product with the team, including Devs and Quality Analysts. The Design Inception helped to clarify everything about the solution. The feedback were positives and the team got motivated.