Website Homepage Redesign

[Mayaleeeee]

Description:

The current homepage design has several usability and visual issues. The layout appears cluttered, which impacts the overall user experience and makes navigation less intuitive. Our goal is to create a cleaner, more engaging, and user-friendly homepage that highlights key content and calls to action more effectively.

Your task is to ensure the homepage's overall design and usability are responsive across all device types.

Deliverables (the outcomes that prove this work is complete)

• A fully responsive homepage tested across multiple devices (desktop, tablet, mobile), ensuring layout and content adjust properly.
• Enhanced navigation and visual elements that provide a more engaging user experience.
• A redesigned layout that reduces clutter and organizes content to avoid overwhelming users.

[lucky29-git]

@Mayaleeeee can i work on this?

[Mayaleeeee]

Heads Up!

Hey everyone! 😊

Please hold off on tackling this issue for now. It's planned for a Q4 bounty, and I might add more details before giving it the green light.

I’ll let you know when everything’s good to go! Thanks so much for your patience and understanding.

cc @lucky29-git

[lucky29-git]

Sure, @Mayaleeeee! I've already started my research on this 😀, now am just waiting for your signal. Let me know if there's anything else you need.

[Mayaleeeee]

Sure, @Mayaleeeee! I've already started my research on this 😀, now am just waiting for your signal. Let me know if there's anything else you need.

Hey @lucky29-git

I plan to work on this issue myself for the Q4 bounty program. I really appreciate your interest and enthusiasm! If you're looking for something else to dive into, here's another bounty issue
that you might be interested in.

Thanks for understanding!

[sambhavgupta0705]

Are these designs approved by all code maintainers??
I don't think we have discussed these changes yet

[Mayaleeeee]

Are these designs approved by all code maintainers?? I don't think we have discussed these changes yet

@sambhavgupta0705 Thanks for asking.
The redesign is part of a larger #3018 effort that’s still under discussion and hasn’t been fully approved. I’ll cover this in detail during our meeting on Thursday. Please join us there for more context and to share your thoughts.

[aeworxet]

Bounty Issue's service comment

Text labels: bounty/2024-Q4, bounty/advanced, bounty/design, bounty/upgraded
First assignment to regular contributors: 2024-09-20 00:00:00 UTC+12:00
End Of Life after: 2024-10-31 23:59:59 UTC-12:00

@asyncapi/bounty_team

The Bounty Program is not a Mentorship Program. The accepted level of Bounty Program Participants is Middle/Senior.

Regular contributors should explain in meaningful words how they are going to approach the resolution process when expressing a desire to work on this Bounty Issue.

[Mayaleeeee]

Thanks @aeworxet

I plan to work on this issue myself for the Q4 bounty program.

[aeworxet]

@Mayaleeeee is an AsyncAPI Maintainer specified in https://raw.githubusercontent.com/asyncapi/community/master/MAINTAINERS.yaml, so they fall under the first category in the prioritization list.

[aeworxet]

Bounty Issue's Timeline

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Medium	2024-09-17	2024-10-07	2024-11-17	2024-10-20	2024-11-03	2024-11-17

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.

[Mayaleeeee]

Hey @aeworxet,

After watching the videos created by @derberg on Slack regarding the landing page, I see that the scope of this issue has expanded. It now includes creating additional content, understanding more detailed requirements, and doing some research.

Considering the extra work involved, I want to upgrade this to an advanced issue to reflect the expanded scope.

I’ll add any further details to the issue if needed, but I wanted to give you a heads-up!

Here’s the link to the Slack discussions for reference: link.

[aeworxet]

Upon request of the AsyncAPI Maintainer, who is also the Bounty Program Participant (@Mayaleeeee), the Complexity Level of this Bounty Issue was reclassified to Advanced (upgraded) and its Timeline changed.

Bounty Issue was Reclassified and its Timeline changed

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Advanced	2024-09-17	2024-10-07	2024-12-01	2024-10-27	2024-11-17	2024-12-01

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.

[aeworxet]

Looping in @fmvilas, @derberg, and @akshatnema in advance, as I will need their opinions anyway.

I would suggest using a 'mobile-first' approach when solving this Bounty Issue, since the 'mobile-first' approach is prevalent in modern web design.

[Mayaleeeee]

Hola, everyone,

Here is a quick update on the project. I’ve started working on the design, and you can find the progress so far in the Figma file linked below:

[Figma Link]

That said, I’ll need to continue working on it after our online conference, as I’ll get more information for the homepage design from Lukasz’s presentation. I’ll keep refining things as I gather the details.

[Mayaleeeee]

Hola, everyone,

Here is a quick update on the project. I have started working on the design using the insights gathered from the clips and the presentation made by @derberg. You can find the WIP design in the Figma file linked below:

Figma Link

[Mayaleeeee]

Hola, everyone,

Here is a quick update on the project. I have completed the deliverables for this issue and updated the other versions of the website. Before moving forward, I am waiting for a review from one of the code maintainers, @derberg.

I also explain each section of the new design during our design meeting. You can find the recording here.

You can find the screenshot of the designs below or here in the Figma file. cc @ @aeworxet

[Mayaleeeee]

Hi @aeworxet

I want an extension for the project until the second week of December.

Thank you

[Mayaleeeee]

oh this is getting an amazing shape

What you can use AsyncAPI for - how this section would behave if we add more use cases? let's say over time we add 2-3 more? can you share a simple example with some lorem ipsum?

