[Home] Elastic home page redesign

[cqliu1]

Summary

Closes #25734.

This redesigns the Elastic home page as described in the issue above with the goal of decluttering the home page while highlighting a few of our solutions.

Screenshots

With access to all features

Note: The Observability and Security links direct the user to each solutions respective overview page. The Enterprise Search link directs the user to App Search until their overview page is shipped. The Kibana link directs the user to Dashboard for now until the Kibana landing page is complete (see #61549).

(Updated 8/24/2020)

OSS

(Updated 8/24/2020)

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[alexfrancoeur]

@cqliu1 I keep getting optimizations errors when attempting to try out the PR, but I recall seeing a screenshot or demo in which the Kibana box didn't fully fill out as shown in the mockup above. Is it possible to match @MichaelMarcialis designs or is there a limitation within EUI to make the component "that" flexible?

[cqliu1]

@cqliu1 I keep getting optimizations errors when attempting to try out the PR,

I've just updated the branch with the latest changes if you want to try pulling it down. Let me know if you're still getting errors.

but I recall seeing a screenshot or demo in which the Kibana box didn't fully fill out as shown in the mockup above. Is it possible to match @MichaelMarcialis designs or is there a limitation within EUI to make the component "that" flexible?

The image above is actually an updated screenshot from the current state of this feature branch after working some CSS magic. The blue background on the Kibana card now stretches to the full size of the card when all solutions are visible as shown above.

[alexfrancoeur]

I don't know what's going on, but I still am running into errors running this PR locally 🤦

The screenshot looks amazing! I can't believe that's the real deal 😄 I have a few quick comments, and we can discuss more during our sync later today.

• We do have a security icon in the nav, I think we'll need to replace it with the SIEM one that is currently on the homepage. Would that be an easy change?
• I'm skeptical about including the app directory link still. Now that it's front and center, I think it may be more confusing for users that navigate to it. Basically, it only has applications and features that were added to be part of the homepage. It's missing a ton of things and now that we have a mix of task oriented cards and apps, it's even more misleading. What does the group think?
• Given the thread in another issue, should we see what Gail thinks we can use for text to change the default route when you login?
• One note on OSS, there are no spaces and I'm not sure if that advanced setting exists in OSS. If it doesn't, we need remove. If it does, we'll probably need to adjust the text.
• Thoughts on adding a "manage the stack" as a card next to add data in OSS?

[alexfrancoeur]

@ryankeairns @cqliu1 I was able to get the PR, kbn bootstrap ftw 🤦 A few other quick things outside of what I mentioned earlier now that I have it up. Let me know if this is too much feedback 😄

• Any reason why enterprise search isn't showing up on the homepage?

• We'll probably need to involve @gchaps in this decision, but "Manage" feels more natural than "Manage stack"

• If there are less than 3 cards under Add data, the elongated boxes look odd. Is it possible to add a maximum width?

• Looking at the ordering of the add data cards, I'm thinking we may need to order differently. In order to focus on Add an integration, Integration manager (beta) and file upload

• The link for try our sample data doesn't seem to work

• Is this branch in sync with master? I believe Ingest Manager should be on by default but am not seeing it.

• I briefly spoke with the PM for ingest manager on this, and we can remove the beta tag from the home page if we want to. There will be an indicator in product. So if we feel this throws off the flow of the design, it can be removed.

• In the same conversation we discussed alternative ways to reference the Ingest manager (cc: @gchaps). "Manage ingest" doesn't feel right. Could we do something like "Add Elastic Agents" instead? Thinking through the "Add an integration" card, I revisited the flow and we don't actually state "integration" anywhere. Ironically, that's actually part of ingest manager. Are there alternatives we might be able to explore for the title?

• I think Observability will be stuck showing (in basic) until we merge with master and see the latest changes to the overview feature controls ([Observability] landing page always being displayed #71494)

[ryankeairns]

@alexfrancoeur which security icon are you referring to? Somewhat unfortunately, we are using this term for two different things on the home page.

---

Gail did provide some copy for the 'set default route' link:
"Make this the home page for this space"

Catherine pointed out that Spaces don't exist on OSS (right?)... so suggested:
"Make this the home page"
^ In light of #71550, it might be even more accurate to say "Make this the start page"

---

If we were to remove the directory link, there won't be a way to access that page any longer. Is that a desired outcome of removing the link?

---

The links in the header are the literal page/feature names. That being the case, should Manage Stack then be Stack Management? I don't have a strong feeling on this vs Manage but point it out for consistency.

[cqliu1]

@alexfrancoeur which security icon are you referring to? Somewhat unfortunately, we are using this term for two different things on the home page.

Initially, I was using the securityAnalyticsApp EUI icon, and I believe Alex wants us to use the logoSecurity icon instead. I've updated the screenshot up top, showing all solutions are using their respective logo icon instead of using app icons.

[alexfrancoeur]

I know we discussed yesterday, but reiterating here for anyone who is watching this PR. We'll need to update the App Search to be Enterprise Search and @ryankeairns will be reaching out to the Enterprise Search team to either provide us the link to their Overview page or the default app they'd like to navigate to.

[ryankeairns]

Update: I chatted briefly with @johnbarrierwilson and it sounds like they're planning to have a basic Overview page - referred to as the Enterprise Search home - in the 7.10 timeframe. If that slips, then we can confirm which page we should point to in the meantime.

[alexfrancoeur]

@ryankeairns @cqliu1 I had some time to play around with the updated PR this morning.

Regarding enterprise search, for the mean time, should we just link out to app search so we're not blocked? Right now the link to enterprise search points to /app/app_search and errors out. It looks like it should route to /app/enterprise_search/app_search/

When clicking into the Observability link, it seems to redirect from /app/observability to /app/observability#/overview. However, as a new user, I actually don't have any data and would expect the redirect to be to app/observability#/landing. I'm not sure if this is just in master or in 7.9, but I'm also seeing that redirect occur when clicking into the overview link in the nav. @cauemarcondes is this expected behavior?

I've added a comment here, but I think the empty index pattern state will play an important role in getting started while we're missing the Kibana landing and overview pages.

Some additional feedback:

I created a role that has read only access to the e-commerce index and write access to Kibana apps. This means that with this role, I can't ingest data or manage indices in any form or fashion.

• For some strange reason, I'm seeing Observability here without access to observability apps. I recall being able to hide it with space management, but it seems to be tripping up on feature controls.
• Add your data, manage your data, and change your home page all lead to permission denied or errors. Maybe this is an OK UX, but I wanted to bring this up as a discussion point as it's new territory. How do you think we should handle this on the homepage @ryankeairns ?

Also, I'm not sure if this is helpful but I thought I'd summarize some of my comments earlier and from our discussion this week in marked up screenshot. I think we'll need some additional input from @gchaps on a bit of this text.

[gchaps]

@alexfrancoeur Here are some suggestions and comments. Once we decide on the text, I'll add it to the google doc, so we have all the text changes in one place.

Title

Our discussion on Slack landed with either no title or "Give your data shape"

Manage

Good point on users not knowing what the stack is. Manage alone works, but would be better if followed by a noun. Do you have a suggestion?

Add your data (middle card)

Load data
Load data from popular apps and services.

OR

Ingest data
Ingest data from popular apps and services.

Add your data (right card)

Add Elastic Agents
Add and mange your fleet of Elastic Agents and integrations.

Footer

One line:

Make this the home page for this space.

OR

Change the home page for this space.

[ryankeairns]

Add your data, manage your data, and change your home page all lead to permission denied or errors. Maybe this is an OK UX, but I wanted to bring this up as a discussion point as it's new territory. How do you think we should handle this on the homepage @ryankeairns ?

Ew, I'm hopeful we can do something more friendly. I'll run this locally to get a better feel... I'm not sure what sort of permission checks we can do to prevent/hide this, but there must be something.

[alexfrancoeur]

Thanks for the quick response @gchaps!

For the title, "Give your data shape" feels less tactical and a bit more marketing, where the other titles are quite task oriented ("Add your data", "Manage your data") I liked the route you were going with "Gain insights on your data", is there a reason we dropped them?

Manage is a tough one. The only other alternative I can think of is "Management". I feel like either of these options are common enough that they're straight forward, similar to "Settings" or "Configuration". I'd like to say "Manage data", but we say data a lot here and also reference this at the bottom of the page. Maybe that's OK and having 1:1 mapping is a good thing?

For the add data middle card, this option looks best to me.

Ingest data
Ingest data from popular apps and services.

The other alternative I can think of is to flip the title of that section with ingest like this.

Ingest your data

Add data
Add data from popular apps and services

+1 on the fleet changes for the second add data card

Quick question on the footer Gail. We've learned that the setting for this feature only changes the default landing page for when you log in and not actually changing the "home page". The more I think about it, the more I lean towards potentially not differentiating for simplification. Knowing this, does that change your suggestion at all?

[gchaps]

@alexfrancoeur After reading through your comments, here is what I think we should go with:

Title: "Gain insights to your data" or "Gain insight to data". (It fits better with the page, as you pointed out)

Link in upper right: Manage

Section title: Add your data (it's easier to read)

Card:

Ingest data
Ingest data from popular apps and services.

(although ingest is one of our common terms, it might be better to come up with something more friendly for a new user)

Footer suggestions:

Like this page? Make it the default landing page for this space.
Like this page? Show it after log in to this space.
Always show this page after logging in to this space.

[alexfrancoeur]

Thanks @gchaps! Should we use the google doc as the source of truth for @cqliu1 ?

One last bit about the landing page, rather than having the action item to make it your landing page we've decided to make the action item to change your landing page. The reasoning behind this is that this is the default experience. Most likely, this will be the clusters landing page. Any way we can make the two options below read better?

Basic+

Change the default landing page for this space

OSS

Change the default landing page for Kibana

[ryankeairns]

Initial design PR: #72481

[gchaps]

@alexfrancoeur I've been keeping the google doc up-to-date. Good idea to make that doc the source of truth.

Both of your suggestions sound good to me. We could probably omit the word "default" though.

Basic+

Change the landing page for this space

OSS

Change the landing page for Kibana

[alexfrancoeur]

After a few conversations, we've decided that we cannot get rid of the feature directory as it exists today until we also support in search (I just opened #72680). That being said, given the limited functionality available, it doesn't make sense to make it a primary CTA. Can we adjust the design so that there is a subtle link at the bottom somehow? @ryankeairns @MichaelMarcialis

[MichaelMarcialis]

Can we adjust the design so that there is a subtle link at the bottom somehow?

We could move it to the bottom, but part of me thinks it still makes the most sense as the last (i.e. least important) link in the top-right list of links (add data, manage stack, dev tools, app directory). That said though, I'll defer to your instincts if it's something you feel very strongly about.

[alexfrancoeur]

Thanks Michael, in its current state, I'd prefer to hide the feature directory as much as possible. Moving it to a top item gives it significantly more visibility. It's quite incomplete and is now a mix between tasks and features.

[cqliu1]

Add your data, manage your data, and change your home page all lead to permission denied or errors. Maybe this is an OK UX, but I wanted to bring this up as a discussion point as it's new territory. How do you think we should handle this on the homepage @ryankeairns ?

Ew, I'm hopeful we can do something more friendly. I'll run this locally to get a better feel... I'm not sure what sort of permission checks we can do to prevent/hide this, but there must be something.

I chatted with @legrego about this, and the issue is there isn't currently a way to check a user's access to ES features, i.e. security, ingest manager, and index lifecycle management (see #35965), so these cards will appear on the home page for users even if they don't have access to these parts of stack management and lead them to that permission denied errors.

[cqliu1]

The wrapping a element that Catherine describes would address all the concerns I believe; don't think we'd need any overriding EUI behavior. @cqliu1: Just let me know if you want me to make a PR for this change, or if you'd prefer to handle it. Thanks!

@MichaelMarcialis I can handle wrapping the panel in an a tag, but I might need you to go in and fix some of the styles.

[cqliu1]

Link to Enterprise Search was broken

@cjcenizal The Enterprise Search link now points to app/enterprise_search/app_search as expected. Thanks for catching that!

[chrisronline]

LGTM for stack monitoring!

[bradenlpreston]

A few comments here:

1. Recommend we leverage the new home page for consistent messaging. Search. Observe. Protect. https://www.elastic.co/home
2. From there, the subheadings can mirror our web language.
3. For security - we are combining two use cases into one. Can we adjust the main security card to say SIEM & Endpoint Security as the subheading?

@hmnichols , @jae-elastic , @MarkSettleES , @MikePaquette , @ryankeairns

[ryankeairns]

Thanks @bradenlpreston , so that I'm clear, you're suggesting the main title on the 3 left-hand cards be Search, Observe, and Protect with the subtitle on the Protect card reading SIEM & Endpoint Security?

[bradenlpreston]

@ryankeairns -
Yes - my recommendation is to use Search, Observe, Protect as the main headings on each of the cards. I think we should get the other product team's input on that one as well.

For the subheading on what is currently security. We can change that to SIEM & Endpoint Security independent of the main title change.

[ryankeairns]

@bradenlpreston ok, let's do this. We'll change the Security subtitle in this PR, as proposed, then let's get together with @alexfrancoeur , et al, next week when he returns from PTO. He's been leading the PM side of this particular project and I'm sure he would like to hear your feedback and discuss further.

That aside, we will likely merge this PR this week to keep the project moving (there are some related landing pages in the works as well) and there will be plenty of time to make desired copy changes prior to the 7.10 feature freeze.

Thanks for the feedback, aligning with the recently launched website seem like a smart move!

[kertal]

KibanaApp owned code LGTM, code owner review, checked out locally in Chrome, KibanaApp owned plugins are no longer displayed as single plugins, but this is no reason to feel blue, since "Kibana Visualize & analyze" is actually blue🎨. Nice redesign. One thought, the blue banner could e.g. show the plugins links on hover, or e.g. "Plot geographic data" could link to Maps.

[ryankeairns]

@kertal thanks for the review and feedback. There is an accompanying Kibana/analyze landing page (under development) that the blue card will link to. That page will display and link to all the underlying products!

[kertal]

@kertal thanks for the review and feedback. There is an accompanying Kibana/analyze landing page (under development) that the blue card will link to. That page will display and link to all the underlying products!

@ryankeairns thx, really like this upcoming landing page ❤️

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 3c2b1b9

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
home	215	+8	207

async chunks size

id	value	diff	baseline
advancedSettings	65.9KB	+414.0B	65.5KB
home	568.2KB	+57.3KB	510.9KB
indexLifecycleManagement	259.7KB	+1.0B	259.7KB
ml	8.2MB	+41.0B	8.2MB
observability	310.3KB	-1.0B	310.3KB
securitySolution	9.5MB	-1.0B	9.5MB
total		+57.7KB

page load bundle size

id	value	diff	baseline
advancedSettings	981.4KB	+716.0B	980.7KB
apm	40.6KB	+26.0B	40.6KB
canvas	1.3MB	+18.0B	1.3MB
console	30.4KB	+37.0B	30.4KB
core	1.2MB	+25.0B	1.2MB
dashboard	702.2KB	+1.0B	702.2KB
discover	229.3KB	+1.0B	229.3KB
enterpriseSearch	22.6KB	+861.0B	21.8KB
graph	15.8KB	+43.0B	15.7KB
home	26.6KB	+2.6KB	24.0KB
indexLifecycleManagement	229.8KB	+864.0B	229.0KB
infra	276.6KB	+24.0B	276.6KB
ingestManager	467.5KB	+831.0B	466.7KB
logstash	180.1KB	+1.0B	180.1KB
management	29.5KB	+9.0B	29.5KB
maps	296.2KB	+19.0B	296.2KB
ml	576.8KB	+738.0B	576.1KB
monitoring	298.1KB	+136.0B	297.9KB
observability	49.9KB	+968.0B	48.9KB
painlessLab	161.0KB	+5.0B	161.0KB
rollup	223.1KB	+1.0B	223.1KB
savedObjectsManagement	216.4KB	+10.0B	216.4KB
security	305.2KB	-14.0B	305.2KB
securitySolution	807.8KB	+13.0B	807.8KB
snapshotRestore	62.6KB	+854.0B	61.8KB
spaces	412.8KB	+1.0B	412.8KB
transform	25.3KB	+1.0B	25.3KB
uptime	25.1KB	+1.0B	25.0KB
visualize	41.3KB	+1.0B	41.3KB
watcher	28.8KB	-32.0B	28.9KB
total		+8.6KB

oss distributable file count

id	value	diff	baseline
total	26356	+1	26355

distributable file count

id	value	diff	baseline
total	53198	+1	53197

History

• 💔 Build #70575 failed 4bd2868
• 💚 Build #70370 succeeded 3c49a3d
• 💚 Build #70149 succeeded 44f3e69
• 💚 Build #70042 succeeded b8e49e7
• 💚 Build #69543 succeeded 80109c8

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream