ℹ️ In-app education: Add Product Name Add Feature Name

ℹ️ In-app education: Add Product Name Add Feature Name 
🚦 Status: Early 🌱 | In progress 🔨 | Finished  
✍ Responsible team members: Role: @someone, Role: @someone 
🗒 Related specs: 🔗Type plus (+) to link a Paper doc
💡 Final help article link: 🔗Add link to help article
🎨 Design files: 🔗Feature design file, 🔗In-app education design file
💬 Discussion in Team communication app: 🔗Link to channel

Goal

This document aims to outline the design of the education modal of a new product feature and how users get informed inside our apps.

Desktop (Web/macOS)

“What’s new” menu option

💡 Link to icon asset for menu option

Location in-app
Option inside Help dropdown menu followed by feature name. Note: This is dynamic and always names the last big feature release.
Copy
Directs to
What’s New: Feature name
Opens the feature introduction information modal.
  • Review menu option copy @UXcopywriter
  • 🖼 Add mockup for menu option @designer

Desktop (Web/macOS)

Info Modal

Note: This modal is a reusable component.
🔗 Zeplin handoff file Web/macOS
🔗 PNG or GIF if asset Web/macOS 

  • Add Hand-off file link (e.g. Zeplin) @designer
  • Add link to PNG or GIF asset @designer
  • Review Desktop modal copy @UXcopywriter
Copy

Details
Title

What’s New?


Body
Introducing @Mentions
Sometimes you need an easy (yet unobtrusive) way to get a teammate's attention. Now, you can mention them by typing '@'+ their name in your comment or message.

Image
[PNG or GIF demonstrating feature]

Buttons
[Learn More] [Thanks!]
“Learn more” button redirects to help article; Blue “Thanks!” Button closes modal
  • 🖼 Add mockup for Desktop info modal @designer

Mobile 

Info Modal

Describe how the modal works. Add a user flow diagram or sketch below if needed. 
E.g. A dialog opens anywhere after updating the app to the latest version.

  • Add user flow diagram of mobile modal @designer
 
 
Copy