Home page redesign - Githubissues

charlesyoung commented 5 years ago

[ ] homepage design is prepared as per discussion here

Initial slide for reference

charlesyoung commented 4 years ago

cc @SamCCSI @jedm, ticket for further comms on the homepage redesign.

nirvanalama commented 4 years ago

We've designed an initial low fidelity wireframe for the homepage of ResourceContracts according to the discussions and references. Please let us know what you think about it.

We'll be using Invision for further discussion on the designs. Here's the invision link. We've left comments to explain our ideas to you. Please feel free to reply/leave comments on Invision.

charlesyoung commented 4 years ago

cc @jedm

charlesyoung commented 4 years ago

Initial thoughts.

Nr 2 (below) seems to be the best option to start enhancing
Remove the ‘All documents’ and 'Guides' links from the top navigation bar
Can options be looked at to put the 'About / Guides’ inside the homepage area itself and not in the footer i.e. make it more prominent while not cluttering the page?

@jedm there are About, FAQs, Guides and Glossary links that appear on the footer. Which ones need to move to the homepage area and which should remain in the footer?

cc @anjesh

jedm commented 4 years ago

@charlesyoung @anjesh My suggestion would not be to change the footer, but to include a short About sentence and a link to the guides with a little bit of design on it as part of the main area of the page.

(No strong opinion about where within the main area ... eg, one of the corners, as proposed in our original sketch, or centered like other elements, but important to improve access to this context-setting and teaching via size, placement and design.)

adding @SamCCSI and @KaitlinCCSI in case thoughts.

charlesyoung commented 4 years ago

Thanks @jedm

@anjesh will you be able to look at where the 'Guides' can be placed on the main area of the page to allow more prominence?

nirvanalama commented 4 years ago

By 'guides' we understood a section on the homepage which would open up a pop up with slides showing how the system works. Here is a similar example of Slack. Guide_example_optimized1 Is this what you meant by 'Guides' or do you have other ideas in mind?

charlesyoung commented 4 years ago

cc @jedm @SamCCSI

nirvanalama commented 4 years ago

@jedm @SamCCSI Any updates on ideas about the 'guides'?

We've thought of adding a short description at the bottom, similar to the old landing page followed by the 'guide'. "Learn how to use it here." will help the user understand the function of the website. The link would open up a pop up with slides showing how the system works, similar to 'Slack' as posted in the above comment. Let us know what are your thoughts on this design.

jedm commented 4 years ago

@nirvanalama Thank you for these examples and for the different ideas. To help clarify, two different ideas have been under discussion: 1) more interactive instructions and explanations about how to use RC/OLC (like the "pop up with slides" idea, or like bigger "hovers" for key functions) and 2) using the homepage to better "promote" the explanations and guide pages that already exist.

I would recommend that the next version of the homepage focus on 2), and that the options for 1) are discussed later.

I also recommend that the "About" text in the sample above be considered separate from a "promotion" area on the homepage that advertises/links to the Guides. In other words, I do not think it is best to have generic "About the site" language and a "learn more" link. It is better to provide a separate box or short text that says (for example), Learn how to search, sort and review contracts in our [ResourceContracts] [OpenLandContracts] Guides

charlesyoung commented 4 years ago

@jedm do we need to create these guide documents?

jedm commented 4 years ago

CCSI is in the process of rethinking their guides. And NRGI has Guide and glossary docs in the menu, eg:

https://resourcecontracts.org/guides

On Nov 29, 2019, at 8:47 AM, Charles Young notifications@github.com wrote:

@jedm do we need to create these guide documents?

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

charlesyoung commented 4 years ago

@nirvanalama have you had time to look at @jedm above comments?

nirvanalama commented 4 years ago

Thank you for your feedback. Here are the options:

1) More interactive instructions and explanations about how to use RC/OLC (like the "pop up with slides" idea, or like bigger "hovers" for key functions)

1 copy 3

2) Using the homepage to better "promote" the explanations and guide pages that already exist.

homepage_guides_1 homepage_2 homepage_3

charlesyoung commented 4 years ago

cc @jedm

jedm commented 4 years ago

