Proposed RFC: Feature Showcase page revamp

[guillaume-haerinck]

Open 3D Engine Website RFC - Showcase page revamp

Summary

Outline a clear set of goals that we want the showcase page to fulfill. Explain how - in my opinion - the current implementation is failing to reach them. Take a look at the other engines websites and finally propose an action course and a mockup to fix these issues.

External links

Links	Description
Figma mockup board	Quick mockup of what the new design could be like
Source discord thread	Discussion which spawned the creation of this document
O3DE showcase page	The current o3de showcase page
Proposal as Google Doc	This proposal in an easier to read format

What is the relevance of this feature?

A showcase page proves what an engine is capable of via videos, screenshots and links to games or tech demos. It is usually the most important page for any newcomer as it is a fast way to confirm or deny what you can expect from it.

Such statements can be :

• Is the project dead ? If the last added demo is older than a year, then yes you might think that no one is using this tech besides maintainers

• Can it scale ? If there are commercial projects, then you are very more likely to say yes as these projects are generally bigger and made it past the finish line

• What is the performance ? The biggest scene presented, or the best looking one, is supposedly the highest limit that the engine can handle.

• What can you do with it ? The presence of 2D or 3D projects, the types of gameplay, if there are particles, terrain, water simulation, AI, and so on. It is all hints into what the tooling and feature set are giving you and proof that they work

To allow any visitor on the page to be able to formulate these statement, you need to make sure that the structure and content of the page allows it:

• It should be trustworthy: Anything that is presented in the showcase has to have a download link for the visitor to try it for themselves. This means always providing a link to the source code, or for commercial projects a link to the store page.

• It should be easy to access: You want anyone arriving on your website to either land or be an easy one click away from this showcase page. Stating “this engine has a high quality renderer” has little to no value compared to an actual video of a good looking scene.

• It should look good: A chain is only as strong as its weakest link, if a sample is off because the capture is at the wrong resolution, the lighting does not look good or the content is not properly framed, it will impact all of the other samples

• It should provide enough information: You want to provide a good amount of samples, and for each of them you want to have some descriptive text of what it is, who made it, and so on. This way you only ever jump to another page to download or dig into a showcase project which catched your attention.

What are the advantages of the feature?

Increase the reach of our engine to new users

What are the disadvantages of the feature?

Need someone to make the changes on the existing website

Issues with the current page

I took several screenshots of areas of interest for the current showcase page. The issues are listed by order of importance.

1. The page is fairly hidden

From the landing page, you have to scroll 3 screens until you reach the button to redirect you to the samples. I feel like this is too much and easy to miss (issues about the landing page, site architecture and tone will be part of another document like this).

I believe we could remove some content from the landing page, improve the showcase integration and move it higher.

Else it is accessible from the Community menu (the third entry) in a submenu. Which means that if you land anywhere else on the site, you will likely open the 2 first menu (About and Get Started) before reaching the community and maybe opening the showcase. I believe the showcase should have its own menu.

2. Only a handful of showcases have a link to source and a video. In general information is lacking.

Each showcase entry provides at least an image, a title, a category. The source code link and video links are optional (and not present in the majority).

• I believe source link and embedded video should be mandatory (source code link being replaced by store link).

• I also believe that a description of the project should be required, as well as a date to know when this was added / released, and on which o3de version it runs.

3. Some picked showcase should be removed, some other added, and some screenshots updated

We are starting to have multiple good-looking commercial projects, game jam projects as well as cool templates in the engine (available in the samples page, and updated via this PR).

• Anything that is not accessible should be removed from the Showcase, and instead replaced by a selection from the samples page.

• Some showcase project screenshots are not properly framed, or the lighting is wrong (the first person template is good looking, but the screenshot picked does not give it justice for example).

4. Page would benefit from a better separation between project types (commercial / hobby or games / robotics, or platform mobile / pc)

As the goal is to present an overview of what the engine is capable of, it also implies to help the user while navigating by grouping things he might be looking for.

For example, grouping commercial projects is a way to show how serious the project is. Grouping game jam games is a way to show how easy it is to prototype or get simple code samples to get started. Maybe just “commercial games”, “games” and “robotic” categories, separated in the page will be enough.

As we are starting to have more samples, it might also ease navigation to have 3 projects per row instead of 2 per row (as shown below)

How other engines are handling it

Unreal Engine

There are so many users and so many use cases that they have the luxury to have one sub page for every industry. The screen shown below is available from the second scroll of the mouse.

Then reaching this subpage, they outline a few key features for this space (like procedural generation toolset for AAA) before showing up the screen below with very specific games highlighted in great depth in yet another subpage. This new subpage is more about how the toolset allowed the game to be made rather than the game itself.

Cry Engine

Accessible from the top bar. A very good looking looping video on top, and only commercial projects below. A click on the project will open a new webpage dedicated to it with a carousel of images and video.

Unity

From the landing page, 2 scrolls away, you have these “success stories” which outline commercial projects released with the engine. It lacks animated content and clickable links, but those are then made available in further sub-pages.

Game Maker

Accessible from the top bar. List all commercial projects with an advanced “search” feature. Clicking on a project leads to a sub-page dedicated to the project with a carousel view.

Godot

Accessible from the top bar. Recap videos on top, and only commercial projects are presented. Each project on click has a dedicated full page to describe it and provides a large amount of screenshots

What I am proposing

Technical considerations

It seems that the o3de website is built in wordpress thanks to WPBakery Page Builder. In order to have a smooth transition and low cost to move over to the new design, I will be limiting myself to components which seem to be available in this template (thanks to o3de website and their demo page builder).

Overview

Design is visible here via Figma.

Note: Picked projects, category title and text in general are temporary

Addition in Navigation bar

As the showcase is one of the most important parts of the website, I feel like it should have its own access.

As only a few people can become members of the foundation (membership pricing is tailored for enterprise level, not for the vast majority of newcomers). I would rather remove it from the navbar (and add more occurrences of it in the landing page or in submenus instead).

Looping video

We have an O3DE Showcase video that we could trim and use as a looping video in the background to showcase multiple good looking samples. We would put it inside a dimmed black box to make the text readable. It makes the page lively and presents to the other what he can expect from the samples below.

I left the call to action to share content on discord as I think it is a very good starting point for any newcomer.

Search by tag

This is a feature that is already available in the O3DE gems page. I feel that having the possibility to search for commercial projects, only for games or only for robotics might be valuable to easily get around.

The counter for the found project already is present in the gems page. I don’t feel like it is needed here, but if we can’t remove it due to wordpress limitation, keeping it is not a big issue either.

Project Cards

The project card is a mix between the gems page and the current showcase page :

• Category pin at the top left so that when nothing is filtered you can still know what it is

• Video pin at the top right, mandatory for every project it will lead to youtube or another platform to show a video of the project

• Screenshot of the project. Must be nice looking, ideally turn into a video on mouse hover (as done for some in the current showcase). On click, mandatory for every project, will lead to source code or store page

• Description of the project. With a clear title, author, and summary of what it exactly is. It is possible to mention release date here or O3DE version

Last call to action

Not everything is to be showcased in this page. This is why a button at the end of the projects will lead to the samples page on O3DE doc so that the user can access more content if he wants to.

Scope of work

I would say that the first bulk of work is to write the content which can be done by the community and me (screenshots, videos, descriptions of the projects to be shown).

Then I would need to see from the wordpress website how easily things can be done via existing widgets, it is likely that none or very little web development work is needed and have done it all via the wordpress UI.

Are there any alternatives to this feature?

• Leaving the overall page as it is and only update the link to new contents. Could be a short-term in between.

Are there any open questions?

This is only my limited vision on how to improve the showcase page, so that O3DE is presented to a wide audience in the best light possible. We need to agree as a community on the best way to go, pick what is to be showcased, write the content and make refinement.

It is also needed to check on Wordpress if some of what is proposed needs to be modified so that it can be inserted easily. However I do hope that this work will be useful and I am willing to help to integrate into the website if that is possible.