Content management application for teachers

Avanti is a company that runs tutoring centers that provide Math and Science education to 11th and 12th graders in India. I redesigned their internal web application that teachers use to manage content–videos, worksheets, and tests.

Design brief

To improve the existing content management application in whatever ways I can

3 member team: Product Manger, Back-end developer and me
Project duration: 3.5 months

My role and process

  • Reviewed existing content, conducted user interviews, deconstructed the existing application
  • Identified problems and design opportunities with the existing interface
  • Proposed a new design concept
  • Conducted card sorting, created a new Information Architecture, created Axure wireframes and visual mockups
  • Took initiative to write HTML/CSS to move the project ahead when there was no other developer available
  • Worked with the back-end developer to get the changes implemented
  • Conducted user testing and proposed improvements

Impact

The biggest impact I made was that I helped the teachers save several hours of useless work. The new design helped reduce both the time spent and frustrations the users had in finding and adding content. Now they could focus their efforts on teaching and spending time with students instead of figuring out how to operate the application.


Building Understanding

Content review: I read through Avanti’s website and marketing presentations, watched recordings of classroom sessions, and visited a tutoring center. I also conducted in-person interviews with teams other than the target users to understand the ecosystem in which the users functioned.
User Interviews: I conducted remote one-on-one phone interviews with target users to understanding their work process. To get deeper insights, I later went to the user’s office which was located in a different city and conducted in-person interviews, both one-on-one and in groups.
History of existing application: I analysed the existing application by breaking it down into component parts. I discussed these parts individually with the head of the users’ team and the Product Manager to understand why those parts were built that way and what rationale inspired those decisions.
User walkthrough of existing application: When I met the users in-person, I also individually asked them to walk me through how they use the existing application and what problems they face. During the walkthrough, they suggested design ideas which served to uncover hidden motivations and frustrations.

Identifying Problems

User’s workflow: Through the research, I was able to develop a thorough understanding of the workflow and the tasks of different user roles and how they interacted with each other.

Problems with the existing application: Using that understanding and the feedback from the users, I identified problems with the existing interface and areas it could be improved in.

New Design Concept

Apart from the incremental improvements to the interface, I also saw the opportunity for bigger design ideas that could substantially improve the efficiency of the user’s workflow. The application currently was just a generalized content manager. However, it if were made customized to the user’s process, it could save them many more hours of work by automating the manual to-and-fro tasks that were currently being done between different parts of the team.

I prototyped these concepts as flows and interactive Axure wireframes and presented them to the Product Manager.

After discussion, we realised that implementing that design concept would not be feasible with the limited resources we had at the moment. But we decided to start moving towards it by tackling the problems in the existing interface that I had identified from my research.

Design Plan

So, we listed all the problems and categorised them into the 4 phases of the design process: Information Architecture, Navigation, Features, and Visual Design.

Given below are descriptions of how I tackled each of them.

Information Architecture using Card Sorting

The information architecture of the existing interface was a direct reflection of the way the data was organised in the database and did not match the user’s mental model. To understand the user’s ways of categorisation, I created a card sorting exercise using OptimalSort and tested it with 10 users. After analysing those responses, I came up with the new information architecture.

Navigation Design

The main navigation bar was not consistent across all pages and frequently-accessed content was not available in the right context. Other problems included misplaced features, hard to find pages, and dead links. I first explored different ideas for the new navigation on paper and then transferred the ones that worked to Axure. The Axure wireframes helped me communicate these ideas within the team and get concrete feedback.

Feature Fixes

Equation editor
Since the Math and Science content contains several equations, the users needed the ability to type these equations in the application. However, using the existing application’s equation editor was not easy for them. They were used to typing equations on Microsoft Word using a combination of a linear and a visual format. However, the application required them to type all equations only in the linear format. To get around this, they would type the equations in Word, then copy and paste them in the application editor. The results would be erroneous and corrections would take up even more time. To solve this, I searched online for open source Latex-cum-visual equation editors and suggested integrating one into the application editor.

Duplicating content
During the research, I had also identified a user need of duplicating a content piece within a topic and modifying and using it within another topic. The ‘Duplicate’ feature the existed in the application allowed creating multiple references to a content piece but did not allow duplication. This meant that if the user were to modify that piece in one topic, it would be modified in all instances. So I proposed making this correction in the back-end. In the final design, the icon and icon location was also changed to better reflect it’s purpose.

Duplicate resource

Visual Design

The existing visual design was just a shabby modification of Bootstrap. It lacked consistency, coherence, and appropriate affordances.

In the initial explorations, I tried using the same color scheme as the existing application. But it was not working with the new navigation design.
Then I designed a completely new visual look with a higher contrast color scheme. This was approved by the product managers, users and the company founder.
visual_final

HTML/CSS

Since there was no front-end developer available to code the new design, I took the initiative to fill in that need by writing the Bootstrap HTML/CSS. Below is the video of the final coded version:

User Testing

We did remote testing with users at two points during the development process: once midway when the new navigation was built and once right before deployment. The testing was done using specific tasks and think-aloud protocol. Since the code was on my local machine, we connected with the user using TeamViewer and Google Hangouts. The user was able to control my cursor and modify the interface, and I and others in the team could hear and communicate with the user via Hangouts as they were thinking aloud. The first test helped us to validate our direction. Based on the second test results, we made a few quick modifications to the interface before live deployment and noted the bigger changes for future development cycles.