User•Education

Let's start from the beginning:

Material design is an evolving, expanding spec. What started as a conceptual design incubated by a small group of designers has become the design language of Google, company wide.

My work on Device Assist included educating and informing users.
The Brand Marketing team had just defined a set of rules for product teams on frequency and intent of marketing emails. 
Youtube ran an experiment and accidentally sent a notification to over 25 million users.

With these events, the Material Design team, Brand Studio (lead by Dan Vallejo) and I began drafting a Spec article on User Education. We divided the guidance into two articles, covering first the out-of-box-experience, and then ongoing education.

Below, I've excerpted some of the thinking, & key pieces of my work from the first article:

patterns_usereducation_01_TimelineEdupatterns_usereducation_01_TimelineEdu

Week One Education Overview

 

Before drafting a single keystroke in the article, we reviewed Brand Studio's findings with their newly-implemented marketing email guidance. We discussed previous studies pertaining to tips, education and support content with UX researchers from the Consumer Operations team. We dug up previous sprints on warm welcomes held by the Material Design team.

We also agreed that rather than just providing a visual spec, we would describe a matrix of options that would allow the various product teams across Google to tune their onboarding experiences to their product and their customers.

From this research, we affirmed some assumptions that had been previously made, and defined what our onboarding hoped to achieve.

A warm welcome should take into account that the user:

  • has already downloaded the app and doesn’t need to be marketed to
  • is eager to open the app and get started, instead of reading an instruction manual
  • hasn’t seen the UI yet, so isn’t ready to learn about it
     

Primary objectives:

  1. Say “hi” and welcome first time users in a Googley way
  2. Excite users about the experience ahead and help them understand what it means for them
  3. Increase engagement and retention of 7-day actives (accomplished in conjunction with UI)

"

User education should happen over time and as the user needs it. It shouldn’t be crammed into the first moments a user has with an app or whenever an app announces a new feature. It’s smart and contextual, helping users better complete the action they’re taking without getting in the way.
 

"

"

An app’s warm welcome is a virtual unboxing experience: it should be brief and enhance the owner’s use of the product.
 

"

edu-timeline_2edu-timeline_2

Our research also identified two clear directions for user onboarding, which we termed "top user benefits", and "self select".

For products centered around consumption of content or filtering such as Play Books or Inbox, the self select pattern allows users to tailor what they'll see and how they interact with the product. By configuring these options at first launch, users become invested in the experience, and analytics show they are more likely to come back.

For products where this model doesn't fit, we refined the existing pattern, focusing on benefits rather than features, reducing the number of screens, and allowing the user to jump into the app at any point.

We also provided guidance in cases where the decision is not so clear cut:

1. Top User Benefits

A brief autoplay carousel/animatic highlighting up to three of the primary benefits users derive from using the app.

2. Self-select

Display choices a user can make to customize their experience.

  • Your app is tackling a new challenge or providing a new kind of benefit.

  • Your release includes new uses or major UI changes.

The UI can be significantly customized by input from the user.

When not to use

  • Your app’s UI and benefits have high familiarity and understanding.

  • Your release has no major changes the user would notice. 

  • Your app is tackling a new challenge or providing a new kind of benefit.

  • Your release includes new uses or major UI changes.

Complimentary elements

  • Don’t combine with Self Select.

  • Ok to end with setup.

  • Don’t combine with Top User Benefits.

  • Don’t combine with setup.

Top User Benefits




The design for the Top User Benefit format was largely carried over from a previous version of the User Education article. Because of the larger movement towards education throughout use of an app, these screens no longer had to be burdened by teaching a user about gestures, new feature releases or app redesigns.

Instead, our designs aimed to emulate an unboxing experience; a brief moment designed to create excitement, without getting in the users way.

Art Direction & Copywriting

Following Google's voice and the Material Imagery guidelines, the art direction provides examples showing clear, concise language written in a human tone, and quirky illustrations to accompany the copy.

Focus on single points
Focus on one key idea in each frame, don’t stuff in more than is necessary.

Be clear
Be clear about what you want the user to do, rather than trying to sound clever.

Be relevant
Describe user benefits in natural language.

Simplify
Simplify the visuals to the essentials needed to convey a concept. Avoid superfluous information that isn’t integral to the story or is hard to parse at a glance.

Engage the user
Show users exciting and surprising visuals to increase engagement.

Don’t be UI literal
Don’t show product UI, users haven't experienced it yet, and aren’t ready to learn about it. Bring the user benefit to life.  

Cross-Platform Redlines

With the user-benefit focused writing and illustrative guidance defined, I tuned and updated the wireframes and redlines, making sure to cover different device orientations, as well as platforms. Working with the writer and art director on the project, we agreed that no copy should exceed three line lengths, and the 'GET STARTED' button should be visible from the start.

