Redesign homepage for the standalone site

[fcoveram]

Problem

As Openverse will be in a standalone site, out of wordpress.org, we need to update the homepage to this new context. The page needs to be more explicit about what Openverse is, how to contribute to the project, showing content about the project living inside the site, and its relation with WordPress.

Besides the above, the page needs to fix showing the content types in the content switcher by meeting a11y and i18n requirements.

Since the scope of this change is moving Openverse to a new site, current functionalities and tweaks must tend to be as minimum as possible, mainly to accomplish the primary goal described above.

Issues related

• Add content about contributing media to Openverse openverse#611
• Add new Privacy page explaining our use of cookies and linking to WordPress privacy policy #978
• Mobile content switcher is missing information openverse#586
• Homepage search type buttons for small width viewports run off screen in languages with longer labels #1295
• Add links out to about/our story/privacy/etc from the home page #1174
• Add dedicated page about the licenses openverse#644

Proposal

Homepage.redesign.01.Desktop.mp4

Homepage.redesign.01.Mobile.mp4

Description

As you can see, compared to the current menu, this one has fewer items since I made the following changes:

• All items have no dropdown elements.
• There is a “Get involved” item linking to either the make blog or the handbook.
• Sources, Our story, Search Guide, and Meta Search pages are inside About as page’ sections instead of separated pages. I think we do not need most content from the Meta Search page as the feature should explain itself by using it, except for the paragraph describing why we have it.
• API is a page in Openverse instead of external. I suggested this time ago, but I would like your thoughts. I am not thinking of redesigning the page but placing it in the openverse site.

The main title has a light font weight to balance the page contrast and not compete with the openverse logo.

Once opening the switcher, content-type items have smaller icons to reduce the popover size, and the video option was removed. This last point is a significant change for the user experience, but the reason is not providing a content type that sets the expectation of browsing content as the others, to then finding a white page with links to external sites. The promise of searching for relevant content would not be met.

Nonetheless, the video option still will be in the search result page. I would like to see your comments on this proposal.

I displayed the sample search results in a row at the bottom and added an interaction showing the content title. I did not want to hide content depending on the viewport, but I do not have a clear idea about how it looks like on big screens.

To show that openverse relates to WordPress, I added a small note in the footer. I was thinking of adding more content but could not find any reason why do it.

On mobile, I think the best way to solve the content type labels is by hiding them and letting users tap the icon to see the options. If we show the content type names, we will have to deal with i18n all the time.

The bottom-up box to see select a content type is an idea I like, but it would work only on this page. The current flow of leaving the site when seeing a full-size modal to select a content type feels odd at this stage of the search journey.

This proposal has many nuances, so I am happy to hear your thoughts and try new ideas.

Mockup

• Figma: 3D model support and homepage redesign

[obulat]

I love the design, @panchovm ❤️

On mobile, I think the best way to solve the content type labels is by hiding them and letting users tap the icon to see the options. If we show the content type names, we will have to deal with i18n all the time.

I really like the content type selector interaction on mobile! Having only an icon in the searchbar is great because it fits well on a narrow screen. I was wondering if we could add an x button for clearing the mobile searchbar: on mobile, clearing up a long string without it is a frustrating experience. On the other hand, we are an image search engine, so the users probably don't use long queries...

The bottom-up box to see select a content type is an idea I like, but it would work only on this page. The current flow of leaving the site when seeing a full-size modal to select a content type feels odd at this stage of the search journey.
This feels much more natural for mobile experience!

[fcoveram]

Glad that you loved the design @obulat 🙂

I was wondering if we could add an x button for clearing the mobile searchbar: on mobile, clearing up a long string without it is a frustrating experience

You are very right. I forgot to add it. I will work on that.

I actually understood something different before reading the whole sentence. I thought you referred to closing the modal for selecting a content type, and that part can be improved too. The only actionable element is the gray bar in the modal's top area to drag it down, and replacing it with an explicit close action seems clearer and more effective.

[fcoveram]

Here is a new flow fixing the input clear and closing the switcher.

Homepage.redesign.02.Mobile.mp4

[zackkrida]

Sorry about not getting you feedback sooner, @panchovm! I love the overall layout and the addition of the menu items, along with the dark-background mobile menu. Some feedback on points you made:

All items have no dropdown elements.

👍

There is a “Get involved” item linking to either the make blog or the handbook.

👍

Sources, Our story, Search Guide, and Meta Search pages are inside About as page’ sections instead of separated pages. I think we do not need most content from the Meta Search page as the feature should explain itself by using it, except for the paragraph describing why we have it.

