search

KlimaDAO / klimadao

Monorepo for the official KlimaDAO site, dApp, components and design system.
https://klimadao.finance
MIT License
92 stars 74 forks source link

[demo] MVP design enhancements #1903

Closed jabby09 closed 9 months ago

jabby09 commented 10 months ago

MVP link https://carbonmark-git-emc-feature1823-demo-package-klimadao.vercel.app/retirement-demo

Design review and suggestions to improve. If dev time permits, what else could we add to the page.

Note..we only have 1 week remaining of dev time so any design feedback needs to be simple to implement.

0xtapi commented 10 months ago

Few ideas for this section: Screenshot 2023-11-17 103350

  1. What about making the small battery symbol next to "Renewable Energy" Klima green (or leave the battery, but make the background of that element green)? Right now, the site is very gray on gray with a touch of gray. Some color might be cool.

  2. Is the selection of credits a placeholder? If not, we could offer a wider selection, like the cheapest credit we have, the cheapest nature-based credit, and top tier credits (Mangrove's listing?).

On a more general note: The site currently uses "Offset" as the term to retire carbon. On Carbonmark, we always call it retire. I recall Marcus mentioning we should steer away from "Offset" because of negative connotations. Maybe replace some of the wording, e.g. turn "Offset the emissions generated..." into "Compensate for the emissions generated...". Label the buttons "Compensate" maybe? "Retire" could be a bit technical...

Not too sure about the best path here, but "Offset" might not be the optimal solution.

jabby09 commented 10 months ago
  1. What about making the small battery symbol next to "Renewable Energy" Klima green (or leave the battery, but make the background of that element green)? Right now, the site is very gray on gray with a touch of gray. Some color might be cool.

Overall this page should match Carbonmark branding, no Klima green should be in the demo app. The cards I believe will match the CM marketplace cards.

jabby09 commented 10 months ago

2. Is the selection of credits a placeholder? If not, we could offer a wider selection, like the cheapest credit we have, the cheapest nature-based credit, and top tier credits (Mangrove's listing?).

Yes these are placeholder. The actual projects/credits will be from EcoRegistry but that is still being worked on.

jabby09 commented 10 months ago

The site currently uses "Offset" as the term to retire carbon

Yes agree, this is all placeholder content. Will need a review from marketing and the content term but overall agree should avoid use of work Offset.

theprofessora commented 10 months ago

Here are my thoughts:

  1. on shorter computer screens, the top logo is cut off. Let's add some padding to the top of the page
  2. let's add in the carbonmark landing page header so people can check us out if they want
  3. let's add in an h1
  4. the map component stretches all the way across the page, making it very difficult to scroll using the mousewheel because on most of the page, scrolling the mousewheel just zooms the map instead of scrolling the page.
  5. Let's put all the content on a card so we can contain all the form actions to one central location (using the drop downs and interacting with the map). this also makes the page look a little more organized
  6. on the desktop version, let's add in a big, but very faint, watermark so we have some visual intricacy

you can see my edits here: https://www.figma.com/file/xvIkQnzm55XPvxYgxobssN/COP-Quick-Offset-Tool?type=design&node-id=1-3&mode=design

jabby09 commented 10 months ago

@Atmosfearful see professors suggestions and design file above. Leaving this now with you to action as required.

0xemc commented 10 months ago

Here are my thoughts:

  1. on shorter computer screens, the top logo is cut off. Let's add some padding to the top of the page
  2. let's add in the carbonmark landing page header so people can check us out if they want
  3. let's add in an h1
  4. the map component stretches all the way across the page, making it very difficult to scroll using the mousewheel because on most of the page, scrolling the mousewheel just zooms the map instead of scrolling the page.
  5. Let's put all the content on a card so we can contain all the form actions to one central location (using the drop downs and interacting with the map). this also makes the page look a little more organized
  6. on the desktop version, let's add in a big, but very faint, watermark so we have some visual intricacy

you can see my edits here: https://www.figma.com/file/xvIkQnzm55XPvxYgxobssN/COP-Quick-Offset-Tool?type=design&node-id=1-3&mode=design

Some additional context for this one, the demo is intended to be shown on an Ipad/tablet during the COP summit so keep that in mind in regards to the user visiting carbonmark itself and layout stuff (mouse scrolling etc)