@thulieblack you might want to have a look as the newsletter went to the bottom. I'm not really sure the component should be visible on the landing page in general, if not better to add a button next to Join our Community like Stay up to date or just Subscribe to Newsletter and it would link to /newsletter page

Regarding the newsletter, I kind of like your suggestion as well, but I prefer the Subscribe to Newsletter option as it's clear and easy to understand.

[Mayaleeeee]

yes, like 2 more, 2 less - this is going to change over time, the more research on use cases we do

Hmmm.
What heading should I add to it?

[derberg]

can be dummy as I wrote, just generate some lorem ipsum content. As a fan of Game of Thrones I personally like https://ipsum-community.github.io/hodoripsum/ a lot 😃 but there are others, like http://www.catipsum.com/

[Mayaleeeee]

can be dummy as I wrote, just generate some lorem ipsum content. As a fan of Game of Thrones I personally like https://ipsum-community.github.io/hodoripsum/ a lot 😃 but there are others, like http://www.catipsum.com/

Ahhh, GOT
Nice!

I will send an update soon.

Thank you.

[Mayaleeeee]

Here is the updated design @derberg

[derberg]

regarding newsletter, I means at the top, next to join community button, as newsletter is not only about community, so do not belong to join community section

[Mayaleeeee]

regarding newsletter, I means at the top, next to join community button, as newsletter is not only about community, so do not belong to join community section

oh, I see. It has been updated.

[thulieblack]

Why do we have this here though?

For the Newsletter Button, can't it replace the Join our community?

since we have it in two places?

[Mayaleeeee]

Why do we have this here though?

@thulieblack
The intention is to make the 'Part of the LF' more visible and accessible - unlike how it is on the present homepage.

For the Newsletter Button, can't it replace the Join our community?

since we have it in two places?

Oh, you meant we should replace it instead of having those two buttons. That can work. What do you think, @derberg

[thulieblack]

@thulieblack
The intention is to make the 'Part of the LF' more visible and accessible - unlike how it is on the present homepage.

The banner takes a lot of attention from the homepage. Rather retain how it was before and leave that part reserved for the conference banners that we put occasionally

[derberg]

@thulieblack this is intentional - although I agree we need to get a preview how new landing page would look like with the announcement banner

still huge number of people do not know asyncapi is open source and part of LF. On official email we regularly get VC enquiry to give us startup funding. Thus I requested to make it more visible then it is currently. Maybe we can make smaller font and then less hight but definitely not the old way

[Mayaleeeee]

Take a look at this @thulieblack @derberg

[derberg]

lgtm, @thulieblack ?

[thulieblack]

That can work 👌🏿

[Mayaleeeee]

Thank you both.

@derberg, the final design for the screens is below.
cc @aeworxet

[derberg]

it looks great imho, I have nothing else to add, really great stuff.

now - more work for me to make sure we have the right content for the case studies, and update on https://www.asyncapi.com/casestudies 😅

[Mayaleeeee]

it looks great imho, I have nothing else to add, really great stuff.

now - more work for me to make sure we have the right content for the case studies, and update on https://www.asyncapi.com/casestudies 😅

Thanks for the feedback, and I’m glad the design met our expectations. I understand the content updates will come later, and I’ll be ready to update the designs when you’re ready on your end.

That said, I wanted to check if my part of the task is fully complete at this stage—it would be great if you could confirm that for me.

[derberg]

yes, imho your part is done, now we need to open a followup issue to implement it. It will take me few days to do it though

[aeworxet]

@akshatnema, do you have any suggestions or remarks on the final version of the design?

[derberg]

@akshatnema @anshgoyalevil can one of you please have a look. I'm no longer actively reviewing and approving code changes - and whoever implements this view will ask you for review and approval. I forgot to ping you earlier - sorry.

Please have a look if there is anything in the design that cannot be there as from the code base and project structure it is adding some unnecessary complications or something like that 🙏🏼

[om2137]

yes, imho your part is done, now we need to open a followup issue to implement it. It will take me few days to do it though

is someone working on implementing the design, if it is open I would like to work on this.

[derberg]

@om2137 sorry but did you read previous comments?

[om2137]

@om2137 sorry but did you read previous comments?

I have glanced over comments of this issue, got high level understanding about the issue and went through the design/figma files.
@derberg is there something specific in the comments that i should look into or know about?

[akshatnema]

Hey @aeworxet @derberg ,
I have reviewed the designs made by @Mayaleeeee, and she has made the changes according to my comments. Hereby, I approve the designs made by her.

[aeworxet]

Bounty Issue Is Completed 🎉

@Mayaleeeee (githubID 105395613), please go to the AsyncAPI page on Open Collective and submit an invoice for USD 400.00 with the expense title Bounty website#3192, tag bounty, and full URL of this Bounty Issue in the description.

[akshatnema]

Not closing this issue, and this issue will help us to track the implementation of website as well.

[derberg]

@akshatnema you mean you do not want me to open separate issue, better to work on implementation here, right? also tracking my content development?

[akshatnema]

Yeah, because the name of the issue is pretty generic and there is no PR associated with this issue so far. So I believe we can track the implementation as well.

[derberg]

sounds fair, let's do it this way then

[om2137]

hey, @akshatnema @derberg is this issue open for contribution, or someone is working on the implementation of the design.
I have gone through the conversion of this issue, linked slack thread and figma designs.