Reworking the Articles section

This weekend, I have reworked the Articles section here on my website. It has been on my mind for a while, and I felt a bit inspired, so I spent the weekend getting it done. As always, it started like an idea and "how hard can it be", but as always, when dealing with Invision Community V5, it was more difficult than it should have been.

The reason to rework Articles (and other content)

The reason I wanted to rework the Articles and other content areas is that I want to make sure the authors are getting proper attention. While the standard templates show who wrote the articles, it is not very prominent. So, what I wanted to do was to make the author more visible, and I have had some thoughts on how to do that for a while.

The reason I want to highlight the authors is that I want to make sure that if someone actually writes something on my website, they get value from it. This is partly in the form of visibility, but I have also started to explore Profile fields and how to use them in other areas. So far, I have added new fields for LinkedIn, YouTube, and the Atlassian Community. I will explore this further, as the profile fields have very limited functionality at the moment, and they have a single styling, which is pretty bad.

The solution

What I ended up doing was to create two new sections for the author, one in the header and one in the footer. The one in the header has a larger avatar, and I am using a profile field called headline to allow the author to present themselves. I added a counter for views to have different icons and colors based on how many views the article has received. I did the same for comments, and then I implemented the same design for Categories as I have in other places.

As you can see, I also repositioned the ratings and the reaction functions directly below the headline. If there are no ratings or review the reactions will move to the left as well. I also moved the share and following into the highlighted area to make them more prominent.

The footer author area

The footer author area is heavily influenced by LinkedIn, but I added links to it as well. This is so I can provide even more value to the author. It has the same information as the header, but here I am also adding the three links I currently have added as profile fields. The thought here is to add a natural closing paragraph to an article and direct users to other areas related to the author.

New templates for Index and Category listing

I have used an old template for displaying listings for the Index for a while. This template shows the articles in two columns and the first article across both columns. It is a nice template, but for some reason, the first wide article is only on the first page of the listing. I wanted to have the same show up on the other pages as well, but that has been a bit of a nightmare due to the way the code is structured with grid and flex nested.

I also wanted to take this design to the category listing, and that almost broke me yesterday (🫣). After many hours of wrestling with the code, I managed to get it to a reasonable situation, even if the calculations are breaking the design at a few breakpoints. It is annoying, but I'll live with it for now until I have more time to refactor. I will probably build new templates rather than trying to rework the existing ones, as working with someone else's code without documentation is painful sometimes.

The future

In the future, I will probably work to make this even more enhanced. I will add more social links as soon as I can convince Invision Community that there should be a way to hide these fields in the Forum and on other apps, as today you can either show them everywhere, or nowhere. This is very annoying since I can't control the output with just one customisation option.

When I build the People section, I also want to connect the article to that, of course. I also have other ideas, but there is no shortage of things to do here, so I'll put those in the ideas section of Jira Product Discovery.

As the Articles are a bit messy in terms of content, I am going to clean them up. This means that I will move personal articles and things that are not really and Article to other areas. I am also going to refactor a few things, as I see that having the same content in multiple places is not optimal. This includes the design for comments and views, but also the categories will be aligned so the design looks the same across all databases.

I will use the things I have learned here to rework the Videos section next, but first, I have some bugs to iron out...