Topic Page Refresh

Over the years various attempts to improve the topic page performance and experience were initiated, but never iterated on leaving half-baked projects adding to the technical debt of the Spiceworks forums. There were multiple page templates that had been developed to accommodate different ad layouts (experiments to reduce “ad blindness”) and a performant version just for guests viewing topics on mobile devices. Topic pages are THE highest trafficked pages in the Community and provide a valuable resource to IT pros and other tech workers.

Goal(s): Improve page performance, reduce number of page templates and streamline the UI

Tools: Figma; Spiceworks Community forums

Team: Community Product Manager, Director of Community, engineering team focused on audience products

My role: Lead designer

Metrics: Improve page load time for desktop and mobile; Reduce bounce-rate (guests); Maintain ad performance;

Challenges

  • Short timeline for re-designing the layout and starting development.

  • Another “high priority” project was coming down the pipeline that would pause progress.

Refresh the UI

As we were transitioning over to Figma and I was working on the refresh to the UI system, our topic pages were going through a re-write to modernize their tech stack and make them performant for both desktop and mobile (they carried quite a bit of legacy code and features that needed to be trimmed).

This gave me a great opportunity to start rolling out the new Spiceworks Design System into the Community, our existing topic pages were still using old branding and UI styles. The engineers would be able to take the UI I’d been documenting and have a birds-eye view of the whole system to think about how they could develop their own system library.

It was decided by the team to focus on guest users first so we could start rolling out page improvements quickly for the largest segment of our audience. This would allow the engineers to update the common features that all users see and interact with first before digging in and adding all of the registered user features.

In order to move quickly I utilized our forums to gather feedback from existing user’s (IT pros can be quite vocal about what they like and don’t like) to make some informed decisions about any UI and layout changes. This feedback guided a few key layout decisions…

Reorganize the root post

There’s quite a bit of info that can be taken into consideration when responding to a question. What is this person’s experience and technical knowledge? Do they frequently use the forums or are they new?

I actually find the spice level of the OP to be very beneficial in determining how to direct an answer.

– Spiceworks Community user, Chipotle spice level

Keeping this in mind, I made the decision to add an author box to the bottom of the root post so we could include any known, relevant info about the author without pushing their original question too far down the page. Previously we weren’t surfacing this info at all! So a user’s expertise and spice level were hidden from readers.

The location of the topic's spiciness and share buttons at the top-right above the ads is horrible placement. Breaks page flow, extremely easy to miss.

– Spiceworks Community user, Serrano spice level

There was also a bit of a disconnect between some of the actions user’s could take on post. The “spice up” and “report” actions were up in the top-right of the post (next to the title) and the rest of the actions were shown at the bottom. This made it pretty easy for users to miss being able to “spice up” a topic to show they liked or supported it.

Reorganize replies

When replying to questions in the forums, expertise and Community status matter. Is this person knowledgeable about the subject matter? Are they an active contributor to the community? Keeping these questions in mind I re-organized the replies to put a focus on the poster’s expertise stats as well as their pepper level (which indicates how engaged they are with the forums).

Perhaps make the original poster bold or a different colour in the thread this way it would be easy to pick out any clarification points that the OP might have made in the thread.

– Spiceworks Community user, Tabasco spice level

We also have a tagging system that allows users to tag (or mention) other users, vendors and products. The UI for these tags takes up quite a bit of room on a reply… without adding much value. We weren’t prepared to remove these altogether without more research but I was able to make them smaller and more streamlined.

Results

The initial re-designed topic page was released to our guest users, and overall page performance has increased (load time is sooo much quicker for the average user!). We also released the updated page layout to our feedback group in the forums, and overall feedback has been positive by those members of the Community (woo!).

Looks pretty nice. Moving forward, I like it!

– Spiceworks Community user, Datil spice level

I think it looks much cleaner and easier on the old eyes. Looking forward to whats next.

– Spiceworks Community user, Cayenne spice level

Before the team could start work on the member features, we were pull off to work on a large, high-priority project involving multiple teams across departments. This project will be wrapping up mid-summer and the team will be able to resume our previous work on the topic page re-write. 🤞