Background
The revamp project for the HK01 CMS aimed to enhance compatibility with multiple news portals and improve product sustainability.
Target user
As the editor and operator of HK01 and its sibling publications, we cater to a user base consisting of "superusers." These superusers have specific needs and preferences, and as a result, many features within the CMS are tailor-made to accommodate their requirements.
Problem
The previous version of the CMS lacked a well-planned and organized structure, resulting in unsynchronized UI patterns and inconsistent control behavior across different sections. This led to low sustainability for incorporating new features seamlessly.
Additionally, the previous version did not provide an intuitive CRUD (Create, Read, Update, Delete) control, which posed challenges for users and resulted in a steep learning curve.
Moreover, the presence of multiple sub-pages for creating a single piece of content often led to instances of users forgetting to save their work. These issues highlighted the need for a revamp to address usability and functionality shortcomings in the previous version of the CMS.
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.
Phase 1 Highlights
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.
1. WYSIWYG Approach to content editing
As mentioned earlier, the previous version lacked an intuitive user experience. Therefore, one of the goals is to simplify the CRUD (Create, Read, Update, Delete) controls and make them more intuitive. To achieve this, a WYSIWYG (What You See Is What You Get) editor is included. This editor allows users to directly edit text, images, and other elements on the editor itself, eliminating the need to open specific blocks for adjustments and saving. This streamlined approach reduces unnecessary steps and minimizes errors, providing a more user-friendly editing experience.
Before
The old version use blocks when creating content, and need to drill into those blocks when an edit is needed.
After
The revamped version allows users to do basic editing directly on the editor.
2. Restructure and modularize the CMS
One of the issues with the previous CMS was the lack of sustainability for new features, primarily due to an unplanned product structure. This resulted in inconsistent UI and behavior across different sections. To address this problem, as designers, we anticipated the potential future growth of the product. Therefore, all components used in the CMS were designed to be highly reusable, enabling a rapid design process with a consistent usage pattern. This approach ensures that new features can be seamlessly integrated into the CMS, maintaining a cohesive and efficient user experience.
3. Support sibling publications
Another goal of the revamp is to facilitate the editing and publishing of content for sibling publications, such as DW News and 巨子 ICON. To achieve this:
By implementing these features, the revamp aims to enhance the efficiency and flexibility of content editing and publishing, enabling seamless adaptation across sibling publications and multi-lingual support.
Flows of creating publication version and language version.
Phase 2 Highlights
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
As the foundation is solid, it facilitates rapid development and enables the integration of new features. Consequently, numerous features and enhancements have been implemented in the CMS. We have actively participated in the planning of these add-on features and have taken responsibility for all related design work. Here are a few examples:
1. Photo-story panel revamp
The revamp of the photo story feature, which focuses on image-type content, has been aligned with the front-end to provide a slide-show-like display format. The new version allows for individual or batch editing of image content. Additionally, the inclusion of features such as watermarking and drag-and-drop order arrangement has significantly increased the efficiency of the editing process, addressing a limitation of the previous version. These enhancements enable users to easily manage and customize the photo story content, resulting in an improved user experience.
2. Audit Log
A newly implemented function called "Audit log" has been introduced for versioning and tracking in all content creation sections of the CMS. This feature is designed to enable tracing of content changes over time. With the Audit log, a read-only version of each saved history is provided, allowing users to review and reference previous versions of the content.
3. Channel Management Panel
To effectively manage "zones" (parent-level) and "channels" (child-level), a split-table approach has been implemented. This approach involves utilizing separate tables to represent the clear channel hierarchy. The split-table structure allows for a visual representation of the relationship between zones and channels, making it easier to manage and navigate the hierarchical structure.
Challenge
After entering phase 2, tasks may no longer simply related to usability or product architecture only, but may deal with complicated functions, 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.
Besides functions, another challenging point is errors and edge case handling, in which logic and UX writing are really critical.
Example of edge case handling - temporary auto save when forced logout due to session expire.
