Proposal to Redesign the AsyncAPI Website

[Mayaleeeee]

I propose redesigning the AsyncAPI website to address numerous structural, usability, and user experience issues identified during the UX audit I conducted while working on the Design System. These issues are pervasive across almost every part of the website, necessitating a redesign. This proposal outlines the steps to enhance the user experience and interface.

Why We Need This Redesign

A better user experience on our website will:

1. Foster Growth: A seamless and enjoyable user experience will encourage more users to engage with our tools and community.
2. Demonstrate Commitment: Improving our website shows that we care about our users' experiences, leading to increased user satisfaction and loyalty.
3. Attract Designers: This project will generate more design-related issues, attracting designers and UX researchers to contribute to our project and fostering community involvement.

Goals

1. Enhance Usability: Simplify the website structure and improve navigation to make it more intuitive for users.
2. Improve User Experience: Address interface issues and create a visually appealing, user-friendly design.
3. Engage the Community: Encourage contributions from designers and developers by creating a collaborative environment.

Implementation Plan

Phase 1: Planning and Initial Redesign

• Proposal Discussion: Create a proposal to discuss the redesign and gather initial feedback from community stakeholders. - (what I'm currently doing)

• Create and Prioritize Issues: Based on the UX audit findings, create and prioritise issues for the redesign.

• Initial Design Work: Start with the homepage redesign and expand to other website sections.

• Community Page Design Improvements #3193

• Website Homepage Redesign #3192

Phase 2: User Research and Validation

• Usability Testing: Conduct usability tests on the redesigned sections to gather feedback and identify any remaining issues.
• A/B Testing: Implement A/B testing to compare the new design with the current version and measure user engagement and satisfaction improvements.

Phase 3: Development and Iteration

• Implement Design Changes: Begin development based on validated design improvements.
• Ongoing Testing and Feedback: Continuously gather feedback through additional usability and A/B testing to ensure ongoing improvements.

I am fully committed to driving this redesign effort. I have already started with the homepage redesign and am prepared to lead the redesign of the other website sections. You can review the UX Audit for more details.

All feedback and suggestions are welcome. Your input is invaluable in making the AsyncAPI website better for everyone. Please feel free to share your thoughts and ideas in the comments.

cc @AceTheCreator @akshatnema @anshgoyalevil @sambhavgupta0705

[derberg]

Thanks for all the efforts!

As design noob, it is hard for me to share clear opinion.

I for sure want to be involved with refresh of the home page and its content.

Maybe you could record some video, or we could gater all maintainers on next community call where you could share a bit the scope of research you did (I did not learn much from looking into figma).

I think important is to get on the same page - as I'm definitely not on the same page with you now 😄

cc website maintatiners

@akshatnema @magicmatatjahu @anshgoyalevil @quetzalliwrites @thulieblack @TRohit20 @BhaswatiRoy @VaishnaviNandakumar @J0SAL @sambhavgupta0705

[quetzalliwrites]

Same, I'd also want to stay in sync with the proposed changes and the research. Would be cool to have her discuss in a meeting call too!

[Mayaleeeee]

Thank you both for your valuable input!

I completely understand how important it is to keep everyone in the loop about the proposed changes and the research I've done.

How about we do it during our next community call on July 9?

I'm excited to share more details and hear your thoughts during the call.

Thanks again!

cc @derberg @alequetzalli

[derberg]

sounds good to me

only problem is that next community meeting is europe's morning, not best for @alequetzalli

[Mayaleeeee]

sounds good to me

only problem is that next community meeting is europe's morning, not best for @alequetzalli

No problem!

We can reschedule it for 23rd instead. I'd love to have @alequetzalli join the call!

[jerensl]

Hi @Mayaleeeee, I already checked the Figma but can't find something related to interaction except for shadow effect. Personally, I like to use Material Design 3 on my side project, here are some docs related to Material Design 3 Interaction. Any scope for this maybe in the future to help as developer dealing with component interaction?

https://m3.material.io/foundations/interaction/states/applying-states
https://m3.material.io/styles/elevation/applying-elevation
https://m3.material.io/blog/tone-based-surface-color-m3

They're having some builders to help build the theme as well
https://m3.material.io/theme-builder#/custom

[toffee-k21]

have UI updates started? I would love to contribute to new UI development

[jayp5545]

Hi ! I would also love to contribute to the new UI. Can anyone share updates

[Mayaleeeee]

Hi @Mayaleeeee, I already checked the Figma but can't find something related to interaction except for shadow effect. Personally, I like to use Material Design 3 on my side project, here are some docs related to Material Design 3 Interaction. Any scope for this maybe in the future to help as developer dealing with component interaction?

https://m3.material.io/foundations/interaction/states/applying-states
https://m3.material.io/styles/elevation/applying-elevation
https://m3.material.io/blog/tone-based-surface-color-m3

They're having some builders to help build the theme as well
https://m3.material.io/theme-builder#/custom

Thank you @jerensl

[Mayaleeeee]

@toffee-k21 @jayp5545

Thank you for your interest in the proposal!

At this stage, we haven’t started the design process yet. I’m currently arranging a time for a general discussion with the community, focusing specifically on how designers can contribute to the project.

If you’re interested in participating, please join the conversation in the #design channel on our Slack Group. Alternatively, you can send me a direct message on Slack at Maya.

Looking forward to your involvement!

[akshatnema]

@Mayaleeeee Do let me know when you are scheduling the general discussion for this, and we can catup with the proposals + ideas there.

[Mayaleeeee]

@Mayaleeeee Do let me know when you are scheduling the general discussion for this, and we can catup with the proposals + ideas there.

Thanks, @akshatnema
I'm proposing the second week in September.

Please join the discussion here in the #design channel.

https://asyncapi.slack.com/archives/C02JW8DA0DC/p1725002072165279?thread_ts=1725002072.165279&cid=C02JW8DA0DC

[Mayaleeeee]

Hey folks
I'll be hosting a design onboarding call on the 12th of this month at 10 AM UTC. Part of the agenda is this website redesign proposal issue.

I would appreciate it if you could join the call so that you can better understand why I created the redesign issue, my thought process, and the idea behind it.

Thank you!

cc website maintainers
@akshatnema @magicmatatjahu @anshgoyalevil @quetzalliwrites @thulieblack @TRohit20 @BhaswatiRoy @VaishnaviNandakumar @J0SAL @sambhavgupta0705

[aeworxet]

I would suggest exercising a 'mobile-first' approach during the redesign, as it is prevalent these days.

[aeworxet]

I would suggest using the power of https://asyncapi.com being a Next.js app and alter the design approach as per #3193 (comment) (Figma link to the design,) utilizing the practice of serving to desktop and mobile devices a usual and a mobile-optimized versions of the website accordingly, and not limiting yourself anymore to serving a responsive design only in both cases.

If a company has enough funding, it is usual to create a separate version of a website for mobile devices (the m.* subdomains,) containing only absolutely required exports and images, to save traffic and computing resources of a device (because in the case of a simply responsive design, the mobile device still has to download all images meant for a desktop but then hide them; that doesn't serve performance.)

Since https://asyncapi.com is a Next.js app, https://stackoverflow.com/a/61519537 can be used to detect the type of a device at request time (by User-Agent string,) serving a limited version of the website in case of a mobile and utilizing Lazy loading later to improve performance even further.