Improve the OONI website

[hellais]

The current OONI website can do with some improvements. I made some quick mockups of how I would imagine the future of the OONI homepage.

Related tickets:

• Add page about OONI users #35
• Restructuring the OONI website #36

[agrabeli]

@hellais originally wrote:

here are some of them:

Homepage

About page

Reports page

@hellais Really love this new design! :)

I'll get back to this ticket over the next weeks when I have more time on my hands. For now, here are some initial thoughts:

1. I think it's important to also include "Install" in the menu bar, since running ooniprobe is one of the main things we want people to do (and links to "data" and "reports" are also included at the bottom of the page, so I don't see why "install" shouldn't be in the menu too).

2. I also think we should definitely include a FAQ page, which I suspect people will find useful. Perhaps the FAQ page can also be included the menu (or somewhere easy/quick to find).

3. I think it could be useful to create a screencast of what it looks like to run ooniprobe. Then we could embed that screencast in the home page of the website. This will allow people to get an idea of what running ooniprobe looks like, and what are the sort of things that they can learn from it (in terms of data).

4. Perhaps we could also create a short video with interviews from community members, and integrate that into the website as well. If not in the home page, then under a "community" page.

5. I would suggest having a "Get involved" page in the menu, so that it's easy for people to find it. In this page, we can also include "community materials", such as workshop slides, OONI stickers that people can download and print themselves, and other OONI materials.

6. I think it would be useful to have an "Event Calendar" somewhere on the website that community members can edit to add upcoming events from around the world (e.g. elections), during which it could be useful to run ooniprobe. This way, community members could help us keep track of events around the world, and orchestrate probes accordingly.

7. We may also want to have a page or a calendar where we note all OONI events. This can include OONI talks and workshops provided by the OONI team, as well as by community members from around the world.

8. We probably want to explain more, in the home page, what is the benefit of running ooniprobe. In other words, we want to clearly explain/show that people can collect data showing the blocking of websites, blocking of Tor, etc. We also might want to start informing people that they can also use ooniprobe to measure potential net neutrality violations.

9. Perhaps we can also include a page somewhere that shows how people (researchers, NGOs, etc.) have used OONI data to date. Here we have a chance to point to "success stories".

I'll provide more feedback as we start to work towards implementing the revamp of the site. Thanks for working on this, it's exciting!

[elioqoshi]

I think this is a good start @hellais but it lacks consistency with out upcoming design language. As I said, I really like the style of Duolingo.com which might be a good inspiration here (and I like the ocean idea as well)

Would you like me to give it a go? How should we prioritize this? After the style guide is set up? Or working in tandem?

[hellais]

Would you like me to give it a go? How should we prioritize this? After the style guide is set up? Or working in tandem?

I would suggest we work on it in tandem together with the styled guide. I think what we have seen in the small trial of run.ooni.io is that it's more effective that you work on the full mockups and I work on abstracting the components and integrating them into the style guide.

Do you agree?

[elioqoshi]

@hellais I think that's more effective for me as well. I had some bike shedding and learning curve with the style guide so that would produce quicker results definitely.

[hellais]

Lastest comments from @agrabeli : #36 (comment)

[hellais]

I think in general we should soonish work on sketching out a sitemap or at the very least an inventory of all the content we currently have and what we should be adding.

Here are my comments to @agrabeli's comments:

Homepage
Include a scroll-able view where each section includes:
New Quattro illustration (or existing one) & core buttons ("install", "data", etc.) -- along with a brief and exciting explanation of what OONI is.
Screencast (short video) explaining OONI Probe and showing how it works.

I am personally not a fan of having screencasts on websites. I find that they make the website feel more heavy (even if it only loads on click) and I have very very rarely found myself actually looking at the video on the homepage of the site on first load. Maybe I will view it after a bit, but I don't find it useful information to have here.

Interchanging images providing some interesting findings from around the world based on OONI data (i.e. OONI highlights -- interesting things you can uncover with OONI Probe).
Quotes from the press and community members (this can include a link which redirects to a page which lists all OONI press mentions).

I would suggest to put these two on a special dedicated page (maybe under about?)

Partner logos
Funder logos

I would add to the homepage also some of the latest news from our blog or reports.

Menu
About (OONI & team) -- also provide contact info
Software (provide test descriptions & code in similar vein to the revamped mobile apps -- rather than using test names, explain what people can measure, and link to relevant installation guides).
Data (link to OONI Explorer & OONI API -- also list examples of how OONI data has been used by researchers and advocates).
Research (include research reports).
Blog (include blogs and announcements).
Get involved (include current stuff & replace "Partnership" page with new "Community" page)
FAQ

I think these are good items. It would be epic if we could remove 1-2 items to keep the menu bar a bit cleaner.
Please let's not create nested menus though. Or if we do, not in the form of a menu bar that on hover expands.

New Community page
This can be included in the Get Involved section of the menu (or elsewhere). The idea is to include the following in this page:
Information about the OONI Partnership Program (include partner logos)
Video with community members
OONI workshop materials and slides
OONI swag (stickers, t-shirts, hoodies, etc.)
Mailing lists & community meetings

This is a lot of content that doesn't exist yet. I would be careful with creating pages for content that doesn't exist yet and would favour we prioritise on creating pages for content that already exists.

Something missing that does exist at the moment is the tests description page.

In general, we also need to include:
Calendar on upcoming OONI talks and events (this can include both those by the OONI team, as well as by the broader OONI community around the world)

This can go in the get-involved section.

