Aire at North Harbour
designing Google-approved interstitial ads to increase the clickthrough rate
Read about how I improved the clickthrough rate of the ads from 0.52% to 2.5% and helped achieve sales.
Concert Properties is one of the most reputable real estate developers in Vancouver, Canada. This was a digital ad campaign I designed for them.
Problem
Vancouver is flooded with real-estate marketing, and we need to create an interstitial ad that would make Aire at North Harbour stand out. We have observed that the interstitial ads, when designed and displayed improperly, could be intrusive and annoying which can generate negative emotional responses in users. How might we design the ad so that our customers find them memorable and engaging in a positive way?
Solution
I followed Google's best practices to create interactive interstitial ads that were engaging yet not annoying. As a result, our clickthrough rate of social media ads shot up from 0.52% to 2.5%.
Also, 3 months after it was released for sale, Aire nearly sold out with only 4 out of 103 homes remaining!
Team
1 UX designer
3 developers
1 project manager
1 media director
3 stakeholders from Concert
My Role
UX design
UX research
Storyboard
Mockup
Stakeholder Management
Timeline
Overall: 6 weeks
Discovery & Research: 3 weeks
Design & testing: 3 weeks
What is an interstitial ad?
Our client wanted to explore the interstitial ad format to stand out from their competitors.
Interstitials are interactive ad format on websites or apps, which many advertisers choose because:
They have better viewability.
They have better conversion rates.
They provide versatility in design.
I could see why our client wanted to give the interstitial ad a try. We needed to stand out like a unicorn in a field of horses, and interstitial ads were not typically employed by our competitors.
But this was a slippery slope.
The Problem with Interstitial Ads
Interstitial ads, when placed in the wrong place at the wrong time, could hamper the user experience. It can be as intrusive and annoying as listening to elevator music on repeat. Some users may be so annoyed that they even leave the website or uninstall the application. And to combat that, Google penalizes websites and apps that use intrusive ads on their platforms.
How could I create an interstitial ad that is engaging yet not interfering, memorable yet not frustrating, and also capture the exclusive quality of our client’s brand?
Research
While I was familiar with interstitials this was the first time I had to design them. In the beginning, I didn’t grasp the full potential of these interactive ads and what could or could not be coded. Before I could create something, I first had to get to know my tools. So came the chat with the developers at Native Touch. I asked for samples of their latest work to gather an understanding of the technological capacity.
The next step was good old-fashioned desk research to see what other real estate competitors have done. It was reconfirmed that our competitors were not using interactive ads. So instead I turned my attention to interstitials in general, to see what was currently out there.
Scope
Timeline: Aire at North Harbour was still years away from being built, but as is the case with most condo projects in Vancouver, it was planned to be available for sale along with the opening of the Presentation Centre. I created a workback schedule to decide on the release of the interstitials. Starting from the opening date of the Presentation Centre, I calculated when the interstitial would need to be finished. I also discussed the timeline with the developers at Native Touch to see when they would need my designs. This gave me 6 weeks for the entire design process.
KPIs: The existing social media ads for Aire were achieving around 0.52% clickthrough rate (CTR). It was an extremely low engagement, and we wanted to increase our CTR to 1% by the end of the advertising campaign.
Affinity Diagram
The product manager, clients, and I gathered to create an Affinity Diagram.
Personas
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 2 personas for each of our user segments. They were based on the census demographic data of North Vancouver, studying our competitors, and investigating the existing data available through Concert Properties.
Wireframes
Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by incorporating the CTA and renderings that performed well in previous A/B testings. At this stage, the wireframes were defined enough for some user testing.
Usability Testing
The development team at Native Touch created a fully-functional, high-fidelity prototype based on my wireframes. At the same time, we started recruiting subjects for the test who fit our criteria. We invited 10 participants who were on the Aire at North Harbour's mailing list. They were offered first appointment spots with the sales team once the presentation centre opened. During the testing we found the following issues. I’ve made a few alternations and moved on to creating the final design.
Issue 01 // Accidental Clicks
The full-scale rendering within the interstitial was causing accidental clicks that caused frustrations for users. 7 out of 10 participants had this issue and verbally expressed their annoyance.
Solution 01 // Reducing Clickable Area
I reduced the clickable area to minimize accidental clicks that exasperated the users. The renderings were edited to no longer be clickable. After the redesign, the users could only interact with the CTA button, the exit button, and the gallery thumbnails.
Issue 02 // Lack of Context
The focus of the initial design was to show the beautiful architecture of Aire. However, half of the participants were unclear about what the interstitial was selling.
Issue 02 // Clarifying the Product Offering
The size of the rendering was reduced to make space for the headline and copy. This gave more information about what the interstitial was advertising. Text was chosen from ads that performed well in previous A/B testing.
Issue 03 // Lack of Clarity
While the interstitial was meant to be an interactive photo gallery, 3 of the participants did not know that they could tap on the gallery thumbnails to view different images.
Issue 03 // Law of Feedback
I added a simple animation to the thumbnails to draw attention to them, and to indicate which image was currently active.
Final Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that encapsulated the brand’s elevated minimalism.
Learnings
I learned a lot about the potential and best practices of the interstitial ad format. Furthermore, sharing my findings with stakeholders and team members, who were unfamiliar with interstitials, helped me improve my presentation and communication skills.
This project also taught me how to effectively use time. Not only did I need to create and test the design with users, but I also needed to hand off the design to the developers to ensure that the end product would be ready in time.