Design proposal for Feature Discovery Moments
What's this issue about?
Proposal for future design direction for Feature Discovery Moments (FDMs), thoughts and feedback about recommendations and next steps.
Considerations
The iterations should:
- show different options for the placement of the FDM and the design of the FDM itself
- avoid any links to docs or other dense material
- be triggered in context (as opposed to a global nav link for example)
- be flexible enough to use in different parts of the app (nav, sidebar, content areas, etc)
- ideally, introduce variations of existing Pajamas components
- take into consideration prior discussion on future direction for FDMs on
adminvs.non adminpersona from this issue
Useful links
- Mural: Design proposal for FDMs
- Competitive analysis/inspiration issue
- Draft Figma file
- Inventory of current Feature Discovery Moments
Design concepts - Proposal
1. MVC concept / Accordion
Notes: FDM opens & closes with the Discover accordion. This is not interrupting user's JTBD as it's triggered in context. Tried two design iterations for FDM in the side bar (Epic) and FDM in the edit MR screen (Approval Rules). The paid feature badge can be displayed in different ways, with tooltip or with the Premium label. CTAs would be different for admin/non-admins.
| Current state (Epic) | Proposal (Epic) |
|---|---|
 |
 |
| Current state (Approval Rules) | Proposal (Approval Rules) |
|---|---|
 |
 |
2. Clickable badge concept / Pop over
Notes: FDM pop over opens & closes by clicking the Premium Badge. The size of the pop over is larger or smaller depending on the information but the idea is to keep text to minimum so the user can just get a quick idea about what the paid feature is about. CTAs would be different for admin/non-admins.
| Current state (Description templates) | Proposal (Description templates) |
|---|---|
 |
 |
| Current state (Epic) | Proposal (Epic) |
|---|---|
|
 |
3. Feature bundle / Drawer
Notes: This concept is highlighting multiple features together in context. When the user clicks on Discover text-link, the drawer swipes in on the right of the current screen (similar to the current What's new section in GitLab). Depending on which feature the drawer was initiated from, that feature is in an open stage within the drawer. The user can open and close each tab using the +/- signs. potentially, they can also interact with each feature via the emojis and the Request this Feature button - which would trigger a request feature process from user to admin. CTAs would be different for admin/non-admins. The drawer closed by the x icon on the top right.
| Current state (Epic) | Proposal (Epic) |
|---|---|
|
 |
| Current state (Description templates) | Proposal (Description templates) |
|---|---|
|
 |
Recommendation / Next Steps
My recommendation would be to explore further the: 3. Feature bundle / Drawer concept, because:
- Bundling related features together makes sense when selling a DevSecOps platform
- It is easy to scale in the future as different features could be bundled per plan/stage/workflow/persona
- We won't need to explore different sizes or placements since the FDM component will be the same for any FDM and only the pairing/content would change.
- The drawer itself opens up A/B testing opportunities: content, which features are more interesting by using the
👍 /👎 emojis, which media best sells the feature (e.g. illustration vs. gif), placement of the drawer. - It's easy to pick-up and implement for any teams
- Offers space for hand raise PQLs through the CTAs that could adjust to
Contact salesdepending on the user
As next steps, I would suggest the below:
- Explore further the
3. Feature bundle / Drawerconcept - Create prototype of the above concept
- Proceed with solution validation research to understand how users interact with the concept
- Create user flow for
Request this featurebutton - Select features that are high on the post purchase user survey and roll out the concept via an MVC grouping these most wanted paid features in one drawer