search

firefox-devtools / profiler

Firefox Profiler — Web app for Firefox performance analysis
https://profiler.firefox.com
Mozilla Public License 2.0
1.21k stars 392 forks source link

[Draft] Landing Page 2.0 #1801

Open digitarald opened 5 years ago

digitarald commented 5 years ago

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"
  2. Capabilities:
    • Approachable: Everybody can record performance issues
    • Powerful: Insights into web platform
    • Collaborative: Analyze recordings as a team
  3. Get started
  4. 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?
  2. 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/)
  3. 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?
  2. Open profile from file/URL
    • Drag & drop area
  3. 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
  2. New message about privacy of uploaded profiles
  3. Localizable

Related

Developer sites:

Recent new sites:

Design systems:

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

gregtatum commented 5 years ago

I'm not sure what Photon theme and Firefox branding really entails, but it seems like we could use a design mock-up, or at least some other examples of something that is similar. One thing I'd like to keep is the super simple call to action to install the add-on and start profiling. I think we should make it as clear and simple to record the first profile.

Here's Firefox Monitor's site:

digitarald commented 5 years ago

Absolutely; I mostly wanted to outline the problem here to get the discussion going. This lacks a lot of requirements.

Firefox Monitor is a good example; as it was designed recently with the new marketing design system. Added to the list.

julienw commented 5 years ago

One thing I'd like to keep is the super simple call to action to install the add-on and start profiling.

I'd like to point out that it's already not super simple because there's not only one call to action. Photon gives solutions to have a primary CTA versus secondary CTAs.

digitarald commented 5 years ago

I'd like to point out that it's already not super simple because there's not only one call to action.

@julienw what would you suggest would be the CTAs?

julienw commented 5 years ago

I think the current CTAs are good, but the styling doesn't make it clear which is the primary CTA; I think this is "install add-on" like Greg says, and the style should reflect this.

julienw commented 5 years ago

We plan to look at this again in Q4.

violasong commented 4 years ago

Designs in progress here