Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Untangle My Home #95386

Open
Copons opened this issue Oct 15, 2024 · 21 comments
Open

Untangle My Home #95386

Copons opened this issue Oct 15, 2024 · 21 comments
Assignees
Labels
Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". [Type] Overview

Comments

@Copons
Copy link
Contributor

Copons commented Oct 15, 2024

Important

Project Thread: p5j4vm-4Yc-p2

Current PRs:

Brief

To remove the “My Home” page in the Classic wp-admin interface and relocate its features either to the Site Management panel or as widgets in the wp-admin dashboard.

This change simplifies the user experience by addressing the redundancy between the “Dashboard” and “My Home” pages. Having two central hubs creates confusion, so we propose consolidating functionality into the Dashboard to better align with the core WordPress experience.​

Visuals

Image

Plan (to be confirmed)

Feature Action
Launchpad tasks Port to Dashboard
General tasks Port to Dashboard
Domain upsell Port to Dashboard
Daily prompt Port to Dashboard
Site preview Port to Dashboard
Quick links Port to Dashboard
Stats No action: Already exists as a Dashboard widget
Reader nudge No action: Leave it in My Home
Learning cards No action: Leave it in My Home
Get help No action: Leave it in My Home
App promotion No action: Leave it in My Home
@richtabor
Copy link

Just to confirm, the idea here is to leverage the WP dashboard wholesale, with custom widgets for much of this here in My Home?

@taipeicoder
Copy link
Contributor

taipeicoder commented Oct 16, 2024

@richtabor yes. We consider the My Home screen redundant and confusing in the Classic wp-admin interface. In addition, it's built on Calypso which we want to remove from the wp-admin interface experience.

This project is to move some My Home components into wp-admin dashboard widgets.

@simison
Copy link
Member

simison commented Oct 16, 2024

I don't think you're heading towards success with this approach, and problem-solving purely from a "WP Classic" perspective feels narrow. WP Classic is something we'll want to have across all sites, not just a self-selected few, so solutions should be solid.

You're planning to take all this:

Launchpad tasks
General tasks
Domain upsell
Daily prompt
Site preview
Quick links

And add it here:

Image

What's the point of all those widgets combined then? What was the go of My home that you're carrying over to dashboard? I could visualise the end result here but I'm sure it would look very hectic. :-)

Alternatively, I'd suggest:

  • Have a Calypso page just for launchpad tasks + website preview, as something part of onboarding. The task list should be considered evolving as user continues tackle them; new suggestions are added.

    Here's an example from Ghost:

    Image
    Image

  • Iterate on how we do domain upsells across WP.com. Take into account the sidebar nudge, and consider moving to dismissable footer banner and occasional popups, for example.

  • Move Daily prompt to be part of launchpad for onboarded folks, and brainstorm more placements for it like Reader and email series.

  • The rest of the widgets you list are not important enough to keep and move around to any dashboard, especially things like quick links.al

@taipeicoder
Copy link
Contributor

@simison we have a Feedback Request post. I've copied your feedback pekYwv-4JJ-p2#comment-4279 to keep discussions in a centralized place.

Copy link

Support References

This comment is automatically generated. Please do not edit it.

  • pekYwv-4JJ-p2#comment-4279

@github-actions github-actions bot added the Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". label Oct 16, 2024
@simison
Copy link
Member

simison commented Oct 16, 2024

Thanks!

@ellatrix
Copy link
Contributor

ellatrix commented Jan 9, 2025

You're planning to take all this:

Launchpad tasks
General tasks
Domain upsell
Daily prompt
Site preview
Quick links

Why not? There's certainly things that can be combined and organised in such a way that it looks good and clear. For example Daily prompt could be extending quick draft. Should quick links be there in the first place? Why are they not in the main menu? Site Health status could be removed (cause we manage that), and replaced with general/launchpad tasks. Etc.

Eventually we'll want to align with the WP admin redesign and help out there instead of doing our own dashboard.

@jameskoster
Copy link
Contributor

jameskoster commented Jan 10, 2025