I agree that 'meta search' doesn't need its own page, I am not sure about the Sources and search guide. I think those are both a lot of content and warrant their own pages. However, we could add links to those pages on the "About" page. In general, maybe the About page would be a good thing to leverage as a sort-of landing/marketing page for the project.

Alternatively, we could add more content 'below the fold', like DuckDuckGo does:

https://duckduckgo.com/

API is a page in Openverse instead of external. I suggested this time ago, but I would like your thoughts. I am not thinking of redesigning the page but placing it in the openverse site.

I am not sure about this, but I don't think it blocks this proposal at all. It's a matter of having the external icon or not, really.

---

One thing I still think we need to address is having a little more content and clearer content on this page. From a SEO perspective but also one of user understanding. 'items for reuse' is not as clear to folks as 'free stock photos' or 'free to use images' or whatever. Obviously those terms aren't correct for this project, but we still need to develop more and better content for this page and it would be nice to do alongside the redesign.

My very last thought: The new page looks amazing, but it loses a bit of the WordPress jazzy-ness of the current page, which has movement from the diagonal lines of the staggered images on desktop. I don't think we have to keep that feel, but I wonder if there are ways to preserve it in some sense.

[fcoveram]

Coming back late here too.

maybe the About page would be a good thing to leverage as a sort-of landing/marketing page for the project.

You are right about this, and that Sources deserves its page. My main discrepancy with the Search Guide content is putting it inside a page rather than explaining its potential through the search experience, i.e., showing the syntax commands in the recent searches popover. I would like to explore a solution for this idea to be more explicit about my point.

I am not sure about this, but I don't think it blocks this proposal at all. It's a matter of having the external icon or not, really.

Exactly 👍

The new page looks amazing, but it loses a bit of the WordPress jazzy-ness of the current page, which has movement from the diagonal lines of the staggered images on desktop. I don't think we have to keep that feel, but I wonder if there are ways to preserve it in some sense.

I like the feeling you are bringing. I can definitely work more on this aspect.

In general, it seems that your comments @zackkrida point to enhancing the page look and feel by bringing more brand and jazzy elements. I agree with the idea but my initial plan was to narrow the implementation scope as the upcoming domain change might require us to move quickly.

But that is open to change indeed.

[zackkrida]

@panchovm I think the page would be a great improvement. If we end up prioritizing the iframe project we could definitely launch this page as-designed here.

[fcoveram]

Coming back to share a new version of this page as we are facing a new context based on four points:

