Content Management Application for Teachers at Avanti Learning Centers
Improved the information architecture and visual design of the internal content management application meant for teachers at Avanti, a company that provides after-school STEM tutoring to high school students in India.
- User interviews and observation to find pain points
- Prototyping and evolving ideas as wireframes
- Creating high-fidelity visual mockups with improved visual design
- Implementing visual design changes in HTML/CSS
- Testing with users and suggesting future improvements
- Coordination between developers, product manager, and users
Product Manager, Developer
Associated Business Problem
Avanti's high-quality teaching content was one of the unique selling points for the business. However, the teachers were not able to create learning content fast enough to keep up with the academic timeline. This was partly due to process inefficiencies, which included specific tasks on this application. Hence, a better design of this tool would help towards clearing this operational bottleneck.
Teachers could spend more time and effort on their real job of planning and creating content rather than getting caught up in the confusions of how to use the application.
Find problems with the current content management application and design solutions to those problems
User research : phase 1
Conducted remote phone interviews
The primary users of this application were the employees at Avanti who created and managed classroom content (the Content Team). Since they worked out of the office in a different city, I interviewed them remotely to understand their process.
User research : phase 2
Observed and interviewed users in-context
To get deeper insights, I worked out of the Content Team's office for 5 days. During this time, I conducted one-on-one interviews, focus groups, and think aloud walkthroughs of the existing application. All that information helped me understand their work process in greater depth.
Distilled problems with the existing application
The existing application was built as a tool to collect information in one place with customised navigation and content categorization. But that was not achieved since it had several problems with the navigation including the information architecture not matching the user's mental model, which added extra steps in an already complex process of creating content.
Ideation and wireframing
Proposed new design ideas
In addition to the features already present in the applicatoin, the research data presented several opportunities where this application could help speed up the content team's process by automating many manual tasks they were currently performing. The content management application could serve a much bigger role than just being a repository of content. It could truly become customised to the team's process and free much more time for them to be more productive.
I extracted ideas from my conversations with the users and developed them in the form of flows and wireframes.
Discussed and prioritized with the development team and product manager
I presented these ideas to the development team and the product manager and got their feedback. Since we had very tight development constraints within the organization, these ideas were too ambitious for now. So I evaluated the design practically from their perspective and proposed making incremental improvements to what already existed based on what I had learned.
Together, we decided changes that would require the least development effort and could potentially have the maximum impact: the content categorization and navigation design.
Card sorting and navigation design
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 created the new categorization scheme which I refined and improved in discussion with the product manager and the head of the Content Team.
Taking lessons from the conversations with users and the card sort, I designed the new main navigation and side menu. This new design had consistent headers, meaningful labeling, and ability to quickly find and switch between items despite the deep hierarchy. The central idea was to enable the user to get to the content in a fast and easy way.
Refreshed the visual design to make it more consistent and match Avanti's personality as an organization
Before this project started, the marketing manager and I had conducted a brand survey to find how internal employees perceived Avanti as a brand. The keywords that employees used are shown below.
The existing visual look did not reflect these ideas. Another problem was that the different UI elements were neither consistent, not coherent. So I revamped the visual look, created mockups for different screens, and made the corresponding changes in the HTML/CSS code. Below are screenshots from the final coded version.
Tested the application with 2 users
I tested the application twice during the development effort using the think-aloud method on specific tasks and made incremental improvements to the design based on the feedback. The biggest validation was that new categorization for elements under a topic and navigation design worked well. What did not work so well was the placement of the tests, which were newly added halfway during the development process, and the icon/feature to bookmark topics. Also, there was lack of a central repository for questions. These lessons informed ideas for future improvement.
How I would do it now
Even though I was moved to another project after the testing phase, I have been thinking about what else could be done better. Based on what I learned from the testing, and the improvement in my design skill since then, I would have made the following changes.
The first landing page would show a menu from which the user can choose a topic. It will show recent topics visited on the top for quick access and will also have a list of all chapters and topic below. That list can be both searched and filtered.
Once the users click on a topic, they can see all the content pieces within a topic categorised by presentation and module. Problems could be presented as a table rather than as cards so information is both easily scannable and filterable.