I had the same thoughts as Ella. Additionally:

  • There is a dedicated domain upsell widget, and the first suggestion in the General tasks widget is to register a domain. Are both necessary? Maybe registering a domain should be an optional Launchpad task?
  • Driving traffic/promoting content is kind of irrelevant until the site is set up and launched; could be a dedicated widget that appears only after the site is launched.
  • Creating a logo and Making money could be optional launchpad tasks rather than dedicated widgets.
  • Learn.wp callout could be combined with Learning Cards and Get Help links in a single widget.
  • The WP app is called out during onboarding, does it also need a dedicated widget? Curious how well that converts.

We need to keep the efforts to refresh onboarding in mind here, but I think it's worth exploring a design that consolidates My Home with the wp-admin Dashboard. I have some ideas and will share soon :)

@jameskoster jameskoster self-assigned this Jan 10, 2025
@simison
Copy link
Member

simison commented Jan 10, 2025

Design explorations from @nuriapenya, somewhat touching the point of splitting launchpad/onboarding mechanisms separately from the dashboard itself:

  • p9Jlb4-fb3-p2
  • p9Jlb4-eTm-p2
  • p9Jlb4-fmP-p2

@jameskoster
Copy link
Contributor

Here’s a preliminary draft focusing on the overall user flow rather than fine-tuning the design of individual widgets. I recognize this iteration isn't polished, but the priority for now is leveraging as much existing technology as possible. We can refine the finer details after agreeing upon the flows.

Building on the onboarding work @nuriapenya has been exploring, the following screenshot illustrates what a user might see on the Dashboard immediately after signing up. The page header is reused from site-health.php, and the ‘Site Setup’ widget is the sole visible Dashboard widget. This keeps the user focused on setup without being distracted by any other widgets.

Image

To re-iterate, I'm not concentrating what the individual steps should be, just the overall flow and general composition. In this case each incomplete step in the widget can be expanded / collapsed, likely with one open by default. As the user works through each item they're marked as complete or skipped. Each item follows a simple format; Title, Graphic (optional), Description, Primary action, Secondary action (optional), Skip.

Once the user completes all tasks within the ‘Site Setup’ widget, it automatically disappears, and the user is redirected to the Main Dashboard.

For developers or experienced users (or just folks who dislike setup wizards), the ’Go to Dashboard’ link provides a shortcut to skip directly to the main Dashboard. If they choose this option without completing the setup, the ‘Site Setup’ widget simply reappears alongside the other widgets in the main Dashboard.

Image

From here, users can finish setup tasks at their own pace or hide the widget entirely via Screen Options.

Widget visibility should dynamically adapt based on onboarding responses and other contextual factors. If a user hasn’t registered a domain but has completed relevant onboarding steps, we might display a widget encouraging them to register one. Similarly the ‘Learn…’ and ‘Grow…’ widgets may only be visible after the site is launched:

Image

Ultimately there is a lot of scope to define different widget configurations based on user responses during signup, and the completion of steps during the onboarding tasks. If this proposal makes sense we should continue to discuss that, and iterate on widget designs.

Changes Overview

Migrated / Consolidated

  • Launchpad → Integrated into the ‘Site Setup’ widget.
  • General tasks → Relocated either to 'Site Setup' or categorized under new widgets (‘Grow…’ and ‘Learn’).
  • Domain upsell → Becomes a widget that appears conditionally, IE once setup is complete and the user has not registered a domain. To be honest we might consider removing this based on the outcome of Dotcom Upsells: Better Design and Strategy #96875.
  • Daily prompt, Reader nudge → Merged into Quick Draft functionality (needs design iteration).

Removed

  • View site → This functionality is readily accessible from the admin bar.
  • Quick links → Redundant due to admin bar and main navigation.

Hidden
The following core widgets are hidden by default:

  • At a glance
  • Activity
  • Site health status
  • WP Events & News

Let me know what y'all think.

@jameskoster
Copy link
Contributor

jameskoster commented Jan 14, 2025

Following along from my previous comment, here’s an updated design.

Note

I still consider this design to be work in progress, especially the individual widgets. Feedback is very welcome!

I’m leaning towards starting this effort by implementing an extensible, generic, and reusable widget that covers the most basic, fundamental steps of site setup. This widget could later be considered for integration into core if it proves effective.

As mentioned in my previous comment, this widget would initially be the only one displayed on the Dashboard of a fresh install. To enhance focus, we might even consider hiding the main navigation and admin bar until the setup tasks are either completed or skipped. Would this be too invasive?

Image

