The Basics

A major feature of the Epochtalk forum platform is its robust administration tools. The initial design of the Admin views was perfectly functional, but needed improvements to the navigation, view layout and organization of control elements .

The Problem

Epochtalk was first built with a plethora of features allowing administrators and moderators to manage the forum. The features were all available, but the navigation around the views was a bit confusing. The layout and organization of the controls also made it difficult for users to find the information and actions they needed.

Goals for the Refactor

Improve navigation through the admin views and child views
Group information so it is easier to process
Improve flexibility of the interface (make it easy to add new controls as they become available
Retain feature parity with existing design

Design

Left: original Administration views. Right: redesigned interface.

The Admin views were well thought out and functionally complete—they just needed improvements to the navigation, layout and design treatment.

I started by rethinking the main navigation elements--tabs and sub-tabs that organized the controls into multiple views. The horizontal tabs in the original design were moved to a vertical sidebar along the left edge of the view. The tabs were condensed into icons + tooltips. The new orientation of the main navigation maximized vertical space available for the views, while keeping the navigation available as the user scrolls through the views.

The view’s title and sub-navigation now occupy the top of each view, making it easier for users to identify the view and navigate through the secondary areas.

I also moved the “Save” and “Reset” actions to an action bar pinned to the bottom of the view—making them available in a consistent location wherever the user has scrolled.

Improved Layout

I revised the basic grid layout to a 2-column layout with a 2:1 width ratio. This layout allowed less-often used controls to be placed in the thinner sidebar column. Some views with wider content—like big data tables—use a single-column layout, allowing the controls to use the full width of the user’s browser.

Refined Interface Components

I redesigned the Admin view’s UI components to streamline their appearance. I removed extraneous lines, fills and shading to simplify the UI and increase readability. I also reduced color usage to only active and important elements, making it easier for users to find the actions they needed.

I simplified the design of the panels (groups of controls), making it easier for users to glance around and find controls. Panel headers were made smaller and less obtrusive so the controls (not the header) would be highlighted. Main actions for the panel were moved to the right side of the panel’s header. Helper text was added below the panel header to give the user context for the controls.

Form Fields

I redesigned the fields to include the field label, helper text and secondary actions within the field. Persistent labels give the user context while minimizing the vertical space used by the field.

Active and error states were redesigned to allow users to easily find the highlighted fields without introducing visual clutter.

Tables

I simplified the table design to improve readability and reduce clutter. Table sorting and filtering actions were moved to the panel header—reducing vertical space and keeping all controls in a consistent placement. I used whitespace instead of horizontal lines to delineate rows. This increased legibility of the table while increasing information density—more rows could be displayed in the same amount of space.

Results

We presented the mockups to both internal and external stakeholders, and the feed back was overwhelmingly positive. The Super Admins were excited by the redesigned layout and compoenents. As of December 2022, the implementation of the design is in progress. We hope to deploy the new admin experience in the coming months.

Epochtalk Admin Views