#204 Docs Page Redesign Ideas and IA.
Opened 2 years ago by subtle-influencer. Modified 2 years ago
fedora-docs/ subtle-influencer/docs-fp-o redesign_ideas_and_IA  into  master

file added
+33
@@ -0,0 +1,33 @@ 

+ Fedora Linux has a wide range of products and contents that requires documentation. Twice in a year, Fedora Linux releases a variant of their products, as well as other packages that benefits its users while keeping users in control of their computing.

+ 

+ 

+ PROBLEM STATEMENT 

+ As more contents are created, it is becoming increasingly difficult for visitors to find the content they are looking for, also contributors do not know where to add new contents when someone wants to add new content to the front page.

+ 

+ 

+ BACKGROUND

+ I did a heuristic evaluation of the webpage and noticed that key areas of improvement were mostly associated but not limited to visual hierachy of content structure, page navigation, as well as the aesthetics of the page. In order to validate my observations as well as find out more improvement areas, I conducted a moderated usability test on the webpage. I chose the moderated usability test as it helped observe users while taking the test, and recruited 4 participants with various skills and background.

+ 

+ From my research, 25% of my participants found the site easy to navigate, 50% found it easy to navigate after I gave an explanation into what fedora is, 25% found the web page to be aesthetically pleasing(participant found the color blue pleasing). Here are some of the insights I got from studying the webpage, and conducting the usability test of the page.

+ 

+ From my evaluation and research, here are some of the key areas of improvement that would benefit both visitors and contributors.

+ 

+ 

+ IMPROVEMENT AREAS

+ 1. The structure of the content on the home page was confusing.

+ 2. Poor Navigation...Users have to scroll and look through the entire page get what they are looking for.

+ 3. There are clustered information on the site without proper visual hierarchy

+ 4. Card colors are inconsistent and overwhelming.

+ 5. No clear information about Fedora Linux documentation.

+ 

+ 

+ PROPOSED SOLUTIONS

+ The goal was to come up with solutions that are easy to implement, and makes the page usable and easy to understand. Here are some of the solutions to the problems stated above:

+ 

+ 1. Since a major problem of this page was the structure of the content(as it affects both uvisitors and contributors). The first step was to understand the content on the webpage and how they where related to each other in other to create a better structure for it. After getting a clear understanding of how the contents are related, I decided to create a structure for the content using my knowledge of Information Architecture. This would be help the visitors find the content they are looking for easily and quickly, and would also help contributors know where to add contents on the homepage. The link to the information architecture I created is attached to this document.

+ 2. The IA created would be used to design a structured navigation panel, as this helps visitors find content easily while also helping in product search engine ranking. Also research has shown that adding a search bar to a webpage increases findabilty. Including both a search bar that is conspicuous to users, and adding a navigation panel to the interface, would help improve the problem of poor navigation on the webpage. 

+ 3. Poor visual hierarchy can be improved using  the concept of  color and contrast on the card and its content. This I would implement by reducing the tone of all the cards on the webpage, except for selected cards. This would also make the webpage less overwhelming, and be more consistent which solves the problem of bright and inconsistent colors on the webpage.

+ 4. Finally, including a very brief information about Fedora Linux and its offerings would help users understand the documentation page better.

+ 

+ Here is the link to the Information Architecture I created.

+ https://www.figma.com/file/RUWNAImc7v1v4StpPN5e2N/Fedora-Docs-IA

In this document, I proposed some design Ideas for the Fedora documentation page, and also included the Information Architecture for it.

I like some of your comments about the front page design. I'd like to see a mockup of what you have in mind.

A couple of notes on the information architecture

  • The taxonomy of offerings is a little bit off. Workstation/Server/IoT are Editions, which are a subtype of Solution (a.k.a. Variant). Spins and Labs are also Solutions.
  • I'm not sure what "Fedora Projects" is supposed to represent. It seems like there's an extra layer there that doesn't need to be, perhaps?

A couple of notes on the information architecture
* The taxonomy of offerings is a little bit off. Workstation/Server/IoT are Editions, which are a subtype of Solution (a.k.a. Variant). Spins and Labs are also Solutions.

@bcotton, this was quite intentional as I sought for ways to break down information in order to make information easy to find without having to overwhelm the users with so much information. My thought was around breaking down all of Fedora Variants into OS(which I named products), spins and labs(which I named solution), and packages which I left as packages. The reason for this is so that user can just go directly to whatever variant they are interested in.
The breakdown(OS, spins and labs, and packages) would be top level navigation elements present in the doc page.

P.S: Suggestions for the labels would be highly welcomed. Thank you.

I like some of your comments about the front page design. I'd like to see a mockup of what you have in mind.

A couple of notes on the information architecture

  • I'm not sure what "Fedora Projects" is supposed to represent. It seems like there's an extra layer there that doesn't need to be, perhaps?

Fedora Project is the Label for everything related to Project(It includes information about Fedora Project, council, and Fedora teams)

P.S: Suggestions for the labels would be highly welcomed. Thank you.

The labels I gave are the official ones, so it's best to stick with those and adjust the layout to fit within that. I appreciate the idea of not overwhelming the reader, which is not something we do well at the moment, so I suggest something like:

  • Solutions
    • Workstation
    • Server
    • Other solutions
      • KDE Plasma
      • Python Classroom Lab

Fedora Project is the Label for everything related to Project(It includes information about Fedora Project, council, and Fedora teams)

Okay, I understand now.

Metadata