Feature Request: Redesign the Talawa Documentation Homepage

[ishitakapoor26]

Is your feature request related to a problem? Please describe. Enhance the user interface of the Talawa Documentation Homepage to increase user engagement on the website.

Describe the solution you'd like

1. Propose a static design on Figma.
2. Code the proposed design.

Please assign this issue to me.

[palisadoes]

Please add screenshots for your design options here.

[iamyelex]

@ishitakapoor26 can I join you in redesigning the homepage?

[nangahamandine]

Hello @ishitakapoor26, I am working on an FAQ section for the talawa-docs website. It's a new feature which will be added to the website Considering that you will be working on a redesign of the UI to improve the UX of the website, I'd like to suggest that we find a way to add the FAQ section in the Figma design before implementing the final design in the code

[ishitakapoor26]

@ishitakapoor26 can I join you in redesigning the homepage?

Thanks for reaching out but I think I won't be requiring any assistance for now. But I'll reach you out for collaboration, in case I need help.

[ishitakapoor26]

Please add screenshots for your design options here.

Sure, I'm on it!

[palisadoes]

@ishitakapoor26 take note of @nangahamandine 's comment. @nangahamandine will have content that will need to be added. Her input will be required. Please take a look here:

• https://github.com/PalisadoesFoundation/talawa-docs/issues/340

This is important.

[palisadoes]

• Collaboration is going to be required.
• @nangahamandine Is there a way for you to add your content now so that it can be integrated into the final homepage design when required?

[palisadoes]

The strength of our community rests in collaboration. Please take heed.

[nangahamandine]

• Collaboration is going to be required.

  • @nangahamandine Is there a way for you to add your content now so that it can be integrated into the final homepage design when required?

Sure, I'm working on it

[ishitakapoor26]

@nangahamandine please create a PR. I'll merge the changes with my design code and design as well. Besides this, could you please share your slack ID so that we can get things to work at the design end as well.

[iamyelex]

@ishitakapoor26 can I join you in redesigning the homepage?

Thanks for reaching out but I think I won't be requiring any assistance for now. But I'll reach you out for collaboration, in case I need help.

Okay. Thanks

[nangahamandine]

@nangahamandine please create a PR. I'll merge the changes with my design code and design as well. Besides this, could you please share your slack ID so that we can get things to work at the design end as well.

Nangah Amandine

[nangahamandine]

Quick question Do you think the FAQ section should be added up or down?

[palisadoes]

Isn't it going to be on the home page? We won't need the links.

[ishitakapoor26]

I am thinking to add it in various ways, on the nav bar, footer, as well as a faq section. It will be easy to navigate through. Let me know your views.

[nangahamandine]

I am thinking to add it in various ways, on the nav bar, footer, as well as a faq section. It will be easy to navigate through. Let me know your views.

My thoughts as well The FAQ section should be displayed when the "FAQ" title is clicked right?

[nangahamandine]

Unless @palisadoes has other thoughts Would be nice for us all to be on the same page

[ishitakapoor26]

@nangahamandine don't add faq links because I'm altering the nav bar, only add a faq section and raise a PR.

[nangahamandine]

Hello, I've opened a pull request for the FAQ section in the link below https://github.com/PalisadoesFoundation/talawa-docs/pull/364 Will be updating the documentation in another branch @palisadoes please review

[ishitakapoor26]

Please review the design. https://www.figma.com/file/HsIZFQWzMhHZRmsXTctG35/Talawa-Documentation-Homepage?node-id=0%3A1&t=2zAG1BcFry8ydrqD-0

[ishitakapoor26]

Below are the screenshots of the website design:

[ishitakapoor26]

@palisadoes please suggest changes, if any. So that I can proceed with the coding of the page.

[nangahamandine]

Awesome work @ishitakapoor26 Wasn't expecting the FAQ section to look so different

[ishitakapoor26]

Check this one as well:

[nangahamandine]

I think the first design gives the look and feel of the Talawa original Homepage better than the second Also check this documentation for style guides https://docs.talawa.io/docs/design/ux/ux-talawa

[nangahamandine]

Also, in my opinion the FAQ section shouldn't have drop downs but rather displayed in text form

[iamyelex]

the design is nice. But the FAQ section should be a drop bar. the answer should only show when a users clicks on it

[ishitakapoor26]

the design is nice. But the FAQ section should be a drop bar. the answer should only show when a users clicks on it

Yes it is the same.

[ishitakapoor26]

Also, in my opinion the FAQ section shouldn't have drop downs but rather displayed in text form

