Reinventing News Consumption
CMS 2.0 Iteration
Jul. 2023 to Aug. 2023
My Role
VP of Product, Founding Designer
Tools
Deductive Method, Inductive Method, Interview, A/B Test, Figma, Jira, Ant Design
Team
Chris Hadley(CSO) 、Roger Hu(CEO)、Keren Chang(Developer)、Nicole Weatherburne(Developer)、
Koa Jheng(Developer)
Goal
-
Increase the medium and full news number at least 30%.
-
No more duplicated editing.
-
Increase the Key Event number to 10%.
IMPACT
-
Design a mechanism that allows news to be reused, increasing the wysk news number 50%.
-
Design a collaborative editing to assist editors in avoiding duplicate news production.
-
Enhanced the procedure for adding new content to Key Events, leading to a 48% increase in its quantity.
WHAT CHALLENGES WE FACE
-
How can we enhance the content quality?
-
How to manage concurrent users editing?
-
How to improve efficiency for Key Events editing?
Explanation: read before start
The Wysk News Type
Design Method
Primary Research + Low and High Fidelity Prototype
Design Issue
With the launch of CMS V1.0, we started at 10 news articles per day, scaling up to 30 per day. Collecting over 2000 data points allowed us to steer our iteration direction.
Data collecting and analysis
1 month
Define Issue
Following data analysis, we presented hypotheses to editors to establish guidelines and design direction.
Confirm with Stakeholders
1 week
Solve Problem
It's a cyclical process where, upon determining the design direction, ideas are generated using reasoning and deduction. Prototypes are then created as needed to facilitate design discussion.
Inductive & Deductive then made prototypes
5 days
Challenge 1
How to Improve Content Quality while Ensuring Scalability?
1
Strategy
Separate Big Picture as a Content
-
The times of Big Picture appearances does not match the times of editing raw data according to the data.
-
There is a strong correlation between Big Picture and Key Events, allowing for integration.
2
User Experience
Design an Editor for New Content Strategy
To accommodate the independent editing of BP and consider scalability and various editing scenarios, we have created a new editing page for convenience.
3
User Experience
Import Content with Preview Provided
Considering scalability, there will be a large number of Big Pictures in the future, and editors cannot determine the content solely based on the title. Therefore, we have designed a preview page and search function.
Solution 1
Create Reusable Content
1. Adjust news architecture
Before
In CMS 1.0, all content is treated equally. This means that if editors want to create a full Wysk news article, they have to start from scratch each time.
After
The Big Picture and Key Events are strongly connect, combine them and reuse it to make more full Wysk news!
2. New Big Picture Tab and Editor: for Managing Reusable Content
Why we design it?
Following testing, adding a new tab and dashboard greatly improves experience, allowing users to create, edit, and delete to the content.
What impact on users?
No tutorials required; streamlined with the CMS 1.0 design system and featuring a text-based search system that aids users. Editors are enamored with this new design.
Other new features
Big Picture Editor
Browse and select a Big Picture for editing or deleting. Maintain CMS Design Language for Seamless User Experience.
Alert of Duplicating
Streamline editing with duplicate features for similar content.
3. Wysk Editor: A Preview Pop-up for Producing the News
Why we design it?
We need an entrance to insert the reusable content, but need to keep the original Wysk editor's experience. We selected the pop-up as a solution among 3 proposals after discussing it with stakeholders and developers.
What impact on users?
As a Big Picture editor, no tutorials are required; it is streamlined with the CMS 1.0 design system.
Popup for Previewing and Import
Designed a popup allowing users to search, preview, and import the reusable content with 0 learning curve.
The Result of Inserting Content
Efficient Editing: Click to Insert Reusable Content.
Challenge 2
How to Manage Concurrent User Editing?
1
Strategy
Keep Everything on Database?
The original plan was to enable simultaneous editing while preserving files in the database and publishing the latest version. However, the CTO estimated that implementing need to take two months and raise Firebase costs. Hence, the final solution is simple to notify users when a file is being edited and restrict other editors' access.
2
Information Design
How to Notify the Editors
According to the design direction, we use notifications to inform and block editing access to prevent duplicate edits. However, the design of notifications must be clear and immediate.
3
Test and Iteration
Derived Problems and Solutions
After testing, it was found that editors occasionally stayed on a specific news page without exiting, preventing other editors from accessing it. Consequently, we implemented a button to allow users to enter the editor forcibly, but we also warned the result of entering.
Solution 2
Build a Collaboration System
Why we design it?
Considering cost and usage, we found that 3 or more editors editing the same news simultaneously is unlikely at this stage. So blocking access and showing who is editing suffices for our current needs.
What impact on users?
Based on editor feedback, simply seeing that someone else is already editing a news item is sufficient for them to work on other news items.
The Block Popup
In addition to the red notification, a popup alerts users of forcing editing. However, we allow users to proceed despite the alert, considering that some editors may unintentionally block the process by forgetting to leave the page during testing.
Force Entering
The system logs editing history, allowing lead editors to identify the responsible party in case of forced editing errors.
Challenge 3
How to Enhance Key Events Editing Efficiency?
1
Data finding + User Research
Understanding Editor’s Behavior
The initial design was to use a UI editor to create key events. However, based on data, and the interview, it was found that editors collect events combinations in Google Sheet before entering the WYSK editor to produce news.
2
Design Process
Facilitating Consensus
-
Developers denied read data Google Sheets directly
-
Analyzed the editing spreadsheet and identified a pattern: yyyy/mm/dd: content.
-
Convinced both to sides use the pattern for editing.
-
Editors could directly copy data into the Wysk editor to create Key Events.
-
Developers completed the development within the schedule.
Solution 3
Batch Editing for Key Events
Why we design it?
A solution to allow editors to create Key Events by their content create flow.
What impact on users?
Previously, it took 1 minute to create a single Key Events entry. With the new design, creating 100 Key Events entries now only takes 10 seconds.
Follow the Editor's Working Flow
Editors compile key events on a Google Sheet and seamlessly transfer the data to the Wysk CMS for publication.
1 Click to Creates Multiple Key Events
Based on the consensus regarding the data format, the developer constructs a user-friendly system, while editors efficiently curate the Key Events.
Result
Significantly Enhance Content Quality
Achieve 100% of the Goal
The Content Quality Index increased from 8% to 52%
Before
July 2023~August 2023
The medium and full news only account 8%
After
September 2023~October 2023
The medium and full news increased to 52%!