Problems to Solve
When users selected multiple filters, it was very common that the dots overlapped, making it unable for the users to select certain dots
Not sure of use-case for Weekly Online Activity
Course Grade interactivity (card) on chart did not match that of Weekly Online Activity (tray) and was not big enough to visually place all the useful information for users
Drop down to switch pages was not user friendly
Data loaded slowly on each page
Kebab (three dots) for table view and turning on shapes (a11y compliant) were not user friendly, hardly worked correctly, and frustrating
No date range picker
When transitioning the dots to the bar solution, we needed a way to comply with a11y
“All Sections” tag was not dismissible which caused confusion when filtering under the “Students” tab
If a user filtered by a section, the “All Sections” tag would still be there so it looked like the students list just always had all sections in the list when that data was not correct
Before
After
The Process/Solutions
Problems:
Navigation and layout
Overlapping dots, meaning users can’t access the interactive information
Not sure if the use case for this chart was in line with what users needed/wanted
Needed to make sure the data being pulled for the chart was in parody with other data sources
V1
We tried to make the most improvement and impact with the least amount of effort and time with our limited engineer resources. This meant only changing the dots to bars, solving the overlapping dot problem.
V2
Started asking questions such as:
What data viz do users really want to see?
A: Sessions and student activity
What else can we offer?
A: Popular student activity
Q: More drillable information regarding sessions
How can we provide parody across all data sources?
A: Using sessions rather than page views and participation
V3 and beyond
Started exploring what drillable information users might be interested in
Q: What are users asking for right now?
Q: What more can we provide?
Problem/Questions to ask:
Is a card the right solution?
“Message students who” became messy when there were 10+ students
Card didn’t align with the tray used on other pages within analytics (Weekly Online Activity)
Is the histogram showing the information users want to see?
Poor experience to switch from dot to dot and open individual cards
Solution:
Move all card information into a tray
Keep the histogram but have it correlate and interact with the other information
“Message students who” correlates with the histogram
View the applied filters within separate tabs in the tray
Changed analytics navigation to tabs instead of a drop down/select
Matches patterns, easier navigation
Moved the “students” and “resources” tables that were under the “course grade” and “weekly online activity” charts to separate tabs
Loads data faster on separate tabs
Easier to find information
Discorrelation of information and navigation between the tables and charts
User frequently asked for the ability to view by a date range or term
Added the date picker with those abilities as well as to see all assignments with no due date
The View As Table link text was used to provide parody between this Analytics product and another product within canvas
Display Patterns, previously Display Shapes, was moved to not be hidden so users have easy access and quickly check this feature on/off
Problem:
“All Sections” tag was not dismissible which caused confusion when filtering under the “Students” tab
If a user filtered by a section, the “All Sections” tag would still be there so it looked like the students list always had all sections in the list when that data was not correct and it was filtered by the specified added filter
Solution:
“All Sections” tag would be the default tag, but be dismissible.
Add an empty state if the user dismissed “All Sections” and there is no other filter applied