NRGI / resourcecontracts.org

Resource Contracts
http://resourcecontracts.org
GNU General Public License v2.0
16 stars 9 forks source link

Homepage redesign #873

Closed anjhero closed 7 years ago

anjhero commented 8 years ago

This refers to this issue#186. The discussion in the previous issue has become too long and is quite hard to follow.

Here's the design with suggested changes:

homepage

@jedm You mentioned the countries and resources sections from the current design as well. Do you think it would be necessary to have those regions with the map and the stats section (with 3 big numbers)?

@anjesh @manishgs @charlesyoung @KaitlinCCSI @anderspeders

anderspeders commented 8 years ago

Thanks @anjhero,

I have previously requested to have the menu located in bottom right corner as horizontal view: https://github.com/NRGI/resourcecontracts.org/issues/186#issuecomment-193579274

Keen to hear other comments?

SamCCSI commented 8 years ago

CCSI feedback:

The page is now very long. Is this necessary / useful / effective?

the page is very busy and pulls your attention in two directions (1 - the search box and 2 - the new pop-out box box with the set of three numbers and contract below).

Will the contract that is shown in that pop-out box be a set contract, or will it change each time a user visits the page? As is, it is not very intuitive to have it there. What is its function?

The "burger" menu on the top left is quite small, so users may miss it.

Some ideas to address this

jedm commented 8 years ago

@SamCCSI and CCSI team

I think that the "explore" option is offered quite effectively by the numbers and the sample search.

I'm sure we could consider resizing things a bit but I would argue that the different elements now on the page are the right ones. (If I was going to eliminate any it would be the map.)

When we requested the Country Partners section it was requested as a list not as images. So I agree that these boxes (while pretty!) may add to a sense of visual overwhelm -- especially if we want to list multiple country partners.

Otherwise, I think this is a good direction.

Instead of making this thread super-long, may I suggest that Anders or Chris share any thoughts next?

Best,

Jed

anjhero commented 8 years ago

Here's the same design but without the Country Partner section:

homepage

If we're good to go with this design, we can start implementing it.

jedm commented 8 years ago

Anjan please stand by for final feedback notes before implementing.

On May 11, 2016, at 11:18 PM, Anjan Shrestha notifications@github.com wrote:

Here's the same design but without the Country Partner section:

If we're good to go with this design, we can start implementing it.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

jedm commented 8 years ago

@anjhero here is final feedback and questions:

for Country Partners section We like the graphical approach you added. However, before sign off please make the following changes:

for Map Thank you for changing default map image. Final adjustments:

Under the "3 numbers" For space to right of Search bar under the 3 numbers, please ask your designer to make following changes:

"Arbitration and dispute resolution" (goes to http://www.resourcecontracts.org/search?q=&country%5B%5D=cd&country%5B%5D=lr&country%5B%5D=mn&resource%5B%5D=Gold&annotation_category%5B%5D=Arbitration+and+dispute+resolution%2F%2FArbitrage+et+règlement+des+différends)

"Environmental impact assessment" (http://www.resourcecontracts.org/search?q=&annotation_category%5B%5D=Environmental+impact+assessment+and+management+plan%2F%2FEtude+sur+l%27impact+environnemental+et+plan+de+gestion)

"Income tax: exemptions" http://www.resourcecontracts.org/search?q=&annotation_category%5B%5D=Income+tax%3A+exemptions%2F%2FImpôt+sur+les+bénéfices%3A+exonération

Search box Change "An online repository of" to "A repository of"

New "Intro text" bar For text currently reading "This site applies extensive machine-based..."


for scrolling of 3 or more Country Partners

scroll_partners

KaitlinCCSI commented 8 years ago

And since OLC does not yet have country partners, the country partners area should be hidden on the OLC home page until we do have one to feature there. Thanks.

anjhero commented 8 years ago

Hi all,

We will send you the design update on Monday, 30th May, 2016.

All the questions/ suggestions will be addressed in the new design. For one of the questions asked by @jedm :

The colors in the map are for displaying quantity of documents in each country. The countries with lighter shade of documents have less number of documents and the countries with highly saturated hue has the largest number of documents. The greyed out ones are countries without any documents. Since we have data that represent numbers for each country, we'd suggest to go with this choropleth map. Looking forward to hear from you on this.

anjhero commented 8 years ago

Hi all,

Here's homepage design based on the feedback: homepage iii

I've added a country selection portion in the search section referred by @anderspeders in #803 . Because of the space constraint, I've simply added a globe icon to represent countries. This work as follows: homepage-search--choose-country - 1 homepage-search--choose-country - 2

However, my initial understanding was the country option will appear on the advanced search option: homepage-advanced-search

Looking forward to hear from you.

jedm commented 8 years ago

Dear @anjhero - please post an "annotated version" of the mockup naming font names and font sizes for all fonts visible (except in footer). More notes to come below. Thanks.

jedm commented 8 years ago

1) Text inside Search box:

2) Remove country drop down function (We decided against this)