By default, the widget could guide users through tasks such as:

  • Site Branding: Set up the title, tagline, logo, etc.
  • Homepage Setup: Choose between a static homepage or a blog.
  • Customizing Design: Provide links to the Styles panel in the Site Editor (for block themes) or the Customizer.

For wpcom users, the widget could be extended to include additional tasks like email verification, domain registration, and other steps based on user inputs during onboarding. For example, if the user indicates they don’t want a blog, the homepage setup task could be pre-configured accordingly.

As before, an experienced user can easily skip this guided UX and go straight to the main Dashboard.

Dedicated Widgets for Complex Tasks

For more advanced or open-ended configuration tasks, I think additional dedicated widgets could work well. These would cater to multi-step processes such as setting up WooCommerce, Sensei LMS, or a paid newsletter.

These widgets should:

  • Adopt the conventions of the generic setup widget.
  • Break tasks into manageable steps.
  • Allow users the flexibility to prioritize their setup—for example, diving straight into store creation if that's their focus.

It’s worth noting that WooCommerce already includes a setup widget, which could potentially be updated to align with this new ‘core’ model.

Quick Draft++

Image

I’ve enhanced the Quick Draft widget with new features (acknowledging this may evolve into a new widget). Key updates include:

  • Writing Prompt Integration: Encourages users to start creating content immediately.
  • Tabs for Drafting Pages and Posts: Users can draft a new post or page directly within the widget.
    • The Page tab includes shortcuts for creating specific page types, such as Portfolio, Contact, or Donations.
      • These options end the user to the editor with an appropriate pattern pre-inserted, or in zoom out mode with relevant pattern category exposed.
    • These options are adaptive. For example:
      • If the site doesn’t have a blog, a prompt to create one could appear here.
      • If the user indicated interest in a portfolio, that shortcut could be given greater prominence.

Site Visibility widget

Image

For wpcom users, a Site Visibility widget would offer a quick way to go live, mark the site as private, etc.

If we wanted to keep the site preview, we might integrate it with this widget:

Image

Clicking the thumbnail would open the site in a new tab.

Customize Domain widget

Image

This widget conditionally appears based on whether the user has already registered a domain or not, or indicated they do not want to.

Post-Launch Widgets

Image

If the site is live and all setup widgets are complete, promotional and help widgets could appear, tailored to the user's setup preferences. Examples include:

  • Guidance on promoting the site.
  • Help with managing traffic or creating new content.

These widgets would adapt based on onboarding responses, with their arrangement, visibility, and state (collapsed or expanded) dynamically optimized for relevance.


Putting it all together

Initial setup step

Image

User clicks 'Go to Dashboard' (and has WooCommerce installed)

Image

All setup tasks complete, and site visibility = public

Image

@nuriapenya
Copy link
Contributor

Loving those @jameskoster 💎 some impressions around the Launchpad experience for wpcom users:

If we were to build this tomorrow, the contrast between the onboarding signup screens and the wp-admin UI would be quite noticeable. I am aware of the admin redesign and so on, but for now, UI difference could create some distraction/familiarisation issues:

Image

Re: Inline task completion: Part of the Launchpad mission is to guide users and help them discover where things live. If we have a lot of inline actions, people might miss completely how to do them again at another moment once the launchpad is gone.

That being said, I really like how you gave context on what each piece is important - something we currently miss.

Image

I guess this is a more generic problem to solve but having so many widgets is overwhelming. Significantly since the 3-column layout does not really help to give a sense of hierarchy.

Image

For more advanced or open-ended configuration tasks, I think additional dedicated widgets could work well. These would cater to multi-step processes such as setting up WooCommerce, Sensei LMS, or a paid newsletter.

Maybe these widgets appear only in the area they belong to? Do they have an item in the navigation?

@jameskoster
Copy link
Contributor

the contrast between the onboarding signup screens and the wp-admin UI would be quite noticeable

It's just my interpretation, but isn't this an inherent consequence of dotorganizing wpcom? If we want the wpcom software to resemble wporg more closely then I'm not really sure how to combat this.

FWIW I totally agree that the hierarchy and number of widgets on the core dashboard is not great. But as this is what ships in the core software, it's what we have to work with. It's a very flexible system though, so hopefully we can use some smarts to make things work.

I should also reiterate the designs of the widgets themselves are rough, we can (and should) refine, so long as we utilise core styles where possible. Maybe there's some logic we can add to ensure there's only one primary button..?

