[Site] KI Landing Page Feedback

[ShimonD-KlimaDAO]

First of all - I think this page is nothing short of gorgeous. I can't wait to show it off :) I have some feedback/suggestions. I didn't attempt to prioritize, but some things need to be fixed (such as translation tags, tablet failure, wrong redirct) before going into production.

• 1. IPad Chrome is not working. [Jabby] Sy tested this using browser stack and it did not appear to be an issue

• [x] 2. Missing translation tags. Here is Russian - missing all of the text in the middle:

3. There is no light/dark mode switch. When switching from light mode elsewhere in the site, the Infinity page always defaults to dark. [Jabby] This is intentional; the KI landing page is only available as a dark option given the design

• [x] 4. 'Contact Sales' at the top right redirects to the app. It should redirect here: https://notionforms.io/forms/klima-infinity-collab-request-form

The button in the middle of the page redirects to a different collaboration form as well.

5. I feel like having two "Contact Sales" buttons on the screen seems a bit redundant and too salesman-y for lack of a better term. Perhaps we should consider keeping the "Enter App" there as in the home page? [Jabby] the top nav is changing across all the website pages so this will likely be resolved

6. The Notion form we are linking to looks less professional than the Infinity page. I think it would help changing the Klima logo on the Notion form to match the white background, or removing it entirely. [Jabby] this is resolved within the scope of KI landing page by linking to the correct URL (https://notionforms.io/forms/klima-infinity-collab-request-form) Redesigned this form would need to be a separate task

7. I think it would flow/sound a bit better to write "for you business" rather than "for you organization": "Klima Infinity is a next-generation carbon toolkit for your organization". This appears at the very top and the very bottom of the page. [Jabby] reviewed by rittaaka, Oxymoron, and KTOR all prefer organization so will not change this

• [x] 8. The 4 featured offsetters are double counted - each appears twice. [Jabby] as per rittaaka's note, should be modeled after the Featured Love Letters section: https://www.loveletter.klimadao.finance/. See discord thread https://discord.com/channels/841390338324824096/968066710001319986/999797543145844747

• [x] 9. The arrow buttons (left/right) on the featured list aren't working well on Chrome. Sometimes one of them works, but both mostly aren't responsive. They are fine on Firefox and Brave. They are entirely missing on mobile.

• [x] 10. The featured list extends all the way to the left and right of the browser window, past the imaginary vertical lines I have in my mind when scrolling through the rest of the page. Is that intentional?

• [x] 11. "Easy-to-use" should be hyphenated when used as an adjective and a noun comes after it. (https://grammarhow.com/easy-to-use-or-easy-to-use/)

• [x] 12."Saving 30% or more" here seems a bit salesman-y and unclear. Change to "Real-time pricing, low transaction costs"

• [x] 13. I think "globally" should be changed to "worldwide" in this case.

• [ ] 14. The images behind "Fast", "Affordable", "Transparent", "Accelerate your path" look blurry. It's much more noticeable on mobile.

15. The "3" is a bit too bright for this part of the image. Also, I think it should say "carbon neutrality" rather than "carbon neutral". [Jabby] this is as per the design so we would need to get Go's opinion before changing. I also missed the content change recommendation. I think we pass on this one for now and review for a future iteration

• [x] 16. For consistency with the rest of the page/messaging, consider changing from "carbon negative" to "climate positive".

• [x] 17. I changed the following sentence to remove misuse of passive language and to make the language more direct and less wordy. I used Grammarly. It originally gave the sentence a score of 75% and found 5 issues.

Original: "By offsetting the historical emissions of their entire network, Polygon has ensured that every single interaction with the network - whether an NFT mint or a DeFi transaction - is accounted for and its environmental impact is offset. This is a key reason why Meta chose Polygon to issue its NFTs."

Suggested: "By offsetting the historical emissions of their entire network, Polygon has ensured that every interaction within its network - whether an NFT mint or a DeFi transaction - is taken into account. Meta chose Polygon to issue its NFTs for this important reason."

Approved Change: "By offsetting the historical emissions of their entire network, Polygon has ensured that every interaction within its network - whether an NFT mint or a DeFi transaction - is taken into account. This is a key reason why Meta chose Polygon to issue its NFTs."

18. "KlimaDAO" appears 5 times here. I think that's too much. Maybe we can change to "Our mission.." and "Visit our blog" at the very least? I would even remove all 5 mentions since it feels very excessive. [Jabby] content team reviewed this and prefer to keep as is, no change required

• [ ] 19. On mobile: I see the "fade to blue" style all being used up at the very top of the page, and solid black everywhere else. On desktop: solid black everywhere. The original design shows ablue fade more or less evenly distributed from top to bottom.

[jabby09]

3 is intentional; the KI landing page is only available as a dark option given the design

5 the top nav is changing across all the website pages so this will likely be resolved

8 is a known issue, I've asked rittaaka for input on how he wants to proceed

For anything that is a content suggestion I'll need to package those up and share with rittaaka, as he was the one who created the content for the page.

[jabby09]

@Go-Mori there are a few design related items in this feedback as well that you can comment on.

[ShimonD-KlimaDAO]

@goatsOnDrugs @ladytrekker @Atmosfearful @jabby09

**The show stoppers are:

2, 4, 8, 14, 19**

There is also the iPad issue (#1), but I would love to have someone else with an iPad try to replicate it before labeling it as a show stopper. Given that tablet traffic represents only 2% of our web traffic, I don't think it should be classified as a show stopper until we confirm it's reproducible.

[jabby09]

Thanks @ShimonD-KlimaDAO. @goatsOnDrugs @ladytrekker @Atmosfearful I would also add that some of the approved content changes should be quick fixes if we have to makes changes anyway.

So that would be: #11, 12, 13, 16, 17

I think Sy has an iPad, I'll get him to look at the first issue.

@Atmosfearful the other feature enhancement that goats was working on was putting in the Defi that defies...video in the spot where there is just an image. It was always the intention to include the video, but I don't think it is a show stopper.

[ladytrekker]

So to sum up, this is the priority:

2, 4, 8, 14, 19, 11, 12, 13, 16, 17

[ladytrekker]

UPDATE

Here is a new pull request https://github.com/KlimaDAO/klimadao/pull/550 See the open Todos in the PR description.

Here the new preview link https://klimadao-site-git-lady-ki-lp-klimadao.vercel.app/infinity 🔥 NOTE: NEW Translations are NOT WORKING on Preview Links 🔥

Let's keep further discussions in this ticket 🙏

Open Questions:

• Can you provide links for the card "Mark Cuban" and "Stadius" which open when clicking on the small LaunchIcon in the card?
• The card slider contains only 4 cards. Is that correct? If so, why have a slider function at all (on bigger screens)?
• The first "Get Started" button scrolls down to a section now instead of going away to "blog". Yes/NO?

[jabby09]

@ladytrekker thanks for this.

NOTE:

• number 12 I re-opened as the content change did not appear for me. Should read "Real-time pricing, low transaction costs"

Open Questions (Jabby Responses):

• Can you provide links for the card "Mark Cuban" and "Stadius" which open when clicking on the small LaunchIcon in the card? [Jabby] these should all to to the retirements summary page, so for those 4 cards so far: Olympus: https://www.klimadao.finance/retirements/0xe06efa3d9ee6923240ee1195a16ddd96b5cce8f7 Polygon: https://www.klimadao.finance/retirements/0x087a7afb6975a2837453be685eb6272576c0bc06 Mark Cuban: https://www.klimadao.finance/retirements/markcuban.klima Stadius: https://www.klimadao.finance/retirements/stadius.eth

• The card slider contains only 4 cards. Is that correct? If so, why have a slider function at all (on bigger screens)? [Jabby] No it is supposed to be more than the 4 cards. It should pretty much mimic what is on the Featured Love Letters (https://www.loveletter.klimadao.finance/). This is why there is a slider. I can find out for launch if we need all of these or just a select few.

btw, the Mark Cuban and Stadius Tonnes are the wrong number, at least according to the retirement summary pages.

• The first "Get Started" button scrolls down to a section now instead of going away to "blog". Yes/NO? [Jabby] no, it should go to the blog article: https://www.klimadao.finance/blog/klima-infinity-user-guide

[ladytrekker]

Thanks @jabby09

• Number 12 is done now
• "Get Started" Button in hero links to Blog Post too.
• Thanks for the links! These are integrated and makes more sense to me now too. The tons data is changed too. Just the small green date makes no sense if we link to the summary page and not to the single retirement with the actual retirement message?

[jabby09]

@ladytrekker repeating what I put in discord... I think ideally the cards would link to the pledge page, however, not all of the wallets have pledge pages (yet) and even if they do, some of them are not visually very good. For example, this is the pledge page for Polygon https://www.klimadao.finance/pledge/0x087a7afb6975a2837453be685eb6272576c0bc06 vs. their retirement summary page: https://www.klimadao.finance/retirements/0x087a7afb6975a2837453be685eb6272576c0bc06

I actually think the card should be a roll-up of all the offsets, which then as you say the date doesn't make a lot of sense.

[ShimonD-KlimaDAO]

@ladytrekker I spotted an issue on mobile (Android, Chrome) with translations. I know you said they won't work in Preview links, but the entire page is cut off when switching languages. Is this expected?

English:

Any other language:

[ladytrekker]

@ladytrekker I spotted an issue on mobile (Android, Chrome) with translations. I know you said they won't work in Preview links, but the entire page is cut off when switching languages. Is this expected?

Yes, this is because all translations have no corresponding message ID yet. This is because during development we do not extract other language files other than "en" and "en-pseudo" because no files are synched with translation.io anyways when developing on a feature branch. Also if a developer would change a translation file other than english => these gets overwritten as soon as the branch is merged to staging anyways. Therefore we decided to only extract english during development.

As soon as a branch is merged to staging => all new translations get generated and you can switch languages again on staging (which all default to "english" if no translation exists yet).

I extract the translations now for you and pushed them to the preview branch. This is how it would look later on staging too. As you can see => every locale falls back to english. We can test languages only when the branch is done and merged to Staging and when the translators did their work afterwards on translation.io.