Process book for redesign of the content management application for teachers at Avanti

1. Content Management
Application for Teachers
PROCESS

2. Brief that was given to me
Find problems with the current content management application and
design solutions to those problems

3. Conducted user research to find pain points
User interviews
Contextual observations
Think aloud walkthroughs of existing application

4. How teachers currently structure content

5. and their roles, tasks, and pain points

8. Problem # 1 : Categorization did not match the user’s mental model
It was hard for them to find content pieces because
Problem # 2: Content was buried too deep in the hierarchy
Problem # 3: Header was inconsistent and used vague iconography
and it was hard to type equations because
Problem # 4: The text editor forced the users to type equations in a format they were
not completely familiar with

9. For a sample user scenario:
“I want to add a Spot Test problem in topic Units and Dimensions”
Existing application flow: Problem #1, #2, and #3

10. Chapters listLogin
“I want to add a Spot Test problem in topic Units and Dimensions”
P#2: This is only a menu, no need for a table P#3:These icons don’t indicate what they mean or link to

11. Chapters listLogin
“I want to add a Spot Test problem in topic Units and Dimensions”
P#2: This is only a menu, no need for a table
Topics list

12. Chapters listLogin
“I want to add a Spot Test problem in topic Units and Dimensions”
P#2: This is only a menu, no need for a separate page
P#1: This categorization does not match the user’s mental model
Topics list Menu for topic

13. Chapters listLogin
“I want to add a Spot Test problem in topic Units and Dimensions”
P#3: Header changed suddenly
Topics list Menu for topic Problems list
P#3: Nobody understood what this icon meant P#2: After so many clicks,
we finally reach the content page

14. Here is how I solved these problems
P#1: Categorization did not match the
user’s mental model
P#2: Content was buried too deep
in the hierarchy
P#3: Header was inconsistent and
used vague iconography
Conducted card sorting and
recategorized the items

15. Card sorting and new categorization

16. Here is how I solved these problems
P#1: Categorization did not match the
user’s mental model
P#2: Content was buried too deep
in the hierarchy
P#3: Header was inconsistent and
used vague iconography
Conducted card sorting and
recategorized the items
Reduced the number of steps to
reach topic content

17. Very initial ideas for reducing steps to reach topic
For quick switching between
topics in a particular chapter
Need to only work within a topic
for a certain period of time
All menu on one side, like
book index
Not flexible to
accommodate new sections,
could get very long
All topics shown in
collapsible accordions
Too long page, hard to scan

18. Reducing the number of steps to reach content
Menu for topic Problems listChapters listLogin Topics list
Topic page
Due to technical constraints, we
prioritized just working on the topic
detail page as that was the biggest pain
point in the flow. After discussion and
refinement, we decided to go with this
design.
Left menu on the same page as content
allows for quick switching between
sections without having to go back and
forth between pages. Also module and
presentation menu is kept together as
those need to be coordinated for being
used at the same time in the classroom
Header
Problem
Problem
Instructions
Spot Test Problems
Spot Tests
Concept Videos
ConcepTests
Problem Solving Videos
Activity
5
3
1
0
1
4
1
PPTs 1
PPT Resources
Learning Objectives
Pre Test
Pre Readings
Pre-reading Exercise
In Class Exercise
Homework
Additional Practice Problems
5
3
1
0
1
4
1
Modules
Test Problems
1
1
Module Resources

19. Here is how I solved these problems
P#1: Categorization did not match the
user’s mental model
P#2: Content was buried too deep
in the hierarchy
P#3: Header was inconsistent and
used vague iconography
Conducted card sorting and
recategorized the items
Reduced the number of steps to
reach topic content
Added a feature to bookmark
commonly visited topics

20. Bookmark commonly visited topics
Allows the user to bookmark the topic/chapter for quick visiting again
Quick Links
PHY-11-JEE-01.1 Significant Figures Delete
Delete
Delete
PHY-11-JEE-04 Vectors in 2D
PHY-11-JEE-05.1 First Law of Motion
Add Quick Link

21. Here is how I solved these problems
P#1: Categorization did not match the
user’s mental model
P#2: Content was buried too deep
in the hierarchy
P#3: Header was inconsistent and
used vague iconography
Conducted card sorting and
recategorized the items
Reduced the number of steps to
reach topic content
Added a feature to bookmark
commonly visited topics
Consistent header with clearly
denotes current location

22. Consistent header
Clear primary navigation denoting current location
Breadcrumb denoting the location of current page
Clear association between content and topic
No dead links
Quick LinksChapters Modules Books Major Tests SettingsJEE 11 Physics
All Chapters Chapter Name Topic Name

23. Also, existing visual design was inconsistent and
not very coherent
Text Styles Colors

24. I created a new visual style
Text Styles ColorsText Styles Colors
based on a branding survey we conducted
within the organization

25. Combined all ideas into mockups and HTML/CSS

26. Combined all ideas into mockups and HTML/CSS

29. On the final code, I conducted usability testing
• Users were not able to recognize the quick link icon
• Users were confused with different location of chapter and major tests (new feature
added later)
• Users needed a separate place to store questions
Users were able to complete the tasks.
Other problems found
End of project at Avanti

30. Here is how I would design the interface now
Based on what I learnt in testing and improvement in my design skills since then

31. Menu for topic Problems listChapters listLogin Topics list
Topic pageMenu

32. Menu for topic Problems listChapters listLogin Topics list
Topic pageMenu

33. Other ideas I had suggested for future vision

34. Other ideas I had suggested for future vision

35. Other ideas I had suggested for future vision