feat: adding why async api section and change to order of sections on homepage (#397)

[boyney123]

Description

This follows on open issue and conversation happening over on #397

I believe having a section "Why" is quite important. We want to give people a reason to use AsyncAPI and why they should invest time in the spec/tools.

Changes

• Added new why section
• Reordered things with some suggestions from @magicmatatjahu (which are great, I think it looks better moving some sections around too).

[netlify]

✔️ Deploy Preview for asyncapi-website ready!

🔨 Explore the source changes: 0d627d7

🔍 Inspect the deploy log: https://app.netlify.com/sites/asyncapi-website/deploys/6181655da1255600076d2329

😎 Browse the preview: https://deploy-preview-406--asyncapi-website.netlify.app

[boyney123]

The wording is kinda completely made up from what I could grab from the website etc, if you have any ideas @alequetzalli would be great!

What do you think the new Why and flow of the page @magicmatatjahu @derberg ?

[derberg]

I'm skeptical if it comes to a change in the position of the "AsyncAPI file creation" animation. We are crossing a thin line here of that we change because it makes sense or what we change because of our personal preference.

In other words, I prefer animation more and have totally different feelings against the logos of different companies - I just see it everywhere on every single product page and never care about these as I do not trust this information.

You know what I mean, we need to think twice really before we rearrange, just because we personally do not like something.

If we want to do it right, IMHO:

1. we should just add this new section below the current animation, and leave animation where it is
2. we should plug in google tags and actually measure:

• if people scroll on landing pages or not
• if people interact with animation or not
• and some other stuff

This way we can actually have some quantitative data that we can compare with "our feelings" or "feelings of others".
For example: @magicmatatjahu you are right, this animation is fancy but brings no value, nobody ever watched it until the end to open the example in playground and they all scroll down to read other sections.

Makes sense?

[magicmatatjahu]

@derberg It can be done, the question is how long it will take and if it is worth it? Perhaps it would be best to ask the community about their feelings in slack? People who join our slack from site should still remember their first impressions of the homepage and the animation.

In other words, I prefer animation more and have totally different feelings against the logos of different companies - I just see it everywhere on every single product page and never care about these as I do not trust this information.

I can understand your feeling. I also personally don't care such an information, but I was trying to be a user/architect looking for a solution and I guess such a person will take it into account. If the project is big no one will take a solution written after hours by one/few people - that's why he looks for companies that use it in production. We should also ask about it our community if this information is important.

I will still be on the team to remove/change place for this animation. It is not very important for me (as you mentioned by the way) and I would rather have a link to the playground like in the current PR (after title). I would like the Why Asyncapi section to be right after the main title, like in PR.

@boyney123 If Łukasz will agree, would you do a little poll on our slack about this animation?

And important thing, if we go with user section right after Why AsyncAPI then we should also give sponsor section next to it - it is also important.

[derberg]

how long it will take

are we in rush here 😆 first iteration might take some time to figure out how to properly integrate Google Tags, but this will be a great start and using it further in other places will be much easier.

if it is worth it

you mean in general or for me 😆 I would risk saying for you it is not worth it 😄
let me answer with another question: is it worth too spend time on the location of the elements based on a gut feeling, or opinion of few people or actually better to make a decision basing on gut feeling, some people, and good data that proves it is a good direction. Have a look at this.

I also personally don't care such an information, but I was trying to be a user/architect looking for a solution and I guess such a person will take it into account

I'm definitely not criticizing. You made a great suggestion. I just don't feel like such a change on the website should be done so quickly just basing on one suggestion 😄

If Łukasz will agree, would you do a little poll on our slack about this animation

If I do not agree, you can do the poll too anyway if you think it is a good way to go 😄 my agreement is not needed.

In short, my point is: adding a new section is fine, but reordering sections in the same PR without really discussing "if it really is a good direction" and checking properly is not the best way 🤷🏼 This is why I suggest doing Google Tags as they would help a lot, like seriously don't you think it would be cool to have a statistics that compare a number of visits on landing page and number of clicks on Join us! button in Join our great community! section. It would be extremely useful, then you can change positions, colors, locations and learn how numbers change and what is the best solution. We are not in rush here.

[boyney123]

Thanks for the comment @magicmatatjahu @derberg :)

