[prototype] New Landing Page (Sajen & Arnab)

[sajen-k]

The prototype for our new landing page (complete with value proposition, benefits, CTAs, and Unique Selling Points) is now complete. I'm asking mentors, volunteers, technical writers, and other community members to review the landing page prototype and provide feedback and suggestions; if there are any improvements that need to be made, we'll make them. You can view the new landing page here, and make a suggestion.

The above link is a prototype of the website; because there are no vertical scrollbars on this prototype, you must use the trackpad or mouse wheel to scroll down if you are using a mouse. We've also included the website design here. Please review and make sure to provide your feedback and recommendations regarding landing page designs.

Arnab has included a full explanation of the landing page design with value propositions in our mailing list, so please take a look at it in our mailing list here. You can also post your recommendations in the mailing list thread.

We'll start working on the implementation phase once the designs and value propositions are approved.

[proudofsimin]

Hi @sajenjeshan1222, I'm sorry for missing out this request. I wasn't aware of things outside pull requests. Please see my comments below and feel free to contact me if we need further talk. Thank you.

1. In features, please only capitalize the first letter each line, except for the technical terms. (e.g ~p~[P]rocess execution, Room ~M~[m]anagement)
2. why do we need a period at the end? btw, do you think if it's better if we align these three words to the same pattern? Like three adjectives? How about using "easy-to-use" or "multi-language" to replace "open source" (I guess you could find a better word)?
3. In developers' portal, is there any reason that you remove the explanation section?
4. For each topics (developers' portal, talks, honors and awards, ...), I could see that you put the topics that are in green box on the left side, but sponsors is also on the left. In addition, I felt a bit confusing when I had to scroll my eyes left and right for the topics. How do you think if we centralized all of them?
5. Could you align the sequence of topics to the document order, which is: introduction, tutorials, how-to guides, reference, and explanations.

Simin

[sajen-k]

@proudofsimin Thank you for the review.

1. In features, please only capitalize the first letter each line, except for the technical terms. (e.g ~p~[P]rocess execution, Room ~M~[m]anagement)

I have capitalized the first letter of each line in the features and I have doubt, In the features section for example if we took the 1st point "User-interface interaction" should I capital only the first word or the upcoming word after the "-", other words it's fine I understood and capitalized the first word as you said but when there is a word with "-" should I capitalize only the first word or the upcoming word after "-" because in the case the 1st point "User-interface interaction" is an acronym (UI interaction). Like what do u mean by "except for the technical terms".

2. why do we need a period at the end? btw, do you think if it's better if we align these three words to the same pattern? Like three adjectives? How about using "easy-to-use" or "multi-language" to replace "open source" (I guess you could find a better word)?

I have removed the period at the end, then I have replaced the word "opensource" with "easy to use" and also I replaced the existing "Multiplatform" with "Cross platform". If you think any changes must be done here please let me know.

3. In developers' portal, is there any reason that you remove the explanation section?

Yes, the reason why we added the Developer's portal section in the first place because all the developers and chatbot makers and others come to wechaty to add wechaty chatbots to their projects or to use wechaty chatbots in the case that users needs it, so the developer's portal sections aims to help the users to implement the chatbot and to get started with wechaty as soon as possible, developers actually looks for information's like how to get started to use wechaty chatbots and the API references and to learn about wechaty but the explanation sections actually covers about what is RPA and what is conversational AI etc.., which I think that the developers actually knows about the AI, NLP things in the explanation section. If you think that the explanation section must be added to the developer's portal surely we can add it , please feel free to share your thought about this so that we can discuss and add the explanation section.

4. For each topics (developers' portal, talks, honors and awards, ...), I could see that you put the topics that are in green box on the left side, but sponsors is also on the left. In addition, I felt a bit confusing when I had to scroll my eyes left and right for the topics. How do you think if we centralized all of them?

I can understand, I have changed all the topics towards left side so that now I think users can find the topics easily.

5. Could you align the sequence of topics to the document order, which is: introduction, tutorials, how-to guides, reference, and explanations.

Done ! I have aligned it correctly now.

I have made the changes as I said above and you can view all the changes in the same link that you visited before to view the prototype. If there is any changes or any feedbacks please let me know. Thank you.

[proudofsimin]

Hi @sajenjeshan1222,

Thank you for your reply. I really really love your design. It's so cute! For your question about user interface, I wasn't sure so I found Apple Style Guide to help me. Please use i for interface. Thank you.

[sajen-k]

@proudofsimin Thank you for the review, I have made the necessary changes and you can view the changes in the same link that you visited before to view the landing page prototype. If there is any changes please let me know. Thank you.

[proudofsimin]

Hi @sajenjeshan1222, No more question from my side. Appreciate your work :)

[huan]

Hi Sajen and Arnab,

Thank you for creating this issue for discussing the landing page draft. After I review your great draft design image, I feel that the value proposition, benefits, CTAs, and Unique Selling Points look all good, appreciate all the efforts you have made so far!

I'd like to add the following comments to our draft:

1. Use minimum non-default CSS: I'd like to make our docs site re-use the default docusaurus CSS(style) as much as possible, which means that we should try our best to not create new CSS code as possible as we can. Only create CSS when there's a MUST, and make sure to manage that css in one css file.
2. Start wording: please start preparing/wording the text materials, like the "Features", "Voice of developers" (as well as the developer profile avatar, etc).
3. 1 PR for 1 component: start creating the draft PR for the landing page, with each component per PR. For example, the "Features" should use one PR, and "Voice of developers" should use another PR, CSS related should use a separated PR as well.
4. Introduction video: start to design the video layout in our landing page, and make a placeholder for it.

I'd like to see a draft version after we have followed the above 4 comments with PR, and we can make it update to online docs to make it clear for everyone and continue to improve it and merge to master.

@proudofsimin Thanks to Simin for the styling suggestions, appreciate it!

[sajen-k]

Thank you for the review and feedback @huan

1. Use minimum non-default CSS: I'd like to make our docs site re-use the default docusaurus CSS(style) as much as possible, which means that we should try our best to not create new CSS code as possible as we can. Only create CSS when there's a MUST, and make sure to manage that css in one css file.

Yes, we will surely try our best to use the existing docusaurus CSS styles, we will also try to avoid not creating a new CSS code and use minimum non-default CSS. Thank you!

2. Start wording: please start preparing/wording the text materials, like the "Features", "Voice of developers" (as well as the developer profile avatar, etc).

• In the "Voice of developers" section for the developer quotes we will be adding the quotes that you have mentioned in the blog post "Reconstruct Wechaty landing page with value propositions" as GitHub wiki page here (Voice of developer). We have the developer quotes to add in the "Voice of Developers" section but for the developer avatars we are unable to find some avatar and some developer don't have an avatar or it's missing, so I would like to ask that what can we replace in the place of missing developer avatars?
• Sorry, I am unable to get you like what do u mean by start working/preparing text material like you mean to change the title of the "Features" section or you mean to add some more contents and texts under the "Features" section or you mean to start creating the PRs for those sections?

3. 1 PR for 1 component: start creating the draft PR for the landing page, with each component per PR. For example, the "Features" should use one PR, and "Voice of developers" should use another PR, CSS related should use a separated PR as well.

Yes, I understood and we will make 1 PR for each section and for each component as you said. I think it will be really great and easy to do in this way and thank you for the instructions.

4. Introduction video: start to design the video layout in our landing page, and make a placeholder for it.

ok huan, we have started to design a placeholder for our introduction video on our new landing page. I will update you soon once the placeholder is ready for the introduction video in our landing page prototype, which is going to be placed in our new landing page and you can view the changes in the same link that you visited before to view the landing page prototype.

I'd like to see a draft version after we have followed the above 4 comments with PR, and we can make it update to online docs to make it clear for everyone and continue to improve it and merge to master.

Sure huan, Once the landing page prototype is completed from top to bottom and when this landing page prototype is finalized with all changes made then we will start working on the implementation process by producing PRs because when the landing page prototype is completed and finalized then we can just completely focus on making PRs as you said which will be best and perfect!

If there are any changes please let me know. Thank you so much for the valuable comments and review.

[Rohitesh-Kumar-Jain]

I feel it will be a good idea to show the 6 lines of code that we are talking about (Dingdong bot ig) on the landing page. Maybe like them https://reactjs.org/

You can also take help from some other landing page templates available on Github.

[sajen-k]

I feel it will be a good idea to show the 6 lines of code that we are talking about (Dingdong bot ig) on the landing page. Maybe like them https://reactjs.org/

You can also take help from some other landing page templates available on Github.

Yes, I understand, and once I finish the current prototype, I will add the six lines of code to the new landing page. The concept you provided is very great, and I will definitely work on it once I finish coding the current landing page, since if I finish coding the current prototype implementation, it will be easy for me to incorporate further ideas and corrections provided. Thank you very much.

[Rohitesh-Kumar-Jain]

Hi @sajenjeshan1222

You were talking about some voice of developers in the meeting, could you please elaborate here on what exactly you require? I mean how many voices do you want, etc

[huan]

Dear @sajenjeshan1222 and @encodeArnab

Thank you very much for working on the landing page in the past weeks!

I'd like to suggest that we should start planning to create PRs for review. Please remember that we should follow the "1 PR for 1 component" rule: we start creating the draft PR for the landing page, with each component per PR.

For example, the "Features" should use one PR, and "Voice of developers" should use another PR, CSS related should use a separated PR as well.

On the other hand, I'd like to the progress of our introduction video on our landing page: have we started working on it? when could we expect it to be finished, and what's the budget for it? Please let me know and so that we can be well prepared with it.

P.S.: I love the below idea from @Rohitesh-Kumar-Jain : https://reactjs.org/ looks really good.

I feel it will be a good idea to show the 6 lines of code that we are talking about (Dingdong bot ig) on the landing page. Maybe like them https://reactjs.org/

BTW: I have found that @encodeArnab has not joined the Wechaty org as a team member yet, so I have just sent an invitation to @encodeArnab, please accept it by following the below message:

You've invited Arnab to Wechaty! They'll be receiving an email shortly. They can also visit https://github.com/wechaty to accept the invitation.

[Rohitesh-Kumar-Jain]

Another thing I think can be added is contrast, most landing pages have a contrast between different parts of the page, but the current landing page consists of a single color theme.

Here's an example of a website having contrast https://www.shopify.in/

[sajen-k]

Hi @sajenjeshan1222

You were talking about some voice of developers in the meeting, could you please elaborate here on what exactly you require? I mean how many voices do you want, etc

Hi @Rohitesh-Kumar-Jain I mean that I have all voice of developers and you can take a look at all the voice here. What I mean is that in the new landing page prototype there is a section called voice of developers and that section tells voice of developers and what developers think about Wechaty and you can see in the prototype, the layout that I have designed is that it has developer voice and corresponding developer photo, so I have the voice of them to add in the section but for the avatar in the voice of developer section I don't have photo to add to the corresponding voice.

Please take a look at voice of developer section in the the new landing page prototype here. [The link is a prototype of the website; because there are no vertical scrollbars on this prototype, you must use the trackpad or mouse wheel to scroll down if you are using a mouse]

[sajen-k]

Thank you for the response @huan

Dear @sajenjeshan1222 and @encodeArnab

Thank you very much for working on the landing page in the past weeks!

I'd like to suggest that we should start planning to create PRs for review. Please remember that we should follow the "1 PR for 1 component" rule: we start creating the draft PR for the landing page, with each component per PR.

For example, the "Features" should use one PR, and "Voice of developers" should use another PR, CSS related should use a separated PR as well.

Yes, we will create a single PR for a single component. We're going to finish the landing page, so once we finish some integration things in the new landing page, we'll run some tests to see if it's stable, and then we'll start producing PRs as per your instructions, and in the coming weeks you'll be able to see our PRs, I'll finish the whole landing page, and I'll also make sure the new landing page is integrated without any bugs, and then we'll start producing PRs.

On the other hand, I'd like to the progress of our introduction video on our landing page: have we started working on it? when could we expect it to be finished, and what's the budget for it? Please let me know and so that we can be well prepared with it.

• For the introduction video on our new landing page we have created a placeholder for it and you can see it in our new landing page prototype link that you visited before.
• The introduction video will be ready soon, and I am working with the ADVIDS team on it. I have shared the first storyboard draft of the introduction video in our community mailing list, and I have also sent you an email about the complete progress of the introduction video project. I am also ensuring that the new landing page and the introduction video are syncing properly.
• Once the introduction video is ready I will let you know and the video will be ready soon in upcoming weeks, Valerie should decide on the budget, as you said to me before.

P.S.: I love the below idea from @Rohitesh-Kumar-Jain : https://reactjs.org/ looks really good.

I feel it will be a good idea to show the 6 lines of code that we are talking about (Dingdong bot ig) on the landing page. Maybe like them https://reactjs.org/

Yes, I think that this is a wonderful and good concept. Once I complete coding the new landing page and ensure that it is properly integrated and free of problems, I will begin working on this idea and implementing it, and I will create a separate PR for this task.

BTW: I have found that @encodeArnab has not joined the Wechaty org as a team member yet, so I have just sent an invitation to @encodeArnab, please accept it by following the below message:

You've invited Arnab to Wechaty! They'll be receiving an email shortly. They can also visit https://github.com/wechaty to accept the invitation.

I have informed Arnab regarding it and now he have joined.

[Rohitesh-Kumar-Jain]

This was the principle I was talking about in the meeting https://thelandingpagecourse.com/landing-page-design-principles-contrast/

[sajen-k]

Hi @huan when can we merge the PRs?

[Rohitesh-Kumar-Jain]

Hi @huan when can we merge the PRs?

In #1271 you need to resolve my request, in that PR only after that we can proceed.

[Rohitesh-Kumar-Jain]

I have given you both quotes and images, still, it's not implemented

[Rohitesh-Kumar-Jain]

Tagging : #1354