User•Education, Pt. II
Continuing Education
After establishing the patterns & guidance for warm welcomes Google wide, we summarized our findings into 3 key points:
- Say hi and welcome first time users in a Googley way
Excite users about the experience ahead & help them understand what it means for them
Increase engagement and retention of 7 day active users
With that work completed, Material Design, Brand Marketing and I turned to a topic that we moved out of the warm welcomes; user education.
When to educate users
Working with user researchers, we realized first launch of an application is not the time to try to educate users. Armed with statistics and our recently updated guidance on warm welcomes, we immediately began to search for when the correct moment would occur.


~30% completion rate


~70% abandon at first step


User don’t recall what they see


Users want to get in and play, not read an instruction manual




Users aren’t ready for UI patterns we’re teaching; they haven’t even seen the UI
The first clue came from previous work the marketing team had done on app adoption rates with mobile web users. Google Maps was investigating ways to increase downloads of their app, and the answer came in the form of a relevant and timely promo, highlighting a feature the web version couldn't provide.
After the change was implemented, Google Maps saw a 35% increase in downloads, or roughly 700,000 additional downloads over 2.5 weeks.






Interruptive promos displayed to everyone loading the mobile site. 7-10% CTR
Promo displayed only to users who searched for directions. 15- 19% CTR
Educational Formats
Given the knowledge that these educational moments should be in context, we then identified 4 broad categories that would define how users would learn:
1. Tap Target
Prompting a user to try a feature that can be completed in a single tap.
E.G. Saving a place in Maps.
- Fullscreen scrims are too interruptive/heavy/blocking
- New, distinctive design positioned to mean helpful prompt in the user’s mind whenever they encounter it
- In-line UI (e.g. cards) feels the most native but often confused with real UI because cards have an informational meaning to users
- Tap targets focus attention on the UI element users need to interact with to take the action, so they learn by doing vs. cards that are disconnected from the required action


Outer circle spans full width of screen (on mobile)
Target highlights UI element requiring tap to take action being prompted
Outer circle uses apps primary color. Target is neutral and contrasting
Only primary action is tap, no ‘Got it’ button. Tapping outside or swiping dismisses


If action is part of a set, include the rest of the options, but scaled back to 24% opacity


Highlight action with contrasting color


Tap Target can be contained by dialogs or cards
2. Guided Flow
Prompting a user to try a feature that requires more than one interaction.
E.G. Adding home and work in Maps.
The initial prompt often doesn’t equip the user with enough guidance to complete the task
Testing shows series of steps help users complete the task
The design of steps after the initial tap target have been stripped down to accelerate task completion and be less intrusive
A “you’re done” bottom sheet at the end reinforces task completion and provides positive behavioral feedback
3. Sandbox UI, gesture indicator & hint motion
Prompting a user to perform a gesture that affects a portion of the screen.
E.G. Dismissing a card.
User can interact with the sandbox UI like they would real UI
Sandbox UI lets the user learn by doing without compromising real content
Gesture indicator and hint movement help visualize the motion we want users to take
Descriptive text in Sandbox UI helps clarify result from gesture being described
4. Snackbar, gesture indicator & hint motion
Prompting a user to perform a gesture that affects the whole screen.
E.G. Moving between tabs.
Full scrims are confusing because it’s unclear whether you are moving the scrim or the surface beneath it
Snackbar is a low profile component to explain gesture outcome
Gesture indicator and hint movement help visualize the motion we want users to take
Interaction affects real UI
User Testing & Iterative Design
Before settling on the four patterns, we reviewed previous work done on the topic by the Material team, and tested variations, aiming for a the sweet spot between being totally disruptive and so low key that users missed the prompts.








Iterations that move other elements out of the way, partially or fully occlude the interface behind.
Results showed that the circular design performed best. The unusual shape caught users eyes while giving hints as to pieces of the regularly rectangular UI’s behind the tap targets.












We extensively tested different locations and arrangements to stress test the circular design
Motion Design
Motion design became a critical element in this balance, drawing a users attention to a particular location, without obscuring the rest of the interface. Working closely with the lead Material motion designer, we iterated on length of time, animation curves, and ways to inform users through the direction of the motion:
The introductory animations showcase where the target lives, introducing the copy as support
After appearing, animation draws the eye back to the promoted action through subtle changes in size, as well as quick ripples, similar to material user feedback
Early concepts explored whether the tap target should expand or recede upon user interaction. Both directions ended up being used, for acceptance and dismissal, respectively
Collaboration & Continuing Work
After researching and iterating on our designs, we began speaking with product teams about how they were hoping to expand user education. While the technical implementation and logic for how and when to trigger these elements is still under development, responses have been positive from the search, maps, drive, analytics, keep and fit teams.












As we build out methods to A/B test education within live apps and track feature adoption rates, this case study will be updated.