From 3 Hours to 1 Hour: Streamlining CMS Usability for Designers

Redesigning an internal content management system to reduce webpage creation time by 67%

Overview

As part of HP's digital team, we created intranet webpages for different departments using an internal content management system. The CMS was designed to enable designers with minimal coding knowledge to develop SharePoint webpages quickly. However, developers bypassed the system and worked directly in SharePoint, taking over 3 hours per page instead of the intended 45 minutes.

Timeline

1 Month - From research to implementation and validation

Role

UX Design Lead & Designer - Led the usability assessment and redesign of the internal CMS

The Problems

Limitations of the current CMS as discovered in the discovery stage.

icon

Severe Usability Issues

Designers and developers took more than 3 hours instead of 45 minutes to develop a single webpage because the system was complicated and not user-friendly.

icon

Developer-Centric Language

Labels used developer terminology instead of user-friendly language designers could understand.

icon

Information Architecture Issues

Content grouping and organisation didn't match users' mental models, causing confusion and inefficiency.

icon

Adoption Failure

Users completely bypassed the CMS and created pages directly in SharePoint instead.

icon

Navigation Problems

RFew navigation cues and unclear pathways made it difficult for users to complete tasks.

Solution

Through comprehensive usability fixes, we redesigned the CMS to align with user mental models and workplace language. The new design enabled designers to create webpages in less than 1 hour, with users expressing satisfaction and commitment to using the system for future development.

green-check

Improved Labeling

Replaced developer terminology with user-friendly language that matched how designers think and work .

green-check

Restructured IA

Reorganized content grouping to align with user mental models and natural workflows.

green-check

Visual Guidance

Added visual cues and directional indicators where users struggled to complete tasks.

The Design approach

Did stakeholder interview

What is the business objective?

  1. First objective was to make the CMS user friendly so that user/designers/developers should be able to develop the webpages using this CMS within 1 hour
  2. Improve the overall user experience of the system

Value for Designers

By improving the user experience of the product users time will be saved and help them to create/deliver more webpage per day with less error and effectively Also user will start liking this product for future usage

Who are the users?

Primary users are: Web designers, developers

What are success metrics

  1. Users should be able to created single webpage within 1 hours
  2. User should be satisfied with using this CMS and use the same for creating webpage in future instead of directly creating the webpages in SharePoint.

Identified different types of users and did user interviews

Identified their key goals /Critical activities along with their knowledge about the technologies and the environment they will be operating, Identified their motivation, their likes about existing site and pain points/frustrations etc.

Conducted the Heuristic evaluation of the product

As I was also one of the users of CMS conducted heuristic evaluation of the CMS and identified few issues and prioritised the same based on severity

Conducted usability testing of the product

As I was also one of the users of CMS conducted heuristic evaluation of the CMS and identified few issues and prioritised the same based on severity

Output/Insights from Usability testing.

Users were not able to complete tasks without help from the CMS developer

1. Because, they labelling were not as per the user language.

2. Grouping and organisation of the content was not as per users mental modal

3. There were no visual cue/ direction where ever required when the user were struggling to complete the tasks.

Created the new wireframes as per the recommendations.

Created the new wireframes addressing/fixing the issues identified from Heuristic evaluations and usability testing .

Created the Clickable prototype of wireframes and did usability testing

Created the clickable prototypes and did the usability testing of the wireframes with same set of tasks to identify whether users were able to complete the task on time, without error and were they able to learn the system quickly and how much they were able to remember when creating the next page

Users were able to created the pages within 45 minutes after fixing the Labelling issues, Information architecture issues and providing the visual cues where ever and whenever necessary.

Now the users learned the system in the very first time of creating the webpage as it was matching their mental modal and the languages were used as per the webpage development requirement

Visual design mockup and HTML files.

Couldn’t improve much from visual design perspective as there was no time and development of new design would have taken more time

Scenario 1

Users should be able to created webpage as per the pre-defined layouts, and then populate those layouts using the HTML design elements which are available in the CMS as pre-defined components, post which they can fill the contents in those elements as per the client requirements

Wireframe

homepage wireframe-image wireframe-image wireframe-image wireframe-image wireframe-image

Impact

impact