top of page

CMS Revamp Project

vivovii, 3 months
Background

By providing insightful content and exercise derived from evidence-based research through various digital platforms, vivovii aims to assist individuals that are undertaking a journey of personal growth and discoveries in making better decisions.

 

A content management system (CMS) was built simultaneously with the digital platforms for content editors to upload articles to these platforms.

CMS_mockup_mpro.png

Mockup of the revamped CMS. Confidential information is masked

My role

After finishing the initial version of CMS, vivovii would like to revamp the entire CMS and transform it from an internal tools to an enterprise product for clients.

In this project, I was in charge of leading and running the whole iterative design process, from research, ideation to prototyping and delivering deliverables to the dev team. The UX deliverables I was required to provides included user flows, wireframes and mockups for the project.

This revamp project was divided into different milestones. In this case study, however, I would like to focus on the redesign of content editor and the publishing process only.

 

Due to my non-disclosure agreement, confidential information is removed and fictional content is added into this case study.

Challenge

CMS was originally built for internal use only, the initial purpose of building this backend system was to provide basic editorial functions customed for the features of our app.

 

However, as most of the features of mobile and web apps have been deployed as planned and we were also going to launch CMS to external clients. The user experience of CMS should also be considered.

 

With the business directions in mind, there were 3 high-level goals for this revamp project:

  • More focus should be put on the usability of each features and the whole system, such as how easy and quickly can users accomplish their tasks and how fast can new users learn to operate the system?​​

  • Layout and styling should be consistent throughout the product and with the rest of the product family.

  • CMS should support for different screen sizes as rest of the responsive web products did.

Process

Empathising the user needs

Screen short of the original content editor. Confidential information has been blurred out.

In order to grasp more background information on the product and the users, before kick-starting the user research process, I tried to familiarise myself with the system first.

 

After a couple trials, I had listed out the possible pain-points and needs of the users.

 

Then, I had decided to conduct an interview with actual CMS user to further understand the user needs and problems.

Gathered feedbacks for frequent and occasional users

The interview session was divided into two parts base on the different user group, namely the content team (major CMS users) and co-workers in other teams who had operated CMS once or twice only or has never used it before.

Part 1: Interview with content team

A video conference was set up between two editors in North America and the product team in Hong Kong. In this call, I was responsible for leading the interview to understand the team’s usual content creation and publishing process and to collect the feedbacks or frustrations they had during the process.​

Part 2: Interview and testing with occasional users

In addition to the meeting with the CMS frequent user. I had also run interviews with other CMS users.

 

Apart from asking their past experience in using the system. They were asked to complete several tasks, such as uploading a content onto CMS from a word document and how to attach related card.

A meeting was scheduled to collect feedbacks. Personal information has been blurred out.

By gathering comments and frustrations from existing users, I managed to validate some of my assumptions and also figured out the user journey of our editors from creating content from scratch to getting it go live and published.

Major insights and observations

Smiling Professional Looking Woman
Theresa

Content Editor - CMS Frequent user

She was required to use CMS to upload new content to the app

1. She viewed CMS a "converting" tool only

  • Minimal content editing will be done though CMS, because content will usually be created and amended by other online editing tool before uploading to CMS.

  • After copying the confirmed content onto CMS, they will focus on editing the format of the article only, as the html editor cannot recognise all the text style.​​

2. Content list was unorganised, so it was hard find the correct article.

  • Demo content created will be accumulated on the list, as deleting a content is problematic

  • ​CMS required them to click the delete button for 10 times, in order to delete the submitted content.

Mysterious Girl
Jane

Designer - CMS occasional user

She had used CMS before as she was asked to assist content team on some urgent matter

1. She got frustrated while uploading the content onto CMS

  • For example, from my observation, most occasional users was not able to complete the image uploading action in one go

  • ​It was not obvious to users that they will need to crop the image in to different aspect ratio manually after uploading the original image.​

  • Guidelines were not given to users and error message didn't define the problem clearly.

2. She started to be impatient as they continued the uploading process

  • Content editor was separated into different sections, and it is mandatory for users to completed and validate the information in the first section first before they can click the ‘Next” button and move onto the next section.

  • Some common features didn’t work as expected

