Learning Journeys page on CNCF.io

[cjyabraham]

We want a page on the cncf.io site that meets these requirements:

• doc 1
• doc 2

[CathPag]

Here's a doc outlining the goal of the project.

[GarethAcidWorks]

Hi all.

The first round of this is ready to view here.

The figma file can also be found here feel free to leave comments direct on the page.

As mentioned in the video:
• There is a lot of temporary copy in there currently
• The goal at this point is to create a format that works well on desktop and mobile and can house the different steps effectively.

Please let me know your thoughts.

Screenshot also below

[CathPag]

Thanks, @GarethAcidWorks — this is great! And good call on doing a video + explanation; much easier :)

Yes, we have two docs. This one is the project description. I removed the initial mockup and moved the banner mockup to the other doc. The second one is where we started gathering all resources. I forgot we had the old mockup on the first doc, so apologies for the confusion.

Regarding the "ribbon on the homepage," yes, ideally, we'd have what I generally call a "sticky footer CTA." We use something similar on our website for the newsletter. Once you get to the footer, it becomes part of it. The latter might not be possible because there is already a newsletter CTA on the CNCF page.

Why such a prominent placement? As a one-stop shop for all CNCF resources, we want it to be as discoverable as possible. The homepage gets a lot of traffic, so it'd be great if it was really visible on it. The ribbon would be highly visible without being obtrusive. If we can make it thin, it'd be great if it could be on all pages, at least at the beginning. I'd also make it part of the regular nav bar.

Regarding the mockup, I agree with you. We should use the logos when we have them. I'm a little bumped we can't do a timeline. I understand the mobile concerns, though. Would it be possible to do a timeline that turns into stacked-up cards on mobile?

[cjyabraham]

We have a section on the homepage for new users. I think it'd be good to use this link to go to this new page. We could relabel the link to be "Learn about Cloud Native" or something?

[CathPag]

Well, the fact that you had to point it out to me, even though I'm often on the page, proves that it's not super discoverable :)

Anyways, the landscape is not about the CNCF. As great as the CNCF is, people don't need to understand the organization. They need to understand what cloud native is and how it can benefit their organization. By helping educate organizations, we'll help drive adoption — the raison d'être of the CNFC. Unless the CNCF doesn't see it that way, we should give it a prominent place, especially at the beginning, so people can discover it. Once it's a well-known thing (think the landscape), a link in the nav bar or/and a reference in the middle of the homepage might be enough.

@onlydole, how do you see it?

[GarethAcidWorks]

Hi all, thanks for the additional info. There are some quite dependant UI decisions here being discussed so I recommend we hope on a call and thrash out a few good options to try.

My gut feeling is... a more VISIBLE link would be good, maybe around the section Chris pointed out, but yes i agree that area could perhaps have some tune ups to ensure it's got as much gravity as possible around there for the folks who need that.

LMK if a call sounds good and peoples calendars. I'm generally flexible on time.

[thetwopct]

This is a great initiative, thanks so much @CathPag!

When we redesigned the CNCF site the home page was a big focal point of discussion, and we had many discussions with many many stakeholders about the different ways to present information, give prominence to different areas of the organisation, meet all the departments needs and for the page to flow properly and not try and do too much.

This section of the home was designed as the navigational part for newcomers to fire them off to where we expected them to want to go:

The "New to CNCF" section was designed to take the user to a page pretty much like you're describing, it's just we didn't have it written, so we pushed people to learn more about CNCF on the About page as a starting point. Unfortunately our content backlog is big and only growing, so that is why to finally get this Learning Journey for visitors is super exciting.

I would like to suggest the following implementation once this is ready to launch:

1. Redesign this whole home banner area to be about the Learning Journey. Currently the banner is half empty, easy to miss as you said, with the content on the right when a users eyes typically start on the left, and it displays a link which is already in the hero. Regardless, users do still click this, so I think it can only get better.

2. Add the Learning Journey as a menu item link under Community

3. Promote the Learning Journey under the Training menu, as this section gets a ton of traffic (more than the home page) and the Learning Journey content is essentially a "Beginners" training

Additionally - could be added to End Users page, flowed in to and linked from other site content in various places, launch blog post, usual marketing treatment etc.

IMO this would give this project a great start and make it widely available to site visitors. Regarding a sticky footer/banner - I would advise against it - we already have a sticky header and a sticky cookie/GDPR banner that a first time user will see, and we have a great site design able to accommodate promotion of items in various ways.

@GarethAcidWorks Designs look good. The design should be content driven - do you know how long any of the content sections will be? It may be better to have multiple sections on one page rather than forcing the user to click a lot going from one page to another. We do have breadcrumbs on the site for some sections, so if there are multiple layers of pages, we should definitely utilise those.

I don't feel like this needs a call, the content needs to drive the page design, and the home banner design can be worked on - but as this will need higher up approval before going live, we can probably only take it so far before getting content, marketing, exec team and others involved.

[GarethAcidWorks]

Re James's point about including more content into the page rather than lots of clicks off it, I'm happy to test that. So for example rather then a link for 'What is Cloud Native' we should simply have the copy from here... on the page. Correct?

[GarethAcidWorks]

Another option is a drop down system that folks can open or close depending on what they want to click into... for example:

[thetwopct]

Yes exactly, in the page.

I am not a fan of hiding content behind accordions, but it's a common design pattern. I'd rather its just on the page, minimal friction for the user to read.

We also have the Tab Container page design used in a few places in the website, but I've never been a fan of it. If this is the opportunity to come up with a new approach we should take it.

[onlydole]

I agree - I'm not a fan of banners or other highlighted content, I'd like it to feel natural in terms of discovery, and we can always drive traffic to these pages with some mindful marketing efforts. I'd much rather do that than disrupt the flow for folks that show up to CNCF's site for other things.

BUT we should be able to show attention to various rotating assets and efforts on our main pages too, I'd reason (ex. Rotating hero images or call outs instead of our current static video content block).

[thetwopct]

Yes totally. The home page and mega menu were designed to highlight items when needed in a cohesive way while still making sense to new and everyday users.

Rotating banners have been proven regularly to not work for various reasons (mostly accessibility and SEO and no-one watches them). We already do have an event banner on the home page that rotates, plus sliding project icons, so adding more rotations is also a bit too much motion IMO.

The home hero video took a lot of effort, time and money with multiple sign offs from stakeholders to get right so that it sends a strong brand message to all visitors. If something as universally promoted as Kubecon does not get the hero banner spot, I am not sure anything else would qualify, so I would be real reluctant to go down that path.

For real attention grabbing campaigns, we also have this hello bar banner that is on every page of the site and visible until the user scrolls. We could definitely make use of this (as I think many people have forgotten we have it). But its not a long term thing, just great for short campaigns.

Some extra info - the home page is not in the top 6 of landing pages for users, so promoting it in the mega menu as above is IMO still the very best way to get eyeballs and clicks on this.

[onlydole]

I agree deeply with the lack of rotating hero images - though I do think we should have seasonal content that gets changed out on the homepage (akin to how e-commerce sites or the App Stores rotate out their content).

I also like the thought of targeting folks via other social media platforms and leveraging SEO to bring folks to any other pages that make sense - I feel that will be best vs. the top-level banner (unless it's a critical announcement or short-term campaign like you mentioned).

Thank you for all the insights and feedback.

[GarethAcidWorks]

Hi all

Today we've looked into what content from all of our various links sits directly on the page vs what doesnt.
I think it's fairly clear that some can indeed be dragged and dropped straight in (after some nice formatting)
vs
Other links which are clearly entirely separate websites. (Such as Glossary, Contributors etc).

You can see this comparison on here

So if im following this trail correctly, we have 2 options for the overall approach:

1. Everything is linked out like in the original design
2. It is a mix of some things on the page, ie:
   • Showing the full content on this page. Such as 'What is Cloud Native.
   • Showcasing highlights of others pages. Such as 3 x Case Studies supported by a 'See all button'.
   • Direct links out to the page which are too big / complex.

Perhaps the direct links out could be more like engaging panels / banners themselves rather than the repetitive white boxes.

Option 2 would take more figuring out but it would create a varied, perhaps more engaging read if we can make it work.

LMK if that makes sense.

[CathPag]

Hey, sorry, hectic work week while trying to work through the Glossary PR backlog (I hate to let contributors wait for too long, but we currently are). I hope to read through your comments over the weekend and get back to you. Sorry for being a bottleneck, and thanks for your patience!

[CathPag]

Hi everyone, thanks for your patience!

I'm afraid we are missing the point of this resource. The goal of the journey is to become a hub for ALL CNCF resources, not a resource itself (see problem statement and what it is below copied from this doc). Ideally, it will grow by a lot. We added the resources we know, but once this goes live, we'll ask people to request more resources to be added, as there are surely a lot more out there.

Its function is to become a "home" for all resources so people to can easily discover them (I copied my KubeCon submission below, which addresses that). As such, it should link to all these resources, not contain educational material itself.

Foreseeing that it will include a lot more resources, I strongly believe the content should be minimal. We must keep it minimalistic, clean, and easy to navigate. Otherwise, it'll become overwhelming. Just look at the Landscape. When designed, no one planned for so many projects to be added...not that this will ever get as as big, but we should design it with its potential growth in mind.

Some interactivity would be great. For instance, if I'm not a newbie, I should be able to jump right into the advanced section. Maybe sections are collapsable, so users can choose their level and only see their content. To keep it clean, the explanation might only appear if you hover over it.

It should also be clear there is a recommended journey, so it'd be great if we could create a sort of timeline, at least for desktop. People might discover it on mobile, but I'd assume, those who want to dig deeper will do so from their desktop computer.

Additional context

Problem statement

There are lots of cloud native resources scattered throughout the internet, but it's hard to know where to start when embarking on your cloud native journey. How do you find them, and which one builds on which? Even for experienced technologists, it can be hard to find what they need. With so many CNCF initiatives committed to helping users navigate the ecosystem, we need a "home" for all resources organized in a way that makes sense to the user.

What is it

The Cloud Native Learning Journey (CNLJ) is one page that bundles all educational CNCF resources. The CNLJ starts with cloud fundamentals — resources for people without previous cloud native experience — and increasingly moves on to more advanced topics.

KubeCon "pitch"

Are you new to cloud native and trying to wrap your head around Kubernetes & Co? Or maybe you are a pro looking for deep dives into specific topics. No matter where you are on your journey, you have likely wasted lots of time searching the internet for the right information (who hasn't?). That's what the Cloud Native Learning Journey aims to address.

From the Cloud Native Glossary to the Maturity Model to the TAG Security Whitepaper, there are lots of great resources, many developed by volunteer-based CNCF groups. However, with no central hub for these valuable resources, you may or may not find them when needed. Newly launched, the Cloud Native Learning Journey aims to become a one-stop shop for CNCF resources in a recommended reading order — starting with content that doesn't require any previous knowledge to highly technical content. Join this session to learn all about it and how you can help the Learning Journey become even more useful.

"Ugly" mockups to illustrate idea

Collapsable categories. Desktop vs mobile

Desktop: Newbie category extended + hover over details
Mobile: simple cards but only selected category

[CathPag]

Hi all, thanks for the additional info. There are some quite dependant UI decisions here being discussed so I recommend we hope on a call and thrash out a few good options to try.

My gut feeling is... a more VISIBLE link would be good, maybe around the section Chris pointed out, but yes i agree that area could perhaps have some tune ups to ensure it's got as much gravity as possible around there for the folks who need that.

LMK if a call sounds good and peoples calendars. I'm generally flexible on time.

Sounds good. Who wants to be on the call? Let's coordinate via Slack once we know who'll participate and in which time zones.

[GarethAcidWorks]

Sure sounds good, i can jump on on the afternoon onwards

[GarethAcidWorks]

Hey all, we've pushed this onto a place with 3 fine tuned variations.

Catherine is keen to keep the line to show the linked flow as you scroll down the page. (Option 1)

James suggested removing the repeated buttons 'Learn more, see more etc' and we have replaced that with more subtle arrows.

Gareth - I feel option 3 is the easiest to follow. The blocks of colour draws your eye to the actual content well and for me thats the most important thing.

Here is a Loom recording to walk you through each one.
https://www.loom.com/share/47d7a134cf234440b4674e3e744cb4dd?sid=137dbc11-51cb-4f7a-bb8d-85a7a52e69a8

[CathPag]

Yes, I really like the first option, as it is a visual journey.
Option 2 looks a bit busy with 1.1, 1.2.,... One number at the top and then just points looks cleaner to me.
Option 3 also looks busier to me than 1.

Good call from James re CTAs. A CTA button for each section would be too much.

[siforster]

I like number 1 as well. I like that it does not have 1.1, 1.2 etc and as you commented just has the adjoining lines and allow people to pick a subsection without feeling like they are skipping.

I also really like the perspective oriented art you proposed at the end, where the items come together. the logo is nice on its own and bears in its final form a slight resemblance to a cloud itself. Very cool.

[GarethAcidWorks]

Hi all, I've figuring out the best way to do this on mobile today and it's been a real mix of using copy the essentially aid the UX, crafting the simplest, cleanest way to make sure the scrolling experience is helpful and quick to digest.

Here is the video explainer to show you the options and the effort / considerations behind the final 2 options.

Also with some subtle UI work to get the line and the buttons working.

There is also a couple of options for the quick links. I think the single click option is probably the best and faster user experience.

Im aware there will be some WCAG tweaking to do, i can work on that once we're agreed with the preferred approach.

Single click quick links option (with more detail in the copy

Drop down menu quick link option, with much simpler category title

[CathPag]

Love it! I agree with you. How about using the simplicity of the less conversational one with the quick links option?

[GarethAcidWorks]

Sure, for next steps I have:

1. Aligned desktop with that mobile style.
2. Figure out the best position of the quick links so they are at a helpful place for both devices, therefore moving some of the less essential stuff down.
3. @thetwopct Just to keep the build and the figma as close as possible i have reduced the body copy size down to 14pt as that seems to be how it is on the build (which is fine). It's also freed up some space in the boxes for the step by step.

[GarethAcidWorks]

Remaining tasks:

1. Check colours for WCAG
2. Drop in some graphics for the desktop version - I presume we're all in agreement to keep them on desktop to use the space and keep some personality in there (Mobile it is not required due to the format).
3. Add in the 2 steps.

Final question - Now the UI is figured out, do we feel it's worth keeping the 'Cloud Native Glossary' logo in there instead of the consistency of an arrow?

[CathPag]

Let's do an arrow. Consistency is better.

For the graphics for each section, can we get CNCF mascots with learning themes, as discussed? Linky typing on a laptop (we have that), Phippy with a graduation cap (probably for one of the more advanced), another one reading a book, etc.

These can be updated any time, but just wanted to be sure it's still something we want to do.

[GarethAcidWorks]

@cjyabraham @thetwopct are you also good with keeping the arrows exclusively?

Regarding the characters, we can create these fairly quick. But there are some budget matters that need to be checked. Will revert back

[thetwopct]

I like the consistency of all arrows. If we get to the point where we need logos on them we can always add them later if needed.

[GarethAcidWorks]

We should be done now, i have summarised the final things to align on here:
https://www.loom.com/share/8517430e65e840de94b92d0ef597ff8f

Summary
• All lists are now in both desktop and mobile and work well
• Arrows done
• Accessibility tests are done - Just 1 issue with gold in the smaller filter tab
• It's clear the visual to use it the coloured circles which also forms the logo all the steps come together. After some tests, having small, detailed characters things in the small (desktop only) space available doesnt make sense. We already have a strong visual, so there's no need to add more visual and build complexity.

[CathPag]

Looks great. Ok with not using the mascots.

[CathPag]

Thanks for sending the staging site, @thetwopct — it looks great!

One correction: What is cloud native 101 and 201 links are reversed.

• 101 should link to the Glossary definition
• 201 should link to the TOC definition

@siforster, Richard, what do you think?

@onlydole, @Charley-Mann, I think we can pick up the conversation about where this should live on the CNCF website, and how to push it out to KubeCon attendees.

[thetwopct]

@CathPag I've updated those 2 links 👍

We've also added an example call out for the page in the main menu:

On the home page we've updated this section to link to the journey but we'd like to improve this banner ideally (another suggestion was to move this block before the other 3 blocks)