These changes, along with limits to the number of pages make for a consistent Google experience: short pithy headlines accompanying delightful illustrations, and the ability to move on at any point.

Mobile & tablet portrait
Copy & UI are center aligned on the screen and built up from the bottom of the screen with 24dp padding.

1. Headline: Type 24sp, Leading 32sp
2. Subhead: Type 16sp, Leading 24sp
3. 32sp line height
4. 56dp padding between top of button & center of copy
5. 24dp vertical padding

Mobile & tablet landscape
Copy & UI are left aligned against the edge of the illustration and vertically centered.

1. Headline: Type 24sp, Leading 32sp
2. Subhead 1: Type 15sp, Leading 24sp
3. 32sp line height
4. 56dp padding between top of button & center of copy
5. 24dp vertical padding

Desktop

1. Headline: Type 24sp, Leading 32sp
2. Subhead 1: Type 16sp, Leading 24sp
3. 32sp line height
4. 56dp padding between top of button & center of copy
5. 24dp vertical padding
6. 48dp horizontal spacing

Asset Production

As part of developing the redlines (and motion examples, seen below) for these screens, I created examples on how to produce and optimize assets for use in the warm welcomes. Working with Eric Henry (lead motion designer on Google Photos) & Rachel Been (Art Director for the Material team), our examples match both technical best practices for Butterfly as well as the Material Imagery best practices:

Motion Design

While developing the motion work, I researched an internal script called Butterfly & worked again with Eric, who had previous experience with the tool. Together, we co-wrote documentation on how to use the script, it's benefits and it's limitations. 

Among it's advantages is greatly reduced file size, greater scalability than video due to its code-based nature, and its cross-platform compatibility (Android, iOS, Web).

472kb unoptimized (images + code)

7,556kb unoptimized (h264)

177kb optimized (images + code, ImageAlpha)

683kb optimized (h264, Handbrake)

*no visible compression, all images are .png

*no visible compression, file size could be further reduced if compromising on fidelity

After meeting with the Keep, Search, Photos, Play Music & OnHub teams, it became clear that different teams had different motion design capabilities. Accounting for this, varying team timelines, and abilities to outsource work, I defined three varying levels of fidelity for the Top User Benefit screens, ranging from a simpler slide-show like format to a more complex, full-motion design:

Measurement

Finally, our team worked to help define metrics to track while implementing these changes, in order to ensure that our guidance remains effective at scale. Some suggested metrics included:

  • Drop off rate by frame: percent of users who click "GET STARTED" on each frame
  • Completion rate: percent of users who watch/swipe through all three frames
  • Percent of 7DAs in week one, compared to before redesign

Self Select

 


The Self Select format was designed for applications centered around organization and curation. Allowing a user to customize their experience from the get-go means that they have a vested interest and sense of control through the process, as well as giving Google the ability to tailor the apps content to their interests.

Apps like Play Books, Play Newsstand and Device Assist have seen completion rates rise to over 90% with this pattern.

Art Direction

Similar to the Top User Benefit screens, copy plays a key role in making sure the screens are welcoming as well as giving clear reasoning  why Google is asking for this information up front, as well as conveying the benefit of answering the questions. Clear, explanatory language & well designed spreads with the minimum number of required options help users get through these screens with minimal effort.

Meaningful & noticeable
Offer choices that have a meaningful and noticeable impact on the experience for the user, not Google.

Ask what you don’t know
Don’t ask for preferences that we’ll garner from normal app usage. If we don’t need to ask for it, don’t waste their time.

Keep it short
Try to limit choices to one screen. Otherwise, make sure the second screen builds upon and feels connected to the first. Each screen should have fewer than ten choices.

Lead with the benefit
Don’t just ask for input. Explain how this input will improve the experience.

Be brief
Let the design help convey the meaning of each choice. Keep individual choice descriptors short.

As with all of the guidance provided, we encouraged readers of the article to keep in mind what is necessary for these screens, what the user will see upon downloading the app from the Play Store, and the first thing users will see after completing the warm welcome.

Design

Because of the variability of the content within screens such as these, I created more generic UX patterns, demonstrating different methods of organization:

Measurement

Again, our team defined metrics to track in order to ensure that the guidance remains effective. Suggested metrics included:

  • Skip rate
  • Completion rate
  • Choices made
  • Percent of 7-day actives in week one compared to before redesign

First run experience

While our team had not yet completed designs for how continued education would occur in the app, we wanted to provide some best practices to app teams in the meantime.

We again provided a few key metrics to track along with suggested first steps to nudge the user deeper into the apps experience:

  1. Help users take a first key action
  2. Provide a way to learn more/ask for help, if they want it
  3. Increase engagement and retention of 7-day actives (accomplished in conjunction with UI)

Give users something to do
Don’t leave them on a blank screen.

Build off of the warm welcome
The first key action your app is driving should be connected to the features highlighted in the warm welcome.