Defined problems and needs

CMS had been serving its purposes functionally and assisting editor to upload and manage content that will be displayed to clients.

 

However, the features CMS provided were not intuitive and had a low usability, extra effort and unnecessary interactions were required to complete a task or even a straightforward action.

 

This had greatly lower down the working efficiency of content editor and new users would need others to walk them through the content uploading process.

Ideation

By combining the goals at the beginning of the projects and the user feedbacks. We came up with our problem statements:

How might we increase the content uploading efficiency?
How might we minimise the effort required for both first time and frequency CMS user?

With these statements in mind, I had held a few design sessions with two other designers in the team. During the design sections, different concepts or ideas related to the user needs had been brainstormed and discussed.

 

An iterative design process was taken, paper prototypes were created and tested with others to see if the new ideas were successful and unsuccessful. Feedbacks on the new designs were collected and analysis for generating new solutions or refining the ideas.

Artboard.jpg

Ideas, flows and paper prototypes had been generated and made during the brainstorming sessions.

Collaboration with the multiple roles

While ideating solutions continuously, I also had to discuss with both backend and frontend developers on the possibility of building certain features and interactions in the tight timeframe. In additional, constant communication with product owner was carried out, to make sure that the solutions we had in mind were aligned with the product objective, and had addressed user needs while maximising the resources we had for this project at that time.

 

Ideas had been banned or backlogged, at the same time new ideas had been generated during the conversations. Eventually, we had came up with a possible direction and solutions that could balance the concerns of different stakeholders.

Redesign Directions

As the discussion, we had decided to redesign CMS in following directions:

Feature

Redesigning the required interaction of certain components

For example:

  • Image cropper

  • Assessment picker

Validation

Optimising the validation process in the content creation phase.

For example:

  • Provide clear error messages with instructions

  • Rearrange and combine different sessions into one form

Technology

Improving the technical performance of the existing features

For example:

  • Enhance the html editor

  • Establish auto-saving draft

Overall process

Streamlining the content creation and publishing process.

For example:

  • Allow users to save multiple drafts for the same type of content

  • Allow users to delete unwanted contents

Use flow & Wire flow

During the ideation process, user flow of the content editor, and the content submission and publishing flow had also been discussed. With the feedbacks from rapid prototyping and comments from both front-end and back-end engineer, more defined flow was generated.

 

Wire flows with various use cases and edge cases covered were created. Flow chart created would be reviewed by development team and COO, and changes would be made if required.

IMG_0653_edited.jpg
IMG_0512.JPG

User flows and wire flows had been created along the iterative process.

Wireframes

While having back and forth changes on the flow, I had moved on to the next steps and started working on the design of interfaces.

 

Sketches and wireframes for difference features was drawn on paper and pen. Inspirations were also collected from design available online.

 

Improvements had also been made based on comments from product owner, design and dev team and users.

sketch.jpg

Concepts and ideas were first sketch on paper.

Mock-ups

As we had gain more and more understanding about users and concerns from other stakeholders. Hi-fidelity mockups were then created based on the wireframes I drawn earlier.

The user interface design process was further segmented into different tasks, according to the features, use cases and screen sizes.

During this process, I had also consulted and discussed with our branding and marketing designer, as the layout of the revamped CMS needed to match the branding guideline and the rest of the vivovii's products.

Following images were part of the redesigned features captured from the new CMS:

Top left: Auto image cropper ; Top right: Cover image gallery ; Bottom left: Assessment selector ; Bottom right: Editor with error messages. Confidential information has been masked.

UI library & Implementation

Since this project was separated in to different milestones, and we were aiming to build a new CMS a unified style within this platform and with other products. New UI components that were used frequently such as text input box, chips/tags and dialog boxes, were recorded and categorised. An internal UI library was built with the contribution from other designers and with the help of our frontend developer

After delivering all the flows and wireframes to dev team, they would build it according the scheduled pipeline. During the development, I would need to address the enquires of the developers to ensure the product was built as the proposed design.

 

Once the development was finished, I would sat down with our front-end developer to check the end product. Bugs and issues found would be fixed or logged.

bottom of page