I designed Appcues' mobile tooltip system from the ground up, bringing the most requested onboarding pattern to mobile devices (not straightforward!). The phased approach addressed $60k in at-risk ARR and opened up new selling opportunities. Tooltips now make up 37% of all published mobile guide steps.
This is our popular web tooltip pattern which was expected on mobile
Our customers, usually product managers for mobile apps, had no way to guide new users or highlight specific features without taking over the whole screen. Competitors such as Pendo and Walkme offered this capability and customers expected it since Appcues had tooltips on web.
We were losing deals and risking churn because customers couldn't deliver contextual, non-intrusive guidance in their mobile apps.
I tested numerous iterations of iconography and nomenclature for
distinguishing the two tooltip patterns.
I conducted user interviews to understand tooltip expectations on mobile. Customers wanted to onboard new users and showcase features without full-screen takeovers.
The key insight: some customers expected floating tooltips which would be relatively positioned in a portion of the screen, while others wanted web-style anchored tooltips that attached to specific elements. Both had valid use cases, and some platforms couldn't support anchoring at all.
Floating tooltips: our first iteration allowed flexible placement on any
screen.
I designed a two-phase approach so that we could ship value faster while solving the technical challenges involved in supporting the expected HTML-element-esque targeting. Phase 1 delivered floating tooltips using relative positioning (percentage-based screen placement). This had a lower technical barrier and worked on all platforms.
Phase 2 tackled anchored tooltips, which required the engineering team to solve complex view hierarchy problems. Each phase delivered real value while building toward the complete solution.
A Figma prototype I built for usability testing of floating tooltips.
Floating tooltips used relative positioning based on screen percentages. I designed a styling system with highlights, backdrops, and feather effects to make tooltips visually distinct even without anchor points.
The challenge was making them useful without direct element connection. I ran ideation sessions with engineering to find the right balance of flexibility and simplicity.
For anchored tooltips, I designed a targeting system using familiar patterns from web development and our web tooltips. Elements got names analogous to CSS classes, making it intuitive for users already familiar with our web product.
I designed an end-to-end process for capturing screens and view hierarchies, finding targetable elements, and placing tooltips using our visual editor.
Floating tooltips shipped in H1 2023, followed by anchored in H2 2023. We addressed $60k in at-risk ARR immediately and unlocked new selling opportunities.
Tooltips now make up 37% of published mobile steps, showing massive adoption. Appcues customers love the ability to point out valuable features during onboarding or after updating their products. Over time, customers naturally shifted toward anchored tooltips as they discovered the benefits, validating our phased approach.
This project taught me the value of shipping iteratively when facing technical constraints. By delivering floating tooltips first, we got customer feedback and revenue protection while engineering solved harder problems.
The research insight that some customers preferred floating proved crucial. Both patterns still serve different use cases, and some platforms still require floating. Meeting users where they are, both technically and mentally, made this launch successful.