1. Openverse will be placed in a standalone site under openverse.org. This shift boosts the product independency while meeting a new scenario for the brand. However, we need to highlight that it is part of the WordPress project, and therefore, link to its site.
2. The current copy was updated weeks ago (Update the homepage description #1756) and does not need new updates.
3. The new header (New header component #1669) changes the search flow, and therefore, this page needs to be consistent with that new interaction.
4. The new footer (Openverse footer #1811) brings back the locale component (Restore the locale switcher and update as per the new designs #1810) and the feature needs to be present from the beginning.

Without further details, here are the mockups.

Desktop lg

Mobile sm

Home	Menu

Interaction flow

homepage.redesign.i3-sm.mp4

---

On desktop, each image takes you to its single result view. Instead of cropping the gallery section, this proposal shows all images and remains fixed on the right side. As the viewport goes smaller, I was thinking of hiding columns of the gallery until showing nothing on sm view.

For the switcher flow, I reused the new drawer and replaced the main button with "Search" to ease seeing the results.

The pages listed in the header should solve the content needs we have, so it is fully open to changes whether we consider adding or removing pages.

What do you think of the idea?

[dhruvkb]

1. "Part of the WordPress project" is much better and more accurate than "Powered by WordPress" so I like that.

2. The image grid is a nice simplification but I liked the more playful nature of the tightly packed grid we had before. But I see how the image grid can provide more utility and be more accessible. Are we not doing the full screen background idea?

3. I like the small horizontal list of icons we have on the mobile version of the page. Do they really need to go? Is having them negatively affecting the UX?

4. The footer showing a disclaimer on the homepage and "Part of the WordPress family" on other pages feels off to me. IMO the contents of the footer should be consistent. IMO the disclaimer is related to the main text about "extensive library" and should be in the body of the page and the WordPress reference consistently in the footer all the time.

I'm not a designer so I might be way off so please discard any suggestions that are bad. Overall I like the design changes, they make the site much more consistent and complement the new header and footer designs.

[fcoveram]

To your points:

1. ⭐
2. I also like the boldness of the current grid, but this layout eases the domain change and sets a baseline for improving the layout. I am not getting rid of the full-size image idea, but this one simplifies the upcoming update.
3. It does have UX problems. The main one is how the image size meets a11y requirements and adapts to viewports as it goes bigger with breakpoints. Cropping images has interaction problems, and it will require deep thought to reuse the idea without jeopardizing the content navigation.
4. I am not concerned about the footer inconsistency as this page is the "cover" context introducing the project. With that in mind, we need to highlight the WordPress dependency, and the mention in the footer felt insufficient. However, I agree with your point on showing the WordPress project and library license texts across the site, but for now, this solution allow us to make a quick change and leave room for those improvements in the future.

I appreciate your approach @dhruvkb. Thanks

[AetherUnbound]

I am +1 on @dhruvkb's first and second points!

Your examples also show the disclaimer for CC licensed content no longer linking to https://creativecommons.org/licenses/ - is that an intended change?

[fcoveram]

My mistake @AetherUnbound, thanks for noticing it. It should link to the CC licenses page. The link should have the same style, an underline in the resting state.

[fcoveram]

Adding the discussion label to make clear the design proposal is not done yet.

[fcoveram]

Here is a new version of the page.

xs	xl

The changes made are:

1. Replacing the WordPress logo with the simplified version to make the mention less prominent.
2. Moving the WordPress mention to the footer to make it consistent with the last component update (see Update footer to match new mockups #2015).
3. Moving the CC license disclaimer below the search bar.

I also added the breakpoint variants. Here is a real-size frame with all mockups.

---

Questions and feedback

My main feedback request: What do you think of this version?

From xs up to lg, search area is the main content and is wrapped in the center by paddings on both sides. But from xl and beyond, search area's width is fixed, and the gallery appears on the right side.

The idea of this is to prevent a huge search bar on big screens, but since the right side would look empty, I was thinking of adding columns of images as there is available space, with a maximum of five columns. Once reaching the five columns, the gallery can float fixed on the right to balance the layout's white space. What do you think of this? Adding an example of how it might look like.

[zackkrida]

@panchovm It looks great to me.

I like the idea of adding columns to fill available space. I'm also fine with the logo swap to the "W" mark.

I'll connect with other WordPress.org community stakeholders to make sure the reduced prominence of the WordPress project callout is acceptable.

[AetherUnbound]

I think it's a great idea to limit the search bar size and fill in the extra space with more images! The new design looks fantastic 😄

[zackkrida]

We're good to move forward here 😄

[fcoveram]

Awesome. I will start preparing the assets ✨

[fcoveram]

Final design

• Presentation
• Mockups

---

The file assets are done. Changing the discussion label to ready for work ✨ 🚀

[dhruvkb]

@panchovm could you share the cropped square images that will be used (preferably along with the UUID identifiers so that we can link to their single result pages)? I assume there will be many, considering ~ 15 images per set.

These image sets will be needed when implementing the image grid.

[fcoveram]

Sure! This week I am also selecting the remaining images for Universe, Olympic Games, and Indigenous pottery. So sharing them here as soon as possible.

[fcoveram]

Attaching the file with the 15 images for Universe, Olympic Games, and Pottery. I moved away from "Indigenous pottery" to just "Pottery" theme to include a wider variety of content.

Homepage galleries.zip

I also added a section with the three galleries in the Mockup page. The image order is top-down and left-to-right.

Universe

1. Mandala Base
2. Saturn's Rings in Ultraviolet Light
3. Hubbell Revival-style Rug with Moki (Moqui) Stripes
4. File:Astronomy; a meteor shower in the night sky. Mezzotint. Wellcome V0024753
5. Old Japanese Star Map (large)
6. Diagrams of the Universe: The Two-and-a-Half Continents, the Universe in the Shape of a Person, and the Seven Levels of Hell
7. Carina Nebula Detail
8. Sidney Hall’s (?-1831) astronomical chart illustration of the Taurus. Original from Library of Congress. Digitally enhanced by rawpixel
9. Total eclipse of the sun from the Trouvelot astronomical drawings (1881-1882) by E. L. Trouvelot (1827-1895)
10. Astronomical map, aesthetic woodcut
11. Planisphaerium Ptolemaicum siue machina orbium mundi ex hypothesi Ptolemaica in plano disposita
12. Neutron Stars Rip Each Other Apart to Form Black Hole | Openverse
13. Starburst Cluster Shows Celestial Fireworks
14. Sun Stone (or Calendar Stone), Aztec
15. Astronomy: a star map of the night sky in the northern hemisphere, with the names of the constellations. Coloured engraving

Olympic Games

1. Bob Beamon
2. Olympic Games Los Angeles 1932 via Chicago & North Western Railway Union Pacific
3. Olympic Games Seoul 88
4. Youth Olympic Games
5. Seoul Olympics 88
6. Day 5 Athletics (19 Aug 2010)
7. Day 8 Gymnastics (22 Aug 2010)
8. Olympic Games. Stockholm 1912
9. File:The victorious English 400 m. women's relay swimming team at Wellcome V0048555
10. File:Adrian Popa
11. Youth Olympic Games
12. People Man
13. File:Medal of olympic summer games 1948
14. File:Wrestling at the 2016 Summer Olympics – Men's freestyle 86 kg 5 (0)
15. Day 8 Diving (22 Aug 2010)

Pottery

1. Impasto four-handled ovoid olla with lid, from S. Marzano sul Sarno
2. Stem Cup with Buddhist Emblems: Shufu Ware
3. Female Figurine Rattle
4. Sake Flask
5. Female Holding A Bowl Figurine
6. Double-gourd Shaped Bottle
7. The Pottery Seller
8. Large cup or bowl with slightly
9. Pottery Whistle
10. Cincinnati Pottery Club Incised Pitcher
11. Architectural Sculpture Fragment
12. Octagonal bowl with The three friends of winter, floral scrolls and hôô, anonymous, c. 1670 - c. 1690
13. Monkey-Shaped Aryballos (Oil Vessel)
14. Pot gedecoreerd met 'lange lijs', anonymous, 1662 - 1722
15. Pottery Whistle

I just noticed that I pasted search-staging.openverse.engineering links. I use staging environment to hide the wp.org header.

[AetherUnbound]

These photos are excellent!

[fcoveram]

@olga asked a great question in the mockups, and moving it here to see other thoughts.

What should happen when you click on "See results" here (when opening the switcher drawer without typing a search term)? If you are redirected to search, then it can get confusing if the user hasn't entered a search term yet. We might have to indicate that they need to enter the search term then. And if it simply closes the modal, then the button label should be something like "Confirm selection/content type"

(Note added by me in italic)

Showing a message in the input field makes sense, but I wonder if Openverse might search regardless instead. Interrupting users from seeing results because they did not type a term seems like missing an opportunity to show Openverse. I am thinking of the Universe, Olympic Games, and Pottery as the default terms to match the homepage's gallery.

In this way, if users do not type anything, clicking on the search button or selecting a content type and then searching would take them to a result.

What do you think?

[obulat]

In this way, if users do not type anything, clicking on the search button or selecting a content type and then searching would take them to a result.

Interesting idea!
It might also be confusing for the user who wanted to 1. Select the search type and then 2. type in the search term.
I wonder if focusing the search bar after you click the CTA button in the search type selection modal would be more or less clear... Would be nice to have some user feedback :)

[dhruvkb]

Taking them to a predefined search term based on the gallery seems wrong to me because:

• It's not immediately clear that the gallery consists of searchable, indexed content in Openverse. To a new user, it might seem like a curated collection of very high-quality CC works. This is further reinforced because when you search for something like "universe" or "pottery", none of the gallery results are on the first page.

• Since the gallery theme is not written anywhere, it is hard to relate a word like "universe" or "pottery" to the list of images in the gallery. So if clicking search takes them to the results page, it will seem like a random search. On mobiles, the gallery is not even visible, so there is even less reason to know why choosing a media type led them to a seemingly random search term.

• I agree with @obulat that people might want to choose a media type first and enter the term later. In that case, their planned interaction is interrupted. If we take them to the search box and they choose to hit search anyway, then the idea of taking them to some predefined search might make sense.

• We still need to make sure that the results for the term are very high quality, currently searching for pottery shows a very NSFW image, so that can lead to a very detrimental experience for the end-user.

Other search engines do nothing when the search button is clicked without a query. Taking the user to the search field and using the required attr for that field seems the most reasonable approach to me.

[fcoveram]

It might also be confusing for the user who wanted to 1. Select the search type and then 2. type in the search term.

You are very right. In that vein. Showing the "See results" button in the drawer does not make much sense as selecting a content type could close it and go back to the homepage showing the content type icon selected.

On the other hand, you are right @dhruvkb. The randomness feeling, especially on mobile. The relationship is not clear and the results might frustate if does not fit the expectation. Hence, requiring to type a search term is more clear.

Here is a prototype based on the flows advised above.

CleanShot.2022-12-26.at.15.36.30.mp4

Note: The prototype has spacings for interaction purposes, but are not part of the mockup.

I moved the content area slightly upwards so snackbar does not overlap the search bar. This change would require a different flex lauyout setting.