April 2022

iN2L CMS

The content management system (CMS) allows iN2L employees to author and edit content for use on the iN2L platform.

Project overview

Optimize the architecture and user-interface of the current content management system based on employee feedback.

I.

Project duration

December 2021 to April 2022

II.

The problem

The current CMS was tied to existing devices and suffered from poor performance.

III.

The goal

The new design seeks to improve work efficiency by simplifying common tasks and adding more automation to the process of managing content. It is also device agnostic, making it more future-proof than the current version.

IV.

My role

UX researcher and UI designer designing the iN2L CMS from conception to delivery.

V.

Responsibilities

Gathering information from personal research and interviews. Writing and discussing information architecture with the content team. Designing and testing low and high-fidelity prototypes with the team and iterating on designs based on feedback.

View Design System

Understanding
the user

  • User research
  • Problem statements
  • Information architecture

Usability research: Summary

The iN2L content team confirmed initial assumptions about the CMS. Personal experience and a competitive audit of other content management systems identified common patterns and expected features.

Usability research: Pain points

1 Financial

Content editors were spending most of their time waiting for operations to complete, or following obsolete methods to complete their work. This inefficient use of time costs the company money in lost wages.

2 Product

The CMS was built using old and inefficient code and the user flow did not follow modern conventions.

3 Process

Basic content creation and editing took an inordinately long time and users would have to keep multiple tabs open to be more efficient.

Information architecture

Mapping the user's journey through content creation revealed what new views were needed to have the best experience.

Starting
the design

  • Notes

Notes

I met on several occasions with the content team, interviewing them as a group, to take notes. We reviewed the current CMS together and discussed pain points. After reaching a consensus I moved onto the next step.

Initial Findings

1 Wish List

Content editors already had a wish list of improvements. It was important that I include these along with the pain points I discovered.

2 Simplification

The current CMS suffered from unnecessary duplication of data that could lead to syncing issues. The redesign should eliminate those issues.

3 Discovery

Finding content in the current CMS required memorization of paths. The redesign should have search and robust filters.

Refining
the design

  • Wireframes
  • Low-fidelity prototype
  • Mockups
  • High-fidelity prototype
  • Accessibility

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

These first concepts helped the content visualize concepts that were difficult to explain verbally, such as combining library and layout items onto one page.

Low-fidelity prototype

Based on feedback from meetings and the wireframes I created a lo-fi, interactive prototype in Figma. This had the desired effect of demonstrating concepts that were difficult for the content team to visualize.

View Lo-fi Prototype

Mockups

Additional mockups were needed based on feedback from the low-fi prototype including:

  • Media library
  • Schedule
  • Rotation

Key Mockups

High-fidelity prototype

The hi-fi prototype demonstrated all the potential workflows the content team requested. It included content filtering, dialog pop-ups, and error states.

View Hi-fi Prototype

Accessibility (a11y) considerations

1

Added content label and description to title

2

Added alt text requirement to media library images

3

Used high contrast colors

Going forward

  • Takeaways
  • Next steps

Takeaways

What I learned:
The content team had acclimated to the current CMS workflow and couldn’t see the massive issues affecting their processes. It took a lot of patience and demonstration to convince them initially that huge changes were needed. Once they were aware of the issues, they were completely on board with the redesign.

Next steps

1

Continue to process feedback

2

Create responsive layouts for mobile devices