Calendar on upcoming political events that are likely to trigger censorship events (ideally, this would also be updated by community members... do we want this to be the same calendar as the previous one?)

I think this is a separate project that should probably have it's own dedicated portal. I think mixing it with the OONI website is not ideal.

Links to OONI's social media accounts (Twitter and Facebook)

These can be included in the footer on every page.

Other things that we must not forget here to place are:

• Link to OONI Explorer
• Link and details page for OONI Run
• Install page
• Blog section
• Report section
  (I think we should split our blog from reports to give reports more significance and avoid them being burried under all the blog posts)
• A section for developers

[agrabeli]

I would suggest to put these two on a special dedicated page (maybe under about?)

I would actually insist on having these on the homepage (as part of a scroll-down narrative), since we want to highlight these cases and emphasize why it's important to run OONI Probe. Including this in the About page would lead to this information being buried.

This is a lot of content that doesn't exist yet. I would be careful with creating pages for content that doesn't exist yet and would favour we prioritise on creating pages for content that already exists.

We can add those pages as placeholders (even though the content may not exist yet), and just say something like "Coming soon!". I think it's better to account for these pages in advance, as they will influence the rest of the content layout and design.

Something missing that does exist at the moment is the tests description page.

This is not missing. As mentioned in my comments, the test descriptions will be re-purposed to be included along with installation information under the "Software" section of the menu bar.

I think this is a separate project that should probably have it's own dedicated portal. I think mixing it with the OONI website is not ideal.

Sure, but we want to make sure that this is something that people can easily find from the website (and therefore we should be thinking about how we can enable that).

Other things that we must not forget here to place are:

Link to OONI Explorer
Link and details page for OONI Run
Install page
Blog section
Report section
(I think we should split our blog from reports to give reports more significance and avoid them being burried under all the blog posts)
A section for developers

They're not forgotten. :) OONI Explorer will be linked from the "Data" section of the menu, the Install information will be available from the "Software" section of the menu, and there are proposed "Blog" and "Research" sections of the menu as well. Furthermore, the section for developers can remain under the Get Involved section (which will remain, but changed a bit). You're right though to point out OONI Run! I'd suggest that we link to that from the initial view of the homepage.

@hellais thanks for your feedback!

[hellais]

I would actually insist on having these on the homepage (as part of a scroll-down narrative), since we want to highlight these cases and emphasize why it's important to run OONI Probe

My bad, I quoted the wrong part, I meant the logos of partners and sponsors.

[georakusen]

Hi all. Look and feel is great. Just had a look over the comments and I think the conversations you are having are the right ones.

My two cents: In my experience it's not a problem to produce pages for pending content, as long as there is a plan to definitely populate those pages soon after.

A few things to think about, and I'm sure you have these answers elsewhere, but:

• Who are your users? Who are you expecting will find the site, or benefit from the content there? What do you think their goals might be? It might be several different user types (people in countries with known censorship issues, intrigued people unaware of any censorship issues in their country, academics, journalists, etc)*. Defining who they are is a good way to settle internal debates about what page should have what content.
• Defining the goal of each page, including homepage, is a great way to make sure that the content and language you use works really hard. E.g. "Reports page: users will want to look up reports related to their own country first"* will help you think of ways to make this as easy as possible for them. (* that's an assumption!)
• Do you have an KPIs for the site? If one of your main intentions of the site is to help people easily download and run OONIprobe then measuring that now (based on % visitors to the site) and measuring this again later when the site is updated will help you know whether you have been successful.

Once you have pre-live sites that can be accessed publicly via a URL, I can help you do some "sense check" user tests on them.

[agrabeli]

Who are your users? Who are you expecting will find the site, or benefit from the content there? What do you think their goals might be?

Our users include digital rights advocates (including activists, researchers, policy analysts, and lawyers), academic researchers, and journalists (as well as technologists and others generally curious about internet censorship --- more recently, our users have expanded to also include those interested in measuring net neutrality violations). I think many access the website primarily to learn about internet censorship in their country (or in the countries that interest them).

The main things we want to highlight in the new website are (1) running OONI Probe, (2) exploring/analyzing OONI data, (3) learning about internet censorship in various countries (via OONI data). Those 3 things have been included in the homepage of the mockup.

@georakusen thanks for your feedback! We'll touch base for further feedback (I think we'll be resuming these discussions on the #ooni-design channel soon -- we've been prioritizing more on the mobile apps these days).

[elioqoshi]

@hellais Should we close this and open a new one linking to this issue in the design.ooni.io repo? Or are we tracking progress here? I suppose it would be best to split this work into smaller trackable chunks.

[hellais]

Should we close this and open a new one linking to this issue in the design.ooni.io repo? Or are we tracking progress here? I suppose it would be best to split this work into smaller trackable chunks.

Yes, create a master ticket for it referencing this ticket and xref the child tickets that depend on it. It's probably useful to put them into a dedicated milestone.

I would say the right place to file this in, is actually a new repository for the revamped website: https://github.com/ooni/ooni.io

[hellais]

So I made a bit more progress on this by making the following mock:

Key points are:

1. Making the primary CTA (Install OONI Probe) more prominent and visible in all pages
2. Splitting out the research reports from the blog posts
3. Better comunicating what are our two primary user facing products (OONI Probe & OONI Explorer)

I also tried to design it thinking about how many changes are needed in order to implement it with the current website codebase and go for stuff that is easiest to do.

I started implementing this in our current website here: #305

[hellais]

@holantonela what do you think of the above mockup?

There is also a live preview of some parts of this page visible here: https://deploy-preview-305--ooni.netlify.com/