Designing a Content Management System in Under 24 Hours

Role: Product designer
Timeline: <24 hours
Tools: Figma
Team: 2 engineers, 1 product manager

Our team urgently needed a Content Management System (CMS) for a language learning app we're building, so I designed one from scratch in under 24 hours.

This system was designed to easily enter and manage information for each course we're building, along with the different sections, units and learning exercises that belong to that course.

View Case Study
CMS1CMS2CMS3CMS4

Concept & Research

I came up with 2 potential approaches we could go with for our CMS. One approach was to organize the data in a table, and the other was utlilizing navigation drawers arranged horizontally.

CMS wireframe 2CMS wireframe 1
Approach 1: Table
Approach 2: Navigation drawers

To decide between the table layout and the navigation drawer approach, I conducted a round of unmoderated guerrilla usability testing with 5 users.

Using both approaches, users were asked to find a specific lesson, take note of the course and unit it belongs to, and report back with any difficulties encountered during the process. I tracked the time it took for each user to complete this task.

CMS Research

The average task completion time for the navigation drawer approach was 77 seconds and for the table approach, 97 seconds4 out of 5 users preferred the navigation drawer approach over the table. Based on these usability test findings, I decided to go forward with the navigation drawer approach.

Designs

Users start by adding a course. They can select the course level, enter the course name, and save.

Course 1Course 2Course 3

Next, users can add sections and units the same way.

Section 1Section 2Section 3Unit 1Unit 2Unit 3

Once the course, section and units are populated, users can add different topics and learning elements under each unit.

Learning element 1Learning element 2Learning element 3

Next Steps

I plan to do some user testing to see where I can make improvements.

Some future enhancements we're considering are:
1. Enabling users to rearrange courses, sections and units
2. A search option to let users quickly find content
3. Bookmarking and notes to revisit key information

I also have weekly check-ins with the content, product, and engineering teams who use this tool regularly to gather feedback. I’m proud of what I pulled off in a day, but I’m excited to keep iterating and making enhancements to the CMS.