April 24, 2024

How to Use Coachmarks and Spotlight UI in Mobile Apps

Let's dive deep into the world of mobile app coachmarks and spotlights and unveil their various applications.

Ananya Vairavarajan

In the dynamic world of mobile app design, creating an engaging and intuitive user experience is key to capturing and retaining users' attention. The use of coachmarks and spotlights is one such way to ensure that.

These visual cues help in highlighting important features and functionalities and also provide contextual information, enabling users to discover the app's full potential.

What are coachmarks?

Coachmark is a dynamic in-app nudge that draws the user's attention and directs them to a certain feature or section, typically pointing toward the corner of the app (but the position can also be customized).

It is used to highlight certain sections while dimming other sections so the highlighted section stands out. They are position-based nudges, i.e. you need to specify the element (button) location, page, etc.

A coachmark template
A coachmark template

What are spotlights?

A spotlight UI is also a dynamic in-app nudge that can be used to highlight or introduce new features. They offer a CTA which can be directly used to redirect the user to another page.

The figure below shows a spotlight pointing up. It can also be customized to point down, right, or left based on the use case scenario.

A spotlight template
A spotlight template

Why are coachmarks and spotlights important?

They play a crucial role in enhancing the user experience within mobile apps. Here are some reasons why they are important:

  1. User onboarding: They act as visual guides, providing step-by-step instructions for new app users, making the onboarding process smooth and intuitive.
  2. Feature discovery: They draw attention to hidden app functionalities, ensuring users discover important elements and explore the app's capabilities.
  3. Contextual guidance: Timely and relevant coachmarks and spotlights offer context-specific information, helping users understand app elements and make informed decisions.

Mobile app coachmarks: Inspiring examples

Netflix, a leading streaming platform, effectively utilizes a coachmark to introduce users to its "downloads" feature. By using this coachmark, Netflix ensures that users quickly grasp the benefits of the downloads feature and encourages them to make the most of their streaming experience by enjoying content offline.

Netflix uses a coachmark nudge to introduce "Download" features
Netflix uses a coachmark nudge to introduce "Download" features

When Google introduced an innovative feature aimed at keeping users informed about global events and news in real-time, they highlighted that feature using a coachmark as soon as they land on the Google feed page.

Google uses a coachmark nudge to introduce new features
Google uses a coachmark nudge to introduce new features

Flipkart uses a coachmark to introduce its new users to the core functionality as the user goes through making a purchase for the first time. By highlighting these core features, it would lead to quick activation and subsequently a long-term retention.

Flipkart uses a coachmark to show its new users with core features
Flipkart uses a coachmark to show its new users with core features

FordPass app uses a coachmark highlighting the ‘Find’ feature when new users first open the app. This is designed to bring all Ford owners added value of easy discovery and navigation.

FordPass uses a coachmark nudge to show "Find" feature
FordPass uses a coachmark nudge to show "Find" feature

Mobile app spotlights: Inspiring examples

AliExpress, a leading online retailer, introduced an app feature, allowing users to search for products using image recognition technology. They made this discoverable to users using a spotlight UI.

AliExpress's spotlight to make their users discover the new feature
AliExpress's spotlight

Jar use spotlights provided by Plotline to introduce users to their newly launched feature, GoldX to improve the adoption of the feature and completing the respective action.

Jar uses a spotlight to highlight GoldX
Jar's spotlight to launch GoldX

Challenges faced while creating coachmarks and spotlights

Your developers are busy building the core of your mobile app and may not have the bandwidth to continually add coachmarks and spotlights.

Additionally, each experiment with these features can take up to a month to complete, including development, app release, and analysis. This meticulous process is necessary to accurately measure the effectiveness of each of the in-app nudge in achieving the desired outcome.

Plotline enables creation of coachmarks, spotlights, and other in-app nudges, fully no-code

Plotline helps product and marketing teams in high-growth consumer companies create and deploy coachmarks and spotlights that match your design theme. It also provides powerful event-based targeting and user segmentation to help the right user take the right action at the right time.

Apart from coachmarks and spotlights, Plotline enables you to design tooltips, stories, PiP videos, and many different in-app nudges that catch users' attention and lead them to take desired actions.

In case you want to deploy coachmarks and spotlights in your mobile app, start your free trial with us.

Sign up for our newsletter
Sign up for our newsletter

Improve funnel metrics with Plotline

Join companies like ShareChat, Meesho, Jupiter, Jar, Khatabook and others that use Plotline to run in-app engagement and boost activation, retention and monetization.

Thanks for your faith in us! We will reach out to you shortly :D
Oops! Something went wrong. Would you mind trying again?