On 8th May 2018, we launched a brand new Admin Panel interface - a joint project by Product Designers Eric Barbeau and Guo Jiayi - together with the long awaited feature Comment Filtering, which gives users the ability to filter comments posted by the audience (aka moderated chat).
The Admin Panel on Pigeonhole Live is used primarily for filtering and moderating responses from event participants. It also allows you to enlarge a question on the projector, and mark questions as answered as the event goes on.
It is designed for on-the-go question managing, or remote filtering without needing to be stuck in one place.
We knew that most users disabled comments because they had no control over the posted comments; they could not view, filter, nor edit the comments.
However, users gave feedback that they would love to use the comments feature to gain more insights from the audience.
From our observation, the audience also liked to share their opinions about questions in the comments section, which spurred discussions on the Pigeonhole platform using the comments feature.
So we started designing the Admin Panel with a new Comment Filtering feature in mind.
Meanwhile, there were existing inconveniences with the previous Admin Panel which we aimed to solve. For example, when many questions were posted, the allowed questions were buried at the bottom of the page.
This meant it was hard for users to handle the task of filtering new questions while managing the existing questions at the same time. To solve that, they would need to continually and easily be able to switch between the new and allowed questions.
And if we included the Comment Filtering feature without changing the layout of the Admin Panel, the tasks of question filtering and comment filtering would have been majorly inconvenient for users.
Essentially, the new Admin Panel needed to allow users to do these things easily:
With those requirements in mind, we designed the new Admin Panel underscored by a new navigation bar, and an enhanced tablet and mobile view.
We used vertical tabs to allow users to navigate between questions and comments. Questions and comments are placed in two separate sections, and further categorised based on their status: allowed, pending, and blocked.
No matter how many questions or comments there are, users can now easily filter new questions and comments, and manage the allowed ones.
Additionally, vertical tabs are less affected by screen sizes, so the section titles are always visible to users no matter how small their screens may be.
We understand that during comment filtering, users need to refer to corresponding questions to decide whether a comment is relevant.
To emphasize the relationship between comments and their corresponding questions, we used a different background colour so that users can easily distinguish comments from questions.
Users can also view the comments in allowed questions tabs, which turned out to be a very handy way for users to filter comments.
We also came up with a slightly different view of Admin Panel so that users can nail the admin job even on small screens.
We also made some minor style changes to the buttons so that they took up less space and avoid being distracting to users. At the same time, we kept its key elements so they remained recognisable to users.
This was how we arrived at this version of the new Admin Panel, a few months in the making. We hope you enjoy it, and would love to hear what you think!