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).
What the Admin Panel does
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.
Impetus for a new Admin Panel
Call for comment filtering
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.
Issues with the previous Admin Panel
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.
The previous Admin Panel: Allowed questions are buried in the bottom of the screen (where you can't see them) because there are so many new 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:
- Navigate between questions and comments, regardless of the number of questions or comments
- Always know the corresponding question of the comments they are viewing or filtering
- Switch between pending and allowed questions and comments
- Find the specific questions or comments they are looking for
- Use the Admin Panel regardless of screen size
How we achieved the new Admin Panel design
With those requirements in mind, we designed the new Admin Panel underscored by a new navigation bar, and an enhanced tablet and mobile view.
New navigation bar
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.
Screen size versatility
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.
Corresponding comments with questions
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.
Enhanced tablet and mobile view
We also came up with a slightly different view of Admin Panel so that users can nail the admin job even on small screens.
In tablet and mobile view, the most essential task is to find questions and comments, which is why we placed Search feature in top of the screen.
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.
Buttons on desktop vs. buttons on tablet and mobile
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!
