top of page
Frame 27424.png

Unified Content Editor

Overview

Content creators at Staffbase face challenges due to the absence of a single editing tool. Using different tools for news, website, and email editing causes inefficiency and inconsistency. Switching between platforms wastes time and hampers productivity. It also causes an inconsistent brand identity with various formatting options, leading to inconsistent styles.

Role

Product Designer
Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Pitching

2023

🤔Don't rush into the functionality design!

When designers encounter tool-oriented products with complex interactions and behaviors, they may get too focused on designing specific features from the beginning. However, this often leads to not giving enough thought to the overall design framework. As a result, adjustments at the framework level may be adjusted during later stages of product development, and could potentially cause permanent damage to the product.

Frame 27405.png
Analysis & Research

From customer calls and user research data, we have learned that the majority of users write content using other editors and then copy it into Staffbase. Only 12% of users utilize our online editor.

Frame 27402.png

Combind User Journey

In the requirements phase, the design and product teams research and analyze user scenarios, enrich user models, and create user stories. Attention to detail is crucial, including information flow between workflows and events that influence design decisions. Also, analyzing the similarities and differences in user journeys across three products.

Competitive Analysis

At this stage, performing a competitor analysis is valuable for addressing questions regarding layout, workflow, data elements, and interaction patterns. It enables us to learn from our competitors' strengths and make critical comparisons to identify our own advantages and differences. By comparing our current features with those of our competitors, we can reevaluate their priority and plan accordingly.

Frame 27400.png
Frame 27399.png

User Test

Later on, we extracted all high-frequency functionalities and validated them on the UserTesting website. The evaluation of larger functional modules and interaction hotspots is depicted in the following diagram.

Frame 27403.png

Functional modules

Once the layout of major functional modules is determined during the sketching phase, it is necessary to organize each functional element. We organize the functionalities based on their interrelation, frequency of use, level of importance, and categorize them into basic and advanced dimensions. 

Frame 27407.png

Visual Guideline

While maintaining consistency across all products, we also preserve the individuality and uniqueness of each product line by incorporating different brand colors.

Frame 27409.png

The Reorganization of Layout

We strive for a user-friendly and comfortable experience, where users can easily and enjoyably utilize all the product's features. By eliminating visual complexity and emphasizing clear design for content browsing, we establish a versatile visual style for different types of content. 

Optimizations such as increasing font size and using a comfortable line spacing of 1.6 enhance readability for longer texts. Additionally, while adhering to platform guidelines, we add subtle details like gradients to create a fresh and novel visual experience.

Kapture 2023-06-09 at 12.12.40.gif

Content hub

We are integrating the editor access and creating a new content hub module where we will place the main content editing module.

Frame 27422.png

Layout specification

To ensure better screen adaptability, the layout adopts a canvas size of 1440x768, with minimal deviation.

Frame 27397.png

Dashboard

The Content Hub Dashboard is a centralized platform that allows users to manage and organize their content in one place. It provides a comprehensive overview of all content assets. With intuitive navigation and powerful search capabilities, users can easily find and access their content.

Content hub.jpg

 Create Hub

We have streamlined the creation entry and user pathways, allowing users to choose their preferred editor from the start. Additionally, we offer the option to select from a variety of templates to further enhance their editing experience.

Frame 27420.png

​Multi-type Editor

With this flexible editor, users can seamlessly switch between editing modes, allowing them to work on different aspects of their content within a single interface. Whether it's fine-tuning text, enhancing visuals, or refining multimedia elements, the Multi-Type Editor provides a unified and efficient editing experience for creating engaging and professional content.

Frame 27427.png
Frame 27426.png
Frame 27428.png
Frame 27427.png

 Template

By integrating the template module, we have made the entire process more seamless.

Frame 27383.png

Preview & Publishing

We have enhanced the preview experience to ensure a refined and polished result. With improved preview functionality, users can now see exactly how their content will appear to their audience before publishing. This allows for fine-tuning and adjustments, ensuring a seamless and visually appealing presentation.

new-newsfeed2.png

Before

Frame 27429.png

After

We employ different sending strategies based on various samples.

Frame 27390.png
bottom of page