Hi @nirvanalama and @anjesh.

The layout of page samples under 2) will be very helpful to improve the Guides pages. But I do not see different proposals for how the homepage can promote these guides better.

How can the homepage promote/advertise the guides area more prominently?

Thank you.

On Dec 5, 2019, at 6:24 AM, Charles Young notifications@github.com wrote:

cc @jedm

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

nirvanalama commented 4 years ago

We can actually have the same thing on the homepage as on the guides page. The guides page could have more detailed information. We also feel 'guides' could be rephrased to 'How it works' / 'How to use'. What do you think about that?

1. add screenshots of "how to use" in order to make the section more prominent.

2. Or present the gif of the guides similar to that of 'Slack'

jedm commented 4 years ago

I like the idea of a section of the homepage with some Guides information.

Research by The Engine Room resulted in the recommendation that the home page have a better explanation of the site and a faster more prominent link to Guides information.

Is it possible for you to give an example of how this can work on the first screen (ie, above the scroll with the other homepage elements)?

Thank you @nirvanalama.

cc @charlesyoung @anjesh

On Dec 6, 2019, at 4:45 AM, nirvanalama notifications@github.com wrote: We can actually have the same thing on the homepage as on the guides page. The guides page could have more detailed information. We also feel 'guides' could be rephrased to 'How it works' / 'How to use'. What do you think about that?

add screenshots of "how to use" in order to make the section more prominent.

Or present the gif of the guides similar to that of 'Slack'

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

charlesyoung commented 4 years ago

While above is still a conceptual design and as @jedm notes making guides more prominent is a good idea we also need to consider not using a substantial space on the home page for these guides.

jedm commented 4 years ago

@charlesyoung I like the idea of option that scrolls the homepage downward to inlcude some Guides/intros below the scroll, like the way the map is below the scroll.

But the wireframe we provided includes a space to promote the guides on the first screen - and not merely with text. Would like to see a homepage option that provides that so we can consider it.

On Dec 6, 2019, at 3:04 PM, Charles Young notifications@github.com wrote:

While above is still a conceptual design and as @jedm https://github.com/jedm notes making guides more prominent is a good idea we also need to consider not using a substantial space on the home page for these guides.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/1225?email_source=notifications&email_token=AAQNZQGTG3WXWHFEZYFEZL3QXKV6JA5CNFSM4ITZ3LVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGFGQLA#issuecomment-562718764, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQNZQBEKUTXKCEXYJPPGBLQXKV6JANCNFSM4ITZ3LVA.

nirvanalama commented 4 years ago

@jedm

Is it possible for you to give an example of how this can work on the first screen (ie, above the scroll with the other homepage elements)? -We would not recommend to put up the guides section on the landing page (upper fold of the homepage) as it would take up a lot of space(as the guides would have a lot of content)and it would over crowd the landing page and overwhelm the user. However, A link to the guides can be put on the upper fold. I agree with @charlesyoung here.

nirvanalama commented 4 years ago

Here are two example of how we could incorporate the guides on the upper fold. We feel we need to be sure about which section to give more visual prominence the 'search' section or the 'guides' Let us know your thoughts on this.

Example 1

Example 2

jedm commented 4 years ago

I prefer example 2. @charlesyoung what do you think.

@nirvanalama, for design, we would like to suggest exact language for the Guides block It would be a combination of more explanatory/intro language (similar to current intro language on live homepage) and a few words/image in larger font that invite people to go to the guides.

On Dec 10, 2019, at 12:06 AM, nirvanalama notifications@github.com wrote:

Here are two example of how we could incorporate the guides on the upper fold. We feel we need to be sure about which section to give more visual prominence the 'search' section or the 'guides' Let us know your thoughts on this.

Example 1

Example 2

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

charlesyoung commented 4 years ago

Agree that example 2 is the best.

However while we want the Guides block to be prominent is it not too prominent seeing that its now the biggest section on the home page? Will be good to get an understanding of how the Guides block will be presented.

I would also change 'Search contracts' to 'Search Documents' and 'Recent Docs' to 'Recent Documents'. Also I think 'A directory of Petroleum & Mineral Contracts' should change to 'A Directory (capital D) of Petroleum and (not &) Mining (not Mineral) Contracts'.