3) Change button text to “Search” (one word)

4) Remove pop-up function from Advanced Search link. This link should go to Search page (see #895)

5) For section with intro text:

6) For map section: Change intro text to “Explore contracts:”

7) For “chloropleth” I recommend changing to two-color system (has contracts/has no contracts) and removing heat map. Otherwise it is too busy and confusing. @anderspeders what do you think? Also please confirm that zoom function works on all browsers and mobile platforms

8) Change “Our Country Partners” to “Country Partners” as requested

9) Change to “An online repository of” to “A repository of” as requested (Also, per current live site, this should not say “directory” as that is not accurate to functions or depth of site)

10) Change shortcut from “[n] contracts” to “‘[n] documents"

11) Add colon to “Explore contract terms:”

12) For contract terms list:

13) Confirm site logo is the exact same file/font size for ALL site pages. Confirm that burger menu is the exact same for ALL site pages (remove the word “menu” and add the arrow, same as on other pages)

homepage_0529_notes

KaitlinCCSI commented 8 years ago

I agree with Jed's recommendation of changing to two-color system (has contracts/has no contracts) and removing heat map.

On Mon, May 30, 2016 at 1:36 PM, Jed Miller notifications@github.com wrote:

  1. Text inside Search box:
  2. Text should be: “Search [n] documents” 3.

    Text should be Initial caps as it is in live site 4.

    Remove country drop down function (We decided against this) 5.

    Change button text to “Search” (one word) 6.

    Remove pop-up function from Advanced Search link. This link should go to Search page (see also #895 https://github.com/NRGI/resourcecontracts.org/issues/895) 7.

    For section with intro text:

  3. Anders/NRGI to provide intro text (as noted here https://github.com/NRGI/resourcecontracts.org/issues/873#issuecomment-218681637)
  4. Move “Learn more” link up, to make it inline with blurb 10.

    Reduce height of section 11.

    For map section: 12.

    Change intro text to “Explore contracts:” 13.

    For “chlorpleth”

  5. I recommend changing to two-color system (has contracts/has no contracts) and removing heat map. Otherwise it is too busy and confusing. @anderspeders https://github.com/anderspeders what do you think? 15.

    Please confirm that zoom function works on all browsers and mobile platforms 16.

    Change “Our Country Partners” to “Country Partners” as requested 17.

    Change to “An online repository of” to “A repository of” as requested 18.

    Also, per current live site, this should not say “directory” as that is not accurate to functions or depth of site 19.

    Change shortcut from “[n] contracts” to “‘[n] documents" 20.

    Add colon to “Explore contract terms:” 21.

    For contract terms list

  6. Confirm this list is editable by admins 23.

    Make sure to spellcheck 24.

    Confirm site logo is the exact same file/font size for ALL site pages. Confirm that burger menu is the exact same for ALL site pages (remove the word “menu” add the arrow, same as on other pages)

[image: homepage_0529_notes] https://cloud.githubusercontent.com/assets/2153664/15656314/b0518ad8-265a-11e6-9ade-a5dccfdae346.jpg

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/873#issuecomment-222539008, or mute the thread https://github.com/notifications/unsubscribe/AOI33V9FIjCk2IzjqI89AnGnA6YQgYeRks5qGy4fgaJpZM4IX2T3

.

Spam https://antispam.law.columbia.edu/canit/b.php?i=01R0GzGVg&m=a939a987c49c&t=20160530&c=s Not spam https://antispam.law.columbia.edu/canit/b.php?i=01R0GzGVg&m=a939a987c49c&t=20160530&c=n Forget previous vote https://antispam.law.columbia.edu/canit/b.php?i=01R0GzGVg&m=a939a987c49c&t=20160530&c=f

KAITLIN Y. CORDES

anjhero commented 8 years ago

Hi @jedm and all, 1) Text inside Search box:

done

2) Remove country drop down function (We decided against this)