No, it would mess up the page and lead to bad user experience.

[ishitakapoor26]

I think the first design gives the look and feel of the Talawa original Homepage better than the second Also check this documentation for style guides https://docs.talawa.io/docs/design/ux/ux-talawa

The second design is according to the suggested color palette and design guidelines, in the above figma file.

[ishitakapoor26]

@palisadoes @Cioppolo14, shall I proceed with the coding part if you agree with the designs?

[palisadoes]

The delay is because we’ve both been very busy with this and other repositories.

I want to challenge you some more.

The home page will be catering to administrators who want to manage their teams. So the layouts need to have people not clipart. The focus needs to be on the various features, advantages of using each of these features and how that will benefit the organization, not the IT team.

We need a more modern template, possibly one with screen width images and/or graphics. We are a small group of volunteers, and we need to project ourselves globally with confidence. Therefore we need the look of a Fortune 500 company on the home page. What’s behind the home page can be updated later.

Take a look at these global and industry specific sites for inspiration.

1. ChurchCRM
2. Infosys
3. Nokia
4. Tata
5. SalesForce
6. Cisco
7. Microsoft
8. Nestle
9. Bua Foods

Take a look at the Talawa Branding Requirements We need to make sure the design incorporates subtle elements of the Talawa color scheme.

It needs to be world class. Surprise us!

[ishitakapoor26]

The delay is because we’ve both been very busy with this and other repositories.

I want to challenge you some more.

The home page will be catering to administrators who want to manage their teams. So the layouts need to have people not clipart. The focus needs to be on the various features, advantages of using each of these features and how that will benefit the organization, not the IT team.

We need a more modern template, possibly one with screen width images and/or graphics. We are a small group of volunteers, and we need to project ourselves globally with confidence. Therefore we need the look of a Fortune 500 company on the home page. What’s behind the home page can be updated later.

Take a look at these global and industry specific sites for inspiration.

1. ChurchCRM
2. Infosys
3. Nokia
4. Tata
5. SalesForce
6. Cisco
7. Microsoft
8. Nestle
9. Bua Foods

Take a look at the Talawa Branding Requirements We need to make sure the design incorporates subtle elements of the Talawa color scheme.

It needs to be world class. Surprise us!

Sure, on it. Thanks for the feedback!

[palisadoes]

@ishitakapoor26 How's progress on this? Do you have any shortlist designs?

[ishitakapoor26]

@ishitakapoor26 How's progress on this? Do you have any shortlist designs?

Yeah, it's almost done...will be sharing some by eod. Apologies for the delay. I am not well, but yes trying my best to finish off the task.

[ishitakapoor26]

Please review these designs, @palisadoes, @Cioppolo14 :

---

---

---

---

---

---

---

---

Figma File Link: https://www.figma.com/file/TbkeLl1QSopOvayHeQcWbM/Talawa-Palisadoes?node-id=0%3A1&t=6HYPGHPOR0XUtmRl-0

[palisadoes]

Thanks. This is a good start. Let's do one or two iterations of this and try to get the page updated in a week or two. We can reopen this to get even better improvements right afterwards.

1. Can the menu bar stay static at the top?
2. We won't need the contact us section
3. We'd need a link to Palisadoes in the menu (Or in the footer depending on space)
4. How do you propose to handle the links to the links below? I think links to them should be on a docs/ docusaurus page
   1. https://docs.talawa.io/talawa/index.html
   2. https://docs.talawa.io/talawa-api/schema/index.html
5. The section with the slider cards could have pictures of people in a community setting. Detailing features of Mobile, Admin and the API
6. We don't need the FAQ section on the home page, we'll have a dedicated page.
7. Yellow lettering and icons on green is hard to see. We should use Talawa's green.
8. Where would the blog posts come from? Can they be retrieved automatically from another site like palisadoes.org?
9. The contact link should go to the contact page for palisadoes.org
10. I think the features section with the hand should be just below the slider. Features are the most important thing
11. The cards currently below the slider can be where the hand is now.
    1. One could have the GitHub logo and link to the Palisadoes Foundation organization page on GitHub
    2. The other should probably have a combination of logos for GSoC and Outreachy with blurb about the internship programs.
12. The call to action should link to the Palisadoes donation page
13. What is the best way to source images? Should we have a contest on slack with the winners getting their photos posted on slack? The photos can come later, but comments are welcome.

@Cioppolo14 Does this work for you?

[ishitakapoor26]