cc @jedm

nirvanalama commented 4 years ago

@charlesyoung If I may ask what is the difference between 'Documents' and 'Contracts'?

charlesyoung commented 4 years ago

RC not only holds actual contracts but also related documents like environmental impact studies which aren't contracts. We have been discussing the use of 'Documents' and 'Contracts' for awhile now.

@jedm what are your thoughts?

nirvanalama commented 4 years ago

@jedm Do you have any suggestions for the language on the guide block?

jedm commented 4 years ago

@nirvanalama I will share an updated suggestion for layout and language next week.

(@SamCCSI: I may share a mockup with you first for some advice!)

nirvanalama commented 4 years ago

@jedm Please share the suggestions soon so we can jump into turning the wireframes into designs. Thanks!

jedm commented 4 years ago

@nirvanalama Attached is a suggestion for placement and basic approach to the intro text and Guide promo. This is specific to OpenLandContracts.

Final text of these blocks is still to be confirmed with @SamCCSI and team. cc @charlesyoung

Presentation1.pdf

nirvanalama commented 4 years ago

@jedm Thank you for your input.

4. Do not include outline box -We will not include the outline box on the UI, this is just for an understanding that the section will have boundaries (not necessarily outlines, it could have an image or a gradient color fill)

5."Consider color or other design elements for one of both blocks?"
-Can you please explain this point. We are not quite clear about what you meant.

We've started to work on the designs, will update you soon.

jedm commented 4 years ago

It was a typo. It should say “Consider color or other design elements for one or both blocks.”

Thanks very much. Will watch for the new mock-up!

On Dec 24, 2019, at 5:40 AM, nirvanalama notifications@github.com wrote:

@jedm Thank you for your input.

Do not include outline box -We will not include the outline box on the UI, this is just for an understanding that the section will have boundaries (not necessarily outlines, it could have an image or a gradient color fill)

5."Consider color or other design elements for one of both blocks?" -Can you please explain this point. We are not quite clear about what you meant.

We've started to work on the designs, will update you soon.

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

SamCCSI commented 4 years ago

Alerting user of annotations

It would be nice if there was a design element on home page that alerted users to the existence of annotations, as this is a key value add of site. In current/old home page, the "explore contract terms" field does that. Not suggesting we use those words here, but we need something.

cc @jedm @KaitlinCCSI

nirvanalama commented 4 years ago

Below are the two versions of the Homepage designs, with reference to the wireframes we talked about in the last discussion. I will be further explaining both the versions.

Version I This version has the guides in a static form, the guides will be screenshots of the search, filter, annotations and summary. The content is a dummy text and could be changed if you provide the suggestion for the text. Also, the screenshots will be updated.

Now talking about the aesthetics, I've taken the similar green shade from the previous homepage as RC has already been branded with the 'Green' color. The transparency of the shapes show the transparency of data and the rectangular shape represents mining.

Version II The version II presents guides in a dynamic form with the video showing 'how to use the system'. The tabs guide the user to the specific sections of the system. The video need to be recorded once the design has been finalized.

Now talking about the aesthetics, the gradient and the circular shape show the 'Oil' like texture since Resource Contracts is about petroleum and oil. Similar to the previous version, the transparency of the shapes show the transparency of data.

charlesyoung commented 4 years ago

Thanks @nirvanalama

Are the guides shown by default or only when a user clicks on 'Learn how to get started'?

Experienced users wont need guides and it could congest the home page for these users if presented by default.

jedm commented 4 years ago

@nirvanalama I have a similar questions to a Charles. The design of the guides is a useful suggestion but we have never been requesting guides on the main page. It may be better to install this style of guide in the OLC section called Guides, for example.

On Jan 7, 2020, at 3:59 AM, Charles Young notifications@github.com wrote:

Thanks @nirvanalama

Are the guides shown by default or only when a user clicks on 'Learn how to get started'?

Experienced users wont need guides and it could congest the home page for these users if presented by default.

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

nirvanalama commented 4 years ago