Removed

3) Change button text to “Search” (one word)

Done

4) Remove pop-up function from Advanced Search link. This link should go to Search page (see #895)

Done

5) For section with intro text:

Done

6) For map section:
Change intro text to “Explore contracts:”

Done

7) For “chloropleth”
I recommend changing to two-color system (has contracts/has no contracts) and removing heat map. Otherwise it is too busy and confusing. @anderspeders what do you think?
Also please confirm that zoom function works on all browsers and mobile platforms

Done

8) Change “Our Country Partners” to “Country Partners” as requested

Done

9) Change to “An online repository of” to “A repository of” as requested
(Also, per current live site, this should not say “directory” as that is not accurate to functions or depth of site)

Done

10) Change shortcut from “[n] contracts” to “‘[n] documents"

Done

11) Add colon to “Explore contract terms:”

Done

12) For contract terms list:

Done

13) Confirm site logo is the exact same file/font size for ALL site pages. Confirm that burger menu is the exact same for ALL site pages (remove the word “menu” and add the arrow, same as on other pages)

We'll make sure the logo and menu used here will be replicated throughout the platform.

Homepage design: homepage iv

Homepage design with font annotation: All of the fonts belong to Open sans family. homepage - annotation

jedm commented 8 years ago

@anjhero This design looks really good! A few small final requests:

fonts

deepak-shah-np commented 8 years ago

@jedm Please review new homepage design of rc and olc.

http://rc-site-demo.elasticbeanstalk.com/rc/public/ http://rc-site-demo.elasticbeanstalk.com/olc/public/

SamCCSI commented 8 years ago

Looking forward to @jedm's comments!

Here are the OLC team's comments on the OLC site:

Main section

‘Explore Contracts’ Map section

image

‘Country Partners’ section

Sidebar

Footer

jedm commented 8 years ago

For RC also:

Main section

‘Explore Contracts’ Map section

‘Country Partners’ section

Sidebar

Footer

@SamCCSI please email me to confirm what you mean by bold question below. Thanks!

  • “About”/ “FAQs”/ “Resources”/ “Glossary”/ “Publish Contracts”/ “Contact”
    • all linked to RC rather than OLC - We would prefer these be listed horizontally, rather than vertically. @jedm any thoughts?
SamCCSI commented 8 years ago

For the OLC footer:

How difficult would it be to keep the OLC footer exactly as is in the current live version (with the exception of needing to remove WB logo and changing wording of that list if we're making any changes there)? If it's not too difficult to keep it as is but make changes to RC, then that would be our desired approach.

rprajapatii commented 8 years ago

I am confused regarding changes to be made in footer section. Whether to keep footer as in new design with suggestions given by SamCCSI earlier (deleting some sections and horizontally aligning menus ) or revert the footer changes to the older design as in current live version.

SamCCSI commented 8 years ago

@rprajapatii For RC We are happy for the new proposal by @anjhero to proceed: image

For OLC We do not need the vertical layout because there is only one founding partner logo, one donor logo, and no content partner section. Therefore we would be happy with a horizontal arrangement. This could be:

(1) leave the footer as it currently is on the live version (but remove the World Bank logo).

OR

(2) Arrange it like this, if you think it is a better looking design: image

jedm commented 8 years ago

Please note that for RC we posted final requests above:

https://github.com/NRGI/resourcecontracts.org/issues/873#issuecomment-239008127

On Aug 24, 2016, at 8:23 AM, SamCCSI notifications@github.com wrote:

@rprajapatii For RC We are happy for the new proposal by @anjhero to proceed:

For OLC We do not need the vertical layout because there is only one founding partner logo, one donor logo, and no content partner section. Therefore we would be happy with a horizontal arrangement. This could be:

(1) leave the footer as it currently is on the live version (but remove the World Bank logo).

OR

(2) Arrange it like this, if you think it is a better looking design:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

manishgs commented 8 years ago

Above suggestions have been incorporated and deploy on demo (RC & OLC ) please review and provide us your feedback.

jedm commented 8 years ago

The following changes have not been made yet:

  1. Change “Search [#] and Associated Documents” to “Search [#] contracts and associated documents” (ie add “contracts” and make all words but “Search” lower case)

This instruction was not read correctly by YI. Please review and revert to "Sentence capitalizatoon" for text inside box and "Initial caps" for Search button

  1. Sidebar: The font/logotype at top of sidebar must match size and font of standard site font, as previously requested.
  2. Footer: Delete “Content partners” section and Open Oil icon. Please confirm if this section is to be kept or removed

(@charlesyoung Please confirm that we cannot add this until governance document is agreed and executed. )

SamCCSI commented 8 years ago

The background photo for OLC is wrong.

We wanted to keep the original photo we had for the background, but change the photo for the section below that:

image

Font is also wrong in that section.

Please add hyperlinks on the numbers above 'Documents' 'Resources' 'Countries'

I suspect the new green used on the search button and background to 'explore contract terms' will clash with our background photo, too. Can you try using the green we use on the current version?

We may have more feedback in the coming days. Many thanks!

KaitlinCCSI commented 8 years ago

For both RC and OLC, the word "Resources" in the footer should be changed to "Guides" so that they match the side menu.

For both RC and OLC, I am confused by the language toggle, as some but not all of the language on home page changes when you move between EN FR AR. @charlesyoung could we discuss this in our call next week?

On Thursday, August 25, 2016, SamCCSI notifications@github.com wrote:

The background photo for OLC is wrong.

We wanted to keep the original photo we had for the background, but change the photo for the section below that:

[image: Inline image 1]

Font is also wrong in that section.

Please add hyperlinks on the numbers above 'Documents' 'Resources' 'Countries'

I suspect the new green used on the search button and background to 'explore contract terms' will clash with our background photo, too. Can you try using the green we use on the current version?

We may have more feedback in the coming days. Many thanks!

SAM SZOKE-BURKE _Legal Researcher_Columbia Center on Sustainable Investment Columbia Law School | The Earth Institute, Columbia University 435 W116th St. New York, NY 10027 | (+1)(212) 854-2635 <+1212-854-2635> | (+1)(646) 630-4123 <+1646-630-4123> | s.burke@columbia.edu | www.ccsi.columbia.edu | @CCSI_Columbia https://twitter.com/CCSI_Colu mbia | @samszokeburke http://twitter.com/samszokeburke

On Thu, Aug 25, 2016 at 8:10 AM, Jed Miller notifications@github.com wrote:

The following changes have not been made yet:

Change “Search [#] and Associated Documents” to “Search [#] contracts and associated documents” (ie add “contracts” and make all words but “Search” lower case)

This instruction was not read correctly by YI. Please review and revert to "Sentence capitalizatoon" for text inside box and "Initial caps" for Search button

Sidebar

The font/logotype at top of sidebar must match size and font of standard site font, as previously requested. Footer

Delete “Content partners” section and Open Oil icon. Please confirm if this section is to be kept or removed

@charlesyoung Please confirm that we cannot add this until governance document is agreed and executed.

On Aug 25, 2016, at 4:55 AM, Manish Gopal Singh < notifications@github.com> wrote:

Above suggestions have been incorporated and deploy on demo (RC & OLC ) please review and provide us your feedback.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/873#is suecomment-242363707, or mute the thread https://github.com/notifications/unsubscribe-auth/AMUM-1Lp1 BVV1B-wb5bveqlrHEFKWw-Wks5qjYYjgaJpZM4IX2T3 .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/873#issuecomment-242365944, or mute the thread https://github.com/notifications/unsubscribe-auth/AOI33aeNVbNwSHqQwhE8UXnAENW_rK1uks5qjYhPgaJpZM4IX2T3

.

Spam https://antispam.law.columbia.edu/canit/b.php?i=01Rzojaw5&m=5b6830406a80&t=20160825&c=s Not spam https://antispam.law.columbia.edu/canit/b.php?i=01Rzojaw5&m=5b6830406a80&t=20160825&c=n Forget previous vote https://antispam.law.columbia.edu/canit/b.php?i=01Rzojaw5&m=5b6830406a80&t=20160825&c=f

KAITLIN Y. CORDES

manishgs commented 8 years ago

@jedm

Change “Search [#] and Associated Documents” to “Search [#] contracts and associated documents” (ie add “contracts” and make all words but “Search” lower case) This instruction was not read correctly by YI. Please review and revert to "Sentence capitalizatoon" for text inside box and "Initial caps" for Search button

Done

. Sidebar: The font/logotype at top of sidebar must match size and font of standard site font, as previously requested.

Done

  1. Footer: Delete “Content partners” section and Open Oil icon. Please confirm if this section is to be kept or removed (@charlesyoung Please confirm that we cannot add this until governance document is agreed and executed. )

@charlesyoung @jedm Should we keep the section or remove?

@SamCCSI

The background photo for OLC is wrong. We wanted to keep the original photo we had for the background, but change the photo for the section below that:

Background images updated

Font is also wrong in that section.

Font corrected.

Please add hyperlinks on the numbers above 'Documents' 'Resources' 'Countries'

Done

@KaitlinCCSI

For both RC and OLC, the word "Resources" in the footer should be changed to "Guides" so that they match the side menu.

Menu "Resources" has been renamed to Guide.

manishgs commented 8 years ago

We have added option to manage following contents from admin panel of subsite.

  1. Manage Images
  2. Home page Links
  3. Home page Texts
  4. Country Partners

Admin panel link : RC | OLC

Please review admin panel and let us know your feedback.

@SamCCSI @charlesyoung

jedm commented 8 years ago

@manishgs The changes look good. The one thing I noticed was when you switch to Arabic the sections of the page do not look right (see attached).

Also the logo (upper left) switches from align-left to align-right when the language switches to Arabic (because Arabic is R-to-L language I assume), so that should be fixed.

Only @charlesyoung or @anderspeders can answer the OpenOil question. (I expect we will want to add this in the future even if we are not ready to add right now.)

Thank you!

screen shot 2016-08-29 at 9 29 42 pm

charlesyoung commented 8 years ago

@jedm we can discuss the mention of OpenOil as a partner during tomorrow's Sprint call.

SamCCSI commented 8 years ago

For RC and OLC: Search window should say "Search [#] contracts and associated documents"

For OLC:

KaitlinCCSI commented 8 years ago

For both RC and OLC:

For OLC:

For RC:

jedm commented 8 years ago

I do not have a strong opinion but for what it's worth I disagree with @KaitlinCCSI's first bullet and last bullet. I think the white color is ok and I think the image is ok for RC. (NRGI however really should investigate if it still has rights to the image.)

SamCCSI commented 8 years ago

We have noticed some typos, and changes needed on the About page that the new demo links to: http://rc-site-demo.elasticbeanstalk.com/rc/public/about

If I make changes to the current About page (http://www.resourcecontracts.org/about), will these be transferred over? Or is there a better way for me to convey the needed changes to you?

charlesyoung commented 8 years ago

Remove OpenOil as partner.

rprajapatii commented 8 years ago

Hello all, underneath is jpg of OLC homepage with modification in colors respectively in map section, learn more section and search button.

The overlay above the main image section is also removed as suggested.

The white background of section containing numbers beside the search section is also lightened.

Provide feedback. homepage olc

anjesh commented 8 years ago

@SamCCSI @jedm Please provide feedback to the above design, we have started working on implementation of that design.

@SamCCSI regarding the about content, you may do the updates, the changes will be reflected in the new design as the content is not static text and is coming from the database.

@KaitlinCCSI do you have any references to the images that could be used in rc, instead of the one with the face currently used.

cc @charlesyoung @anderspeders

jedm commented 8 years ago

I believe Charles was checking with NRGI on the "about"/intro language. And I had posted this question and screenshot regarding Arabic: https://github.com/NRGI/resourcecontracts.org/issues/873#issuecomment-243336099

My only other related requests are:

Otherwise, per comment from earlier, it looks really good!

Jed

On Sep 8, 2016, at 5:51 AM, Anjesh notifications@github.com wrote:

@SamCCSI @jedm Please provide feedback to the above design, we have started working on implementation of that design.

@SamCCSI regarding the about content, you may do the updates, the changes will be reflected in the new design as the content is not static text and is coming from the database.

@KaitlinCCSI do you have any references to the images that could be used in rc, instead of the one with the face currently used.

cc @charlesyoung @anderspeders

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

SamCCSI commented 8 years ago

For OLC:

For RC:

These are taken from a google search and I do not know where the files came from, but assume NRGI might have a collection of mining related photos at its disposal?

JesseCCSI commented 8 years ago

Hi @anjesh and @rprajapatii just wanted to confirm that the font used for the revised home page will be the same as that currently used (which from this github thread appears to be Open Sans)? The font used on the demo homepage looks different (think it's Arial). Thanks for confirming.

rprajapatii commented 7 years ago

@jedm

the language switcher should be very small and should not appear in upper-right on inside pages (because the top and the upper right are full with key functions)

For consistency the language switcher is kept at footer in all pages and it is made smaller.

@SamCCSI

for main OLC background photo: restore the color adjustments of current live version

The olc background image is same as in live version

the blurb that starts "the site applies extensive..." is wrong. It should be this one:

Its dummy text in the image. However you can update text from subsite admin panel.

Change the map from brown / orange / white to blue (background / ocean) / green (countries with contracts) / white (countries with no contracts)

changes have been made regarding olc map colors.

@JesseCCSI

The font used on the demo homepage looks different (think it's Arial)

I have made correction about the font.

@charlesyoung AlSF logo is changed.

Do visit the demo site at: "http://rc-site-demo.elasticbeanstalk.com/rc/public/" and "http://rc-site-demo.elasticbeanstalk.com/olc/public/"

However, @SamCCSI we would like to get picture for resource contract homepage. Please provide it soon so that we can deploy the changes on live site.

rprajapatii commented 7 years ago

@SamCCSI, conform a picture for rc hompage so that homepage changes can go live soon.

SamCCSI commented 7 years ago

@rprajapatii The plan is to use current photo for now to avoid holding up the launch of the new page, with the understanding that we may seek to replace with a more appropriate background image later on.

cc @charlesyoung

JesseCCSI commented 7 years ago

Thanks @rprajapatii please see screenshot for some comments from the OLC team:

2016 09 16 olc homepage comments

Please let me know if any of the comments are unclear.

Aside from the above, we have a couple of comments regarding the French version of the homepage, which we will post in a new thread.

We also have some comments regarding the Advanced Search link, which I think @jedm will post.

manishgs commented 7 years ago

New home design has been update on live. Please review once and if you found any bugs/issues in new design please create new issue.

@SamCCSI @charlesyoung @anderspeders You can update Homepage text, footer text and "Explore contract terms" from admin panel.