Not sure where this leaves this PR 🤣 but yeah I can see both sides for sure.

I understand what you are saying @derberg about making changes from personal opinion vs gathering data for sure!

How can I take this forward? (My suggestion):

• Move elements back to where they were
• Maybe have Why AsyncAPI just below the animation if that is cool? I feel (from my POV) it's more value than straight into Sponsor (but this is just my opinion again 🤣)

Let me make some changes back to PR and see what you think

Also I think maybe the general flow can be raised in another ticket, where we can get some feedback from community / analytics data and take bigger things from there

[boyney123]

OK round two 🔔

OK, some small changes pushed up:

• Animation added back in
• Why AsyncAPI still under it (followed by businesses that use it).

Thoughts?.... 🙈

[quetzalliwrites]

how long it will take

are we in rush here 😆 first iteration might take some time to figure out how to properly integrate Google Tags, but this will be a great start and using it further in other places will be much easier.

if it is worth it

you mean in general or for me 😆 I would risk saying for you it is not worth it 😄 let me answer with another question: is it worth too spend time on the location of the elements based on a gut feeling, or opinion of few people or actually better to make a decision basing on gut feeling, some people, and good data that proves it is a good direction. Have a look at this.

I also personally don't care such an information, but I was trying to be a user/architect looking for a solution and I guess such a person will take it into account

I'm definitely not criticizing. You made a great suggestion. I just don't feel like such a change on the website should be done so quickly just basing on one suggestion 😄

If Łukasz will agree, would you do a little poll on our slack about this animation

If I do not agree, you can do the poll too anyway if you think it is a good way to go 😄 my agreement is not needed.

In short, my point is: adding a new section is fine, but reordering sections in the same PR without really discussing "if it really is a good direction" and checking properly is not the best way 🤷🏼 This is why I suggest doing Google Tags as they would help a lot, like seriously don't you think it would be cool to have a statistics that compare a number of visits on landing page and number of clicks on Join us! button in Join our great community! section. It would be extremely useful, then you can change positions, colors, locations and learn how numbers change and what is the best solution. We are not in rush here.