Sure, we can go with one or more iterations. During the process, I will continue brainstorming the improvements I can certainly suggest to make it look even better.

1. Since it's a design, some features weren't that lively and need to be explained: a.) Nav Bar will be fixed. b.) Each section will have hover and transition effects.

2. As suggested, the Contact Us section will be removed and the navbar contact menu will be navigated to the contact page of palisadoes.org.

3. In the About Us card, I will add Learn More button which will navigate to the Palisadoes website.

4. The links to the mentioned URLs will be added in the following manner: a.) The Docs option in the navbar is a drop-down menu. When you hover over it, a drop-down menu appears, providing options to navigate to the talawa package and talawa API. b.) Also, after the header slider, we have two cards namely, Talawa docs and Talawa API to link the URLs.

5. Yes, nice thought. I can even prepare a few suitable mockups for the mobile app to fit the theme and requirements well (as you suggest). Just to clarify, which slider cards are you referring to here? (The header ones or the about us)

6. Okay, will not include.

7. Sure, I will send the changed theme design.

8. For now, I am thinking to retrieve the blogs from palisadoes.org. About automated retrieval will have to look into it. I will try my best to make it automatic.

9. Please refer to the second point.

10. Agree on that, and will do the change.

11. i. Yes, when we place the cursor on the cards, a transparency layer appears on the card with the GitHub logo (linked to the repository) on it. ii. A good point, must agree. I will add a horizontal row of internship programs with the same hover effect as described in the above point, including a small description of the programs.

12. Yes, it does the same job.

13. Yeah, a contest is a great thought, indeed! Would empower creativity and community engagement.

Add On:

i. I would like to further describe the functionality of the Get Started Here button under Want to Learn More banner. When you click on the button, a new section appears just after Want to learn more banner, describing every feature through slider cards. Open to suggestions on this one.

ii. To generate different mockups for different features, I will be needing live application screenshots to design the mockups. So, please provide the reference to the screenshots or app.

[palisadoes]

Thanks again.

1. The "learn more" pages related to Talawa should link to a page in the docs site.
2. Point ( 5 ) is for the about us
3. You may be able to get the blog posts using the palisadoes.org's RSS feed..

[ishitakapoor26]

Thanks again.

1. The "learn more" pages related to Talawa should link to a page in the docs site.
2. Point ( 5 ) is for the about us
3. You may be able to get the blog posts using the palisadoes.org's RSS feed..

Thanks for the clarification :)

[Cioppolo14]

The comments make sense to me. I'm going to get started on finding some images for this.

[palisadoes]

@ishitakapoor26 Are you ready to submit a initial PR for this? The requirements have been set. Don't wait for contributor supplied photos. Please use open source photos to convey what we want.

[salman-farooqi]

@ishitakapoor26 Are you ready to submit a initial PR for this? The requirements have been set. Don't wait for contributor supplied photos. Please use open source photos to convey what we want.

Normally, one issue is assigned to one person but as this a big issue and can be split https://github.com/PalisadoesFoundation/talawa-docs/issues/390#issuecomment-1463106341. I would love to work on the design ideas, HTML and CSS. Thank you!

[palisadoes]

@ishitakapoor26 Are you ready to submit a initial PR for this? The requirements have been set. Don't wait for contributor supplied photos. Please use open source photos to convey what we want.

Normally, one issue is assigned to one person but as this a big issue and can be split #390 (comment). I would love to work on the design ideas, HTML and CSS. Thank you!

It's a one page redesign. It can be handled by a single issue.

[ishitakapoor26]

@ishitakapoor26 Are you ready to submit a initial PR for this? The requirements have been set. Don't wait for contributor supplied photos. Please use open source photos to convey what we want.

Yes, I am on it. Will create a PR soon!

[ishitakapoor26]

I needed crisp content for the website. Because I have written code for sample content and have to replace it with the actual one. So, it would be great if you can suggest me some resources to collect the required data. Moreover, I wanted to know if I can create a single PR and keep adding different sections to it to keep track.

[palisadoes]

Please source your own free, open source images. We can then challenge people to replace them with our own. One PR will be enough.

[palisadoes]

Try to find royalty free images of people working in communities. That will be a good start

[ishitakapoor26]

Okay sure. Thanks for clarifying me :)

[palisadoes]

@ishitakapoor26 We need a valid submitted PR in 12 hours. It's been two weeks and there are many others in the Talawa-Admin repository with typescript experience who could implement this in a couple days. I will close the issue if there isn't any progress after that deadline.