Content Management Application Navigation Redesign

Summary

About the company

Avanti Learning Centers is a company that provides after-school STEM tutoring to high school students in India.

About the product

The internal content management application was used by the content creators to manage learning content for the classrooms.

My role

Full-time UX Designer

Problem, Solution,
Impact

In the process of finding content in the application, the users would frequently get confused or lost. I redesigned the navigation to match the user's mental model, which led to users being able to find content easily, thus spending less time figuring out how the application worked and more time on their actual job of creating content.

Other team members

Product Manager, Front-end Developer, Back-end Developer

Process

Brief

Find interface problems with the internal content management application and design solutions to those problems.


Understood the business problem

Avanti's high-quality teaching content was one of their unique selling points. However, the content team was not able to create content fast enough to keep up with the academic timeline. This was partly due to process inefficiencies, which included specific tasks on the content management application.


Understood and analyzed problems with the existing application

I interviewed the users to understand their work process and their frustrations with the existing application. Based on the insights from the interviews, I found several problems in the flow of finding and adding content, some of which shown below:


Conducted card sorting to find user's mental models

To find how users categorized the different content pieces, I created an online card sorting exercise with Optimal Sort. Based on the 9 responses, I designed the new categorization scheme which I refined and improved with feedback from the product manager and the head of the content team.


Mapped the navigation and brainstormed ideas as sketches

Next, I mapped the new navigation. The items under each topic were finalized based on the card sort.

I sketched ideas on paper exploring the layout and interaction design of the navigation.

I also thought about how the design could be extended to include new features in the future.


Discussed and prioritized changes with the product manager and lead developer

I discussed my ideas with the team and we prioritized changes based on the potential for improvement in the user experience and the technical resources available.

The changes in the header included clear menu labels with visual feedback indicating the current page and a breadcrumb navigation indicating selected chapter and topic.

On the topic detail page, we added a new vertical menu on the left side for content items under that topic. This menu would help the users quickly switch between different items, for example, reference a 'ConcepTest' while uploading its corresponding 'Concept Video'.


Tested the application with 2 users

After the changes were developed, I tested the application with two users using the think-aloud method on specific tasks. With the new navigation, the users were able to find content without getting confused or lost at any step. Not only that, we gained new insights about how the application could be improved further.

After the project finished

Suggested more design improvements to the application

Based on what we learned from testing the application, I later thought about what else could be improved in the design.

One of the problems was that the hierarchy was very deep. A user said that "Every time we have to add something in a topic, we have to click on the chapter name, then topic name, then find what we need." Also, some users said that they remember the topic code since they are working on a topic for a few weeks.

Hence, the menu for choosing a topic could be designed as shown below. It could have the user's recently visited topics for quick access and a list of all chapters and topics which could be searched and filtered.

Below is the shown the screen clickthrough of how the user can select a topic to go into topic detail and then change the topic.

Below is the shown the screen clickthrough of how the search functionality on the topic list might work.