Maybe these widgets appear only in the area they belong to? Do they have an item in the navigation?

Yup, I think that's an option. Then we could include links to the dedicated setup pages from the main task list:

Image

It does mean we'd probably have to forgo the 'focussed' setup state though (where the main nav is hidden) because once you go to set up woo (for example) you'd be in the full admin experience.

@simison
Copy link
Member

simison commented Jan 14, 2025

If we replace everything in the screen with custom launchpad, does it need to visually resemble closely to the widgets, or we can departure here with something that looks different?

Image

@ellatrix
Copy link
Contributor

Why are we moving all of a sudden to inline task completion? Where has this been discussed? I'm not sure I like this departure from the current experience. IMO it's good that it links to the section on pages where the user will find them later (or can even go back to with browser history). This is also making untangling it unnecessarily complex. We should remember that this isn't part of the default WP experience, so I'm not sure if adding more bells and whistles at this point in time will help us.

@jameskoster
Copy link
Contributor

jameskoster commented Jan 15, 2025

Why are we moving all of a sudden to inline task completion?

We discussed this a bit on Slack, summarising here; while I think there are some benefits to inline task completion, we agreed it was something to explore later. I'm going to continue iterating on the widget design.

or we can departure here with something that looks different

My feeling is that it is more economical to use existing wp-admin design patterns as much as possible.

@jameskoster
Copy link
Contributor

Here's another design update. Stripped back, and hopefully approaching something actionable.

Pre launch

Image

The Site Setup widget body is updated to better resemble a task list. Inline task completion is gone; each task links out to the relevant destination instead. The tasks reflect the current ones found in the My Home launchpad, but this will most likely change quite soon. I'm keeping in touch with @nuriapenya about that.

Primary buttons are replaced with secondary ones to reduce the fight for attention.

Quick Draft includes the writing prompt, with actions to cycle through options, respond, and view other responses.

Image

Site preview is combined with Site Management Panel.

Customize Your Domain and Support widgets still need design, they're next on the list.

Post launch

Image

Once the site is live the Site Setup widget is hidden, and the Learn / Grow / Stats widgets appear.

@ellatrix
Copy link
Contributor

ellatrix commented Jan 15, 2025

@jameskoster Nice, this looks great, thank you!

  • Regarding the Daily Writing Prompt, I've tried adding it inside the existing Quick Draft widget, but upon closer look I'm not sure if it makes sense, because the button to post an answer actually opens the full editor and fills the content with the Daily Writing Prompt custom block. We could take answers within Quick Draft, but unfortunately that's just a plain text area and it would take more thought on how to make it work. I'm therefore thinking that it's better for now to place a tiny widget above Quick Draft.
  • Regarding the Site Preview, I've started a PR to reuse the existing panel. Two things:
    • I think we should get rid of the dev tools. It does not currently appear in My Home in the default style admin. Worst case we could perhaps have an ellipsis next to the other buttons similar to My Home, though I don't think these links should be here.
    • It might be that we have to reduce the size of the preview, I'm not sure. It's worth noting that this looks quite different on smaller screens with the two column layout. Actually, maybe it's fine.
  • Btw, I'm not sure if we should fill out the third column (yet). The problem is that the third column would appear below the middle column on smaller screen sizes that force two columns.
  • Could we potentially combine the learn/grow resources (to be displayed after the steps are complete)? And move the domain upsell underneath or above?
  • Could we move the Daily Writing Prompt/Quick Draft underneath the Site Preview? Alternatively, if we do want to fill out a third column, perhaps we could move these to the third column instead so they show underneath in case of two columns, though since Quick Draft is added to the second column by core, I'm not sure if we can/should move it, so I'd prefer the former for now.

No strongly held opinions of course.

@Copons
Copy link
Contributor Author

Copons commented Jan 16, 2025

@ellatrix @jameskoster could you update this issue description with the new details, and add sub-issues as needed? 🙇‍♂

@jameskoster
Copy link
Contributor

I added the latest designs to each sub-task. Let's continue to discuss therein.

@Copons
Copy link
Contributor Author

Copons commented Feb 5, 2025

February 5 Update

The team has been recreating individual features of My Home in the wp-admin dashboard.

Done

Next

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". [Type] Overview
Projects
None yet
Development

No branches or pull requests

7 participants