@boyney123 So I think I will hold off on doing any TW review for now, cause it seems like we are still in the discussion & exploration phase. (Even outside of OSS and in Product world, I would say to hold off on making this PR, that it's too soon.) 😀

@derberg To play devil's advocate... are you sure that the community values the animation as much as you do? hehehe 🤭 😜 To be truly fair, we would need to run a poll and now raise the question to the broader community. So far I was concerned that you value the animation because you've grown fond of it, even though we don't quite know (from this thread anyway) what % of users landing on the homepage scrolled past it and/or gained use from it. Since there is no rush, if I were David for example, to pitch his idea I would spin up some simple variations in my local and show them to community members in a SIG meeting as an extra talking point. I propose David made a short demo to see if the community's feedback ends up being yay or nay. 😃

[boyney123]

Thanks @alequetzalli

Yeah happy to bring it up in the next SIG meeting for sure, I think we can just demo this PR and what's currently live as you said, and maybe take things from there.

I will hold off any work until we had it 👍

[derberg]

are you sure that the community values the animation as much as you do

The thing is I don't care about the animation 🤷🏼 😆 For me the most important is to have there, on the landing page things that bring value and remove stuff, or change location when it really makes sense.

you've grown fond of it

I definitely have no idea what that means 😆

To be truly fair, we would need to run a poll and now raise the question to the broader community

yes, definitely. Just keep in mind this is not they only way we should change things. We have thousands of people accessing asyncapi.com and not being part of Slack/Twitter and any other channels. So we need to be aware that answers will come from a specific community. Website had 394k unique visits this year, 94k landed on the landing page. Would be cool to know numbers coming from 94k people and not just few folks from the pool. And best would be to actually have all the data, qualitative and quantitative and make decisions basing on them.

my main point is, now we make a change and new Why AsyncAPI section is first and animation is below or even removed. So we basically merge a PR.

in a month from now we have someone else opening a PR, changing the order back, will we merge? 😋

---

context: I worked as a PO in the past where one of my things was project website and landing page. We were getting all the time different feedback, that is better, what is more important, add animations as people like it, no, you add video as it always works great, we need more logos of companies that use the project, we need to expose community more. This was all great, but with this kind of qualitative feedback where you have no data to compare it with, having website development stable is basically impossible.

wouldn't it be nice to say, oh, we need to get rid of the animation, as just 1% of users wait for it to finish and click on playground link and also we are getting signals from the community that it is not helpful, or oh, we need to get rid of the animation, as just 1% of users wait for it to finish and click on playground link and also we are getting signals from the community that it is not helpful. Let us experiment, leave the picture but without the animation and we will see if initial 1% increased

---

I'm not advocating for keeping the animation or not. I'm advocating for making reordering/removal of landing page parts based on all possible measurements we can do.

[derberg]

After yesterday's public meeting (asyncapi/community#83) looks like no one objects we need such a new section on the website. Let us just give a few days more for folks to voice their opinion (we do not want to make final decisions on synchronous meetings). It doesn't block us from focusing on the content of this new section though.

[boyney123]

wouldn't it be nice to say, oh, we need to get rid of the animation, as just 1% of users wait for it to finish and click on playground link and also we are getting signals from the community that it is not helpful, or oh, we need to get rid of the animation, as just 1% of users wait for it to finish and click on playground link and also we are getting signals from the community that it is not helpful. Let us experiment, leave the picture but without the animation and we will see if initial 1% increased

I think this is spot on to be honest, as you said make some choices based on data etc. Yesterday we mentioned about GA on the website, what kind of things do we want to track if we want to go this way? I guess it would be great to start collecting some data?

Things I can think of

• How many people drop off
• What things are people clicking on and where
• Are people watching the animation till the end? (Not sure how we can measure this... maybe fire an event on animation end....)

Guess if we want to start measuring things we should define how we want to collect the data. I'm guessing custom events in GA is fine?

@derberg do you think Analytics tracking/events should be raised in another issue?

---

It doesn't block us from focusing on the content of this new section though.

Cool, the content I just made up, what do people think? Any changes you would like to change?

[derberg]

do you think Analytics tracking/events should be raised in another issue?

yup, I think we are pretty much aligned here and I'd love to continue but best in a separate issue as I have some answers to your questions already but do not want to pollute this issue to not loose focus

[boyney123]

do you think Analytics tracking/events should be raised in another issue?

yup, I think we are pretty much aligned here and I'd love to continue but best in a separate issue as I have some answers to your questions already but do not want to pollute this issue to not loose focus

#432 created for this 👍

[derberg]

I added some suggestions to Why AsyncAPI section

[boyney123]

Thanks for the review @derberg 🙏, I (think) have made the changes and ideas you recommended. When you get a second if you could review again would be awesome!

[derberg]

@boyney123 I would switch Community box with Code Generation box, so then the first row is "technical" and second one "soft".

Also side of the Specification box seems a bit odd 👇🏼

@magicmatatjahu @fmvilas do you agree with what the "boxes" are focused on? content-wise

@alequetzalli any content fixes you think should be made?

[fmvilas]

Yeah, looks good to me 👍

[quetzalliwrites]

Okidoki, left some comments 😀👍🏽

[boyney123]

Thank you @alequetzalli 🎉

All of them added, a couple left, just waiting for your feedback :)

[quetzalliwrites]

LGTM 🚀 ✨✨

[boyney123]

Thanks @alequetzalli 🙇

If you're happy, looks like this PR can go in @derberg 🥳

[derberg]

@boyney123 hey, I hope you do not mind but there is just one more thing. Regarding #432

I just explored a bit and figured I actually configured Google Tags some time ago 🤦🏼
I now set it up for Read the docs button, next to Open Playground and in 10min it recorded 7 events (clicks)

The problem is that this button/link has no custom id and the CSS class is not unique on the page. So for now I had to configure it based on the button/link text. This is obviously risky, what if the test changes in the future. I think that safest would be to have id on every button/link as while working on a PR, I think changing element id always makes you think.

So, would you mind updating your PR to at least add id to the new elements of the why AsyncAPI section? Please 🙏🏼

[boyney123]

So, would you mind updating your PR to at least add id to the new elements of the why AsyncAPI section? Please

No problem!

[boyney123]

@derberg added some ids to the section 👍, let me know what you think.

Followed kinda convension section_area_element

[derberg]

👏🏼