Improve Docs Experience - Change Fedora Docs Frontpage layout and improve features

Opening the front page of fedora docs, and at first, I didn’t know if I was on a page that was live because whenever I hovered over a button I didn’t know if after clicking on the button, anything could happen because nothing seemed to change or no button seemed to animate while I hovered over it. It creates a false impression initially that the buttons don’t lead anywhere when actually, they do.
So, I added animations to all the buttons on the front page.

Secondly, I changed the arrangements for the documentation. The present arrangement on the site isn’t in order nor does it look appealing to viewers.
I had to share the page link with 7 people from different backgrounds, races, and job types. Only 3 of them found it appealing to them in both arrangement and appearance. Most of them didn’t see the reason why some documentation has different colors from the others, some colors being thicker than the other when they are all of some importance under the “user documentation” heading.
If there should be any differences in color, it shouldn’t be under the “user documentation”. So, I had to make all of them the same color.

Furthermore, I added a search bar for users to be able to quickly search keywords or documents using a search bar. Many users don’t have the time or luxury of going through all the documents, so a search bar would really come in handy. As a plus, I’d suggest the programmers or SEO team create a wide range of keywords that would enable both newbies and returnees to use the search bar effectively.

If you take a look at the new page I created, you’d notice at the top right corner of the page, an “Edit Page” button. I made it very conspicuous and bold, unlike the recent fedora docs page. The “Edit Page” button isn’t visible at first glance to new users. Plus, it doesn’t have an icon in front of it to help people with disabilities or people who can’t read properly. Icons help a lot better in cases like this, so I added an “edit” icon in front of it and in front of every doc header. It helps the site be a lot more inclusive as inclusion is important in design.

Lastly, the difference between headers and document previews is not all that visible and noticeable. I had to make the headers not just bigger like the present fedora doc page, but also bolder so the difference would be noticeable. If you noticed, I still maintained the same fonts as used in the present fedora docs page to maintain design systems. The same color code was also used in the documentation. I used lighter colors because colors that represent docs files should be light and simple.
Here is a link to the prototype page I designed

I made use of Figma as a design tool.

2 Likes

I never considered this, but this is a good point. Some kind of indication that it’s a link would be helpful.

Yeah, the current design is “let’s get something functional.” We definitely need to make it more usable.

We don’t have an SEO team, and limited programming help available. But with the client-side search that darknao is implementing, I’ve noticed that the results are sometimes not particularly helpful. We’ll have to work with the teams that maintain each docs module to help make sure their page titles are helpful in a search result context.

2 Likes

Well, in my Firefox the pointer changes to a hand, indicating a link. But a bit more animation would be good,

Currently, the color difference indicates a different relevance, recognizable at least to the initiated. The color difference is tied to a semantic meaning.

You may have a look at the search function at https://docs.stg.fedoraproject.org/en-US/docs/ and comment on that. For me, it is nice and useful.

A problem of the current docs page we were discussing for quite a time is the overall look and feel. Basically, we need all the information, probably even a bit more. But the way is is it looks “overloaded” and is difficult to grasp. Too much info, too less structure , too limited visual orientation

Ok, sir. Thanks so much for your feedback.