firefox-devtools / firefox-devtools/profiler

[Draft] Landing Page 2.0

Open
#1,801 7 comments 0 reactions 0 assignees View on GitHub
discussion ux-needed
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 46m
Merged PRs (30d)
27

Description

When opening up Profiler to a larger audience, we need to have a better onboarding for new users, which usually starts on the homepage.

## Use Cases
### First-time User _(P1)_
> _When_ landing on profiler.firefox.com the first time,
_I want to_ have all the information to understand the purpose of the profiler and to set me up for profiling and analyzing performance,
_so that I can_ start using the tool with confidence.

**Messaging**

1. Statement: "Collaborative performance recording & analysis tool"
1. Capabilities:
* Approachable: Everybody can record performance issues
* Powerful: Insights into web platform
* Collaborative: Analyze recordings as a team
1. Get started
1. Examples & documentation

**Requirements**

1. **Setup**: Allow upload profiles from disk in various supported formats
* On **Nightly**, Users should be guided to open DevTools or to set up the toolbar icon, and then onboarded to record their first profile
* When not on Nightly: Users should be guided to install the extension, and then onboarded to record their first profile
* Video content?
1. Alternative **Setup + First Run**: Interactive page that guides the user through enabling the profiler and using it for analyzing slow JS (inspired by http://devtoolschallenger.com/)
1. **Example recordings**: The empty state for existing profiles could link users to examples profile (brainstorming: slow animation, slow scrolling, unresponsive page, slow JS?)

### Returning User _(P2)_
> When coming back to profiler.firefox.com,
I want to see the profiles that I have published so far,
so that I can a) continue analysis, b) re-share or c) delete them.

**Requirements**

1. **List previously published profiles** Open _(P1)_, Copy Link _(P1)_, Delete _(P2)_
* Same format as window title (#1055), just formatted?
1. **Open profile from file/URL**
* Drag & drop area
1. **Compare _(P2)_**: Select 2 profiles to compare directly

### Foxfooder _(P3)_
> _When_ being linked to profiler.firefox.com to file a performance bug,
_I want to_ get quickly set up with the workflow,
_so that I can_ record the issue and share the recording.

Worth its own landing page, probably.

## Non-Functional Requirements
1. Photon theme and Firefox branding
1. New message about privacy of uploaded profiles
1. Localizable

## Related
Developer sites:

* http://developer.mozilla.org/
* https://extensionworkshop.com/

Recent new sites:

* https://monitor.firefox.com/

Design systems:

* Firefox: http://design.firefox.com/photon/
* Mozilla: https://protocol.mozilla.org/
* Concepts (experimentation template): https://github.com/mozilla/concepts

_Edit Mar 3 2019: Added design system links and focused user story_
_Edit Nov 22 2019: Added requirements and use cases_

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-129)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.