Front-End User Editing - Content Management System
Similar to other content management systems developed in around 2010, the legacy content management system employed the traditional user experience of logging into the system and adding pages using a WYSIWYG editor. However, users were unable to preview the appearance of the content until it was published. In recent years, there has been a shift towards "front-end" editors, allowing users to see real-time previews of their content. As the design department head of Schoolzine, I had the opportunity to lead the UX/UI design project that involved transitioning our proprietary content management system to this contemporary style. This change was part of our company's strategy to transition into a SaaS operation.
Project Overview
Schoolzine’s digital newsletter product differs from traditional email marketing newsletters. Although the newsletters are sent via email, recipients are directed to a webpage that displays the newsletter content. This approach allows for more flexibility in programming the newsletters, as the company initially created its newsletter product over fifteen years ago when coding HTML emails was less advanced. Additionally, this method enables the inclusion of features such as an archive of previous newsletters and the ability to make changes to a newsletter after it has been distributed. Given the importance of the digital newsletter to the company's product offering, it was essential for the new visual editor to seamlessly integrate with the existing platform and maintain backwards compatibility with their current DIY newsletter product.
Problems
Customer hesitancy towards change
Incorporation of newsletter components into the current content management system, ensuring seamless integration with the existing user-generated content.
Challenges arise from the complexity of the newsletter template structure, stemming from outdated coding approaches utilised in previous years.
Proposed Solutions
Implementation of a user guidance framework within the corporate knowledge base, offering comprehensive instructions through various media formats such as textual guidelines, GIFs for simple tasks, and instructional videos. Additionally, integrating a guided tour feature for first-time users constructing newsletters, ensuring the ability to replay this process through the Support panel.
Developing content management system (CMS) user interfaces capable of displaying new front-end articles/posts in traditional formats, while utilising React for component creation. This approach facilitates the extraction and incorporation of existing content data into the new structure, enabling modifications without impacting the original posts.
Designing a novel newsletter template that enhances performance by reducing loading times and unnecessary code. Moreover, ensuring compatibility with the existing template, allowing for seamless transition and continued use.
Role:
User Experience Designer
User Interface Designer
Visual Designer
UX/UI Design:
Competitive analysis
User surveys and one-on-one interviews
Personas
Task flows
Site map
Low-fidelity wireframes
High-fidelity mockups and prototypes
Design system
Usability tests and findings
Project Specifications:
Tools:
Adobe XD
Photoshop
Illustrator
Balsamiq
Draw.io
Research
We conducted primary research by administering customer surveys and conducting one-on-one interviews with a select group of trusted partners. Additionally, we collected secondary information from Schoolzine's Sales, Marketing, and Customer Support teams, who provided insights into user behavior based on their daily interactions.
The initial focus of our research was to determine which content management systems our customers were actively using or aware of outside of our own product. By analyzing analytics data, we gained valuable insights into the types of features and components that were popular among users, including photo galleries, media embeds, forms, and polls.
Furthermore, our team extensively evaluated various content management systems that employed visual front-end editors.
Findings
There was a limited response regarding the use of alternative content management systems that users had previously used and engaged with. This can be attributed to the fact that most administrators have exclusively utilised Schoolzine's platform.
To address this, my team and I gathered a concise list of other content management systems that feature front-end visual editors. We then conducted a thorough evaluation of these systems based on the customer surveys. Additionally, we considered recommendations from colleagues within the office.
From the few survey responses that mentioned experiences with other CMS, we identified a set of preferred and disliked functions and utilities that significantly influenced our design process.
Customer Personas
We’d previously investigated customer personas during the process of planning the new version of the SZapp mobile application. As these customer personas are still the main types of users that would be creating newsletters for their school, we utilised those again when justifying our decision making during the planning of the visual editor.
Newsletter Content UI
The user interface (UI) and functions of the newsletter content editor underwent multiple iterations due to changes in functionality.
Flow Charts
The utilisation of Flow Charts proved to be highly beneficial in effectively charting out the required processes and functionalities for our users. We placed great importance on prioritising the needs of our Doris users, ensuring a smooth and seamless experience for their introduction to our platform. By meticulously crafting and enhancing these flow charts, we attained a comprehensive understanding of the essential features and functionalities necessary for our users in creating a newsletter.
Sketching, Planning & Prototyping
Sketching facilitated the acceleration of functional option development. Our team collaborated to generate multiple strategies for guiding users through the process of creating and distributing newsletters. To enhance understanding of our operational procedures, we produced a series of low-fidelity prototypes using Balsamic. These designs were then integrated into Adobe XD files, allowing internal stakeholders to comprehend the usability procedures.
After evaluating the designs from a user standpoint, we had determined that adopting a minimalist approach would be more suitable. Unlike other visual editors that provide users with extensive choices to customise each element of content appearance, we realised that this may be overwhelming for individuals with limited technological expertise. However, taking into account feedback from some users who expressed a desire for more control over content design, we had developed an advanced options solution to accommodate both user groups.
High Quality Designs
During the design process, we recognized the importance of providing a clean and organised environment for our users to create content within a newsletter template. In order to achieve this, our team intentionally designed the interface to display only the content area and the content creation user interface, aiming to minimise clutter and visual noise. As part of this approach, we incorporated a preview button that allowed users to view their content within the template before finalising it.
However, when we presented these high-quality designs to our customers, they expressed concerns and reservations about this particular functionality. They indicated a strong desire to see the newsletter as it actually appeared throughout the entire creation process, as viewing only the content area was too abstract.
(Full version under NDA)
Improvements
As the development of this product has been paused, there has been a lack of real user feedback regarding the user experience from a hands-on perspective. Therefore, all suggested improvements are based on a reflection and review of the designs two years later.
The main strength of this front-end editor is its simplicity. In this iteration, the company aims to keep the editor user-friendly, without overwhelming users with numerous layout functions like columns and rows. This approach allows users with limited technical knowledge to easily use the editor's functions. However, this simplicity may pose a challenge for other platform users who wish to expand their newsletter designs and layouts. Therefore, conducting further analysis on how to enhance customization abilities would be beneficial in the long term to meet user demands.
Upon displaying the editor with the full newsletter template, there is a significant amount of visual clutter on the screen. This excessive visual noise could hinder some customers, especially those with visual impairments. To address this issue, it would be helpful to introduce a toggle feature that allows users to choose whether to visualise the visual editor within the template or not. This approach would cater to the preferences of both parties. It is recommended that this setting becomes a default option on the user's account, ensuring that users experience the editor according to their preference in the future.
The section that is currently being edited by the user is outlined by a dotted border, serving as an indicator. However, this subtle cue might not be noticeable enough, and it would be advisable to incorporate a more visually impactful cue.
Lessons from the Project
Although not prominently featured in this case study, it should be noted that the project's scope was significantly larger than originally anticipated. We encountered an extensive range of sections and areas for which we ultimately crafted design structures, specifically when considering the customization options to be offered to customers. This experience provoked the realization that projects of this nature may benefit from a preliminary document articulating the functional design requirements for each component prior to commencing the design process.