#198 Improve Docs Experience - Adding search bar and improving navigation
Opened 4 months ago by joewest24. Modified 4 months ago

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
https://www.figma.com/proto/opx3qcXcFYIPzaift58Pl7/Fedora-proposed-front-page?page-id=0%3A1&node-id=7%3A2&viewport=241%2C48%2C0.87&scaling=min-zoom&starting-point-node-id=7%3A2

I made use of Figma as a design tool.


Login to comment on this ticket.

Metadata