That wouldn't be a problem, I'll quickly share it with you. Apart from that do you have any feedbacks? Can we move forward with the design?

nirvanalama commented 4 years ago

1. Home

2. Home (hover)

3. Guide (option I)

4. Guide (option II)

charlesyoung commented 4 years ago

Minor comments on the text.

@jedm do we use contracts or documents? There is 'Search Contracts' and then 'Recent Documents'.

Also please change the text to 'Search and review petroleum, gas and mining contracts...' Actually @jedm do we even need this text?

Reduce the font size of 'Learn how to...' and move it down slightly on the page.

nirvanalama commented 4 years ago

Thank you for your feedback. Please suggest suitable texts and we'll replace it immediately. Can we now move forward with the designs and start development? Also, which version do you think would be better for the 'Guides' section?

The static screenshots (option I) or,
The tabs with videos (option II)

nirvanalama commented 4 years ago

As our hero text is 'A directory of Petroleum and Mining Contracts' we could use 'Search contracts' and 'Recent Contracts'

The search icon when clicked will open up the search bar and will have the text 'Search and review petroleum, gas and mining contracts...' We will provide the design.

nirvanalama commented 4 years ago

In the above designs we haven't included the sidebar on the left. (see the image below for reference)What are your thoughts on that?

Just so that we're on the same page, I also wanted to talk about Open Land Contracts. This design will be implemented for OLC as well with different color theme right? Do you have anything to add on that?

charlesyoung commented 4 years ago

My feeling is that we don't include it seeing that a country search option is now added to the home page. Will be good to try keep the design really simple. Thoughts @jedm

Yes the design will also be implemented for OLC but @SamCCSI will need to comment on the color theme, etc.

nirvanalama commented 4 years ago

I agree on keeping the designs minimal. Sure, let us know soon.

jedm commented 4 years ago

@charlesyoung @nirvanalama - regarding sidebar. If it opens when you click the "hamburger" I would keep it, including for legacy users UX.

For the background design, I think it will look better to keep the photo imagery—but perhaps underneath a color wash/transparency. The OLC image is especially pretty. What do you think of this suggestion? ie, keep the image, but add a gray or a color transparency to make the bg image more dim? cc @SamCCSI

charlesyoung commented 4 years ago

Thanks @jedm

It will be interesting to see how the color wash/transparency image looks like.

Re the sidebar I would suggest that its removed, at least from RC, for the following reasons.

The new home page should preferably have a minimalist design avoiding any duplication (countries, search, etc on the home page as well as on the side bar)
Below notes the page views covering 2017 - 2019. Besides the home page the search and country pages are the most popular pages which are presented on the new home page.

nirvanalama commented 4 years ago

I agree with @charlesyoung on this one. This is how it looks like with an image overlay and transparency.

charlesyoung commented 4 years ago

@nirvanalama can you please do the transparency image overlay with attached pic. Thanks

Final RC Homepage Image

charlesyoung commented 4 years ago

Just clarifying that clicking on the 'Search Contracts' tab will open this page while clicking on the 'Countries' tab will open this page.

jedm commented 4 years ago

Thank you both for continuing to experiment with an image on the homepage. Is it possible to see this option with a higher transparency and with a color overlay that is ONLY the color and does not have the pattern with lines?

We may decide that’s the color+lines with no image is best, but I think it is a big change to remove the RC and OLC images so it will be be very helpful to have the different alternatives to show CCSI for final decision.

On Jan 13, 2020, at 5:31 AM, Charles Young notifications@github.com wrote:

@nirvanalama can you please do the transparency image overlay with attached pic. Thanks

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

NRGI / resourcecontracts.org

Home page redesign #1225

Initial slide for reference

1) More interactive instructions and explanations about how to use RC/OLC (like the "pop up with slides" idea, or like bigger "hovers" for key functions)

2) Using the homepage to better "promote" the explanations and guide pages that already exist.

1. add screenshots of "how to use" in order to make the section more prominent.

2. Or present the gif of the guides similar to that of 'Slack'

1. Home

2. Home (hover)

3. Guide (option I)

4. Guide (option II)