HK01 CMS

The core content management system for publishing, listing, and feed setting

Info

Revamp project for HK01 CMS. Aimed to be compatible with multi-news portals and increase product sustainability, we had conducted the following starting works in the first phase.

Target user

Editor and operator of HK01 and sibling publications. As our users are so-called "superusers", quite a lot of features are specifically tailor-made, the CMS has a particular user manual for them.

Problem

The old version does not have a well-planned and organized structure, which leads to unsynchronised UI patterns and control behavior among all CMS sections with low sustainability for new features.

Also, the previous version does not provide an intuitive CRUD control, which brings a high learning curve to users and sometimes causes "forget to save" issues as many sub-pages were included for creating a single piece of content.

The previous version does not provide an intuitive CRUD control. Use article edit section as example, users could not adjust the position of content elements and need to come across different sub-pages for completing an article, for example, they need to add "blocks" for every element, and need to open the particular block sub page for editing, even for plain text.

WYSIWYG Approach to content editing

As aforementioned, the previous version did not provide an intuitive experience, therefore, one of the goals is to simplify the CRUD control and make it intuitive. WYSIWYG editor is included, which could eliminate out most of the non-necessary steps and errors, i.e. users could simply editing text, images, or other elements on the editor directly instead of open up particular blocks to tune and save.

The old version required users to keep using blocks when creating content, and need to drill into those blocks when an edit is needed. The revamped version allows users to do basic editing directly on the editor.

Phase 1

My role

1. Discuss product direction and requirement with stakeholders.
2. Review and do enhancement on product structure.
3. Propose and development flows, UI, and product direction.

Old

New

Restructure and modularize the CMS

One of the problems of the previous CMS is the lack of sustainability for new features, which is caused by a non-planned product structure. UI and behavior could be so different when across sections. We as the designer had foreseen the possibility of the product in the future, therefore all components that are using in the CMS are highly reusable, to make sure the design process could run rapidly with a consistent using pattern.

Design guideline of components (Part of)

Support sibling publications

Another goal of the revamp is to serve sibling publications for editing content and publish, such as DW news and 巨子 ICON.

An article is able to be generated into different publication version.
Besides publication version, it should also be able to generated versions for different languages under each publication.

Flows of creating publication version and language version.

Ongoing features and revamp

Once the base is concrete, it facilitates the development speed and is capable to carry new features. Therefore, there are tons of features and enhancements had happened on the CMS. We had participated in all add-on features planning, and responsible for all related design work.

Here are some examples,

Phase 2

My role

1. Discuss product direction and requirement with stakeholders.
2. Review and do enhancement on product structure.
3. Propose and development flows, logic, and UI.
4. Mentorship
5. UXUI review and supervising

Credit to teammate
Prisca Lee

Photo-story panel revamp ⬆

The revamp of photo story (image-type content) had aligned with the front-end, a slide-show-like display format.

Image content could be edited individually or by batch. Watermark and drag and drop order arranging had increased the efficiency of the editing process which was absent in the old version.

Audit Log ⬆

Audit log, a newly implemented function for versioning and tracking which is applying to all content create sections in CMS, aimed for content changes tracing. A read-only version would be provided for every save history.

Channel Management Panel ⬆

For managing "zone" (Parent-level) and "channels" (Child-level). A split-table had been used in order to show the clear channel hierarchy.

Challenge

When entering phase 2, tasks may no longer simply related to usability or architecture only, but may deal with abstract tasks, like pin post to specific location of a news feed, create schedule listing, etc.

The flow of creating schedule listing, in which scheduled items would be published and unpublished from time to time on a specific position of a listing. The challenging part is to include the logic of the "pin" function which means the user could "pin" an item on that position which will override the schedule.

Example of edge case handling - temporary auto save when forced logout due to session expire.

Besides functions, another challenging point is errors and edge case handling, in which logic and UX writing are really critical.