INNOTATE
- Team Size: 2
- Role: Designer & Developer
- Timeline: 3 Months
Innotate is a Chrome Extension that I designed and developed for a learning analytics research group with the goal of empowering research teams studying online discource on Coursera.
AT A GLANCE
Conducting learning analytics research on large amounts of text data by hand is time consuming, tedious, and error prone.
Innotate is a specially designed Chrome Extension that streamlines the annotation and tagging process of learning analytics research. Innotate’s simple user interface enables researchers to accelerate their data collection process by leveraging the capabilities of the Chrome Extension API as well as AWS cloud data services.
- Usability Testing,
- User Flows,
- Wireframing,
- Interactive Prototyping
- Flask,
- DynamoDB,
- EC2,
- HTML,
- CSS,
- Javascript
BACKGROUND
Problem Statement
Conducting learning analytics research on large amounts of text data by hand is time consuming, tedious, and error prone.
Innotate is a tool that I built in conjunction with the Office of Academic Innovation at the University of Michigan. I was brought on as the sole designer and developer for this project, which helped me gain experience articulating and defending my design decisions to non-designers. Overall, I created a Chrome Extension that enables learning analytics researchers to analyze student discourse occurring within Massive Open Online Courses (MOOCs).
DELIVERABLES
My primary goal for the interface was to keep it as simple as possible, while still delivering an experience that lead to the efficient collection of consistent and useful data. In an effort to create something that served as many researcher’s needs as possible, I tried to decouple the tool itself from the platform (Coursera) as much as possible by capturing data automatically from the page.
EXTENSION FUNCTIONALITY
- Sign in using a unique identifier (their coder ID number)
- Capture Coursera page data automatically instead of manually
- Select the "best answer" from any specific discussion thread
- Create annotations within Coursera discussion forums
- Tag annotations with a customizable library of labels
- Manage all annotations within a specific thread
- Save all captured page data and annotations, according to their thread of origin, to a database in a usable format
WEBPAGE FUNCTIONALITY
Innotate from start to finish
The above video captures using Innotate to select the best answer from a Coursera discussion forum, creating annotations, tagging annotations, managing annotations, and saving annotations.
BACKEND
I chose to build the backend for Innotate using Flask and two AWS services: DynamoDB and EC2. The technical needs for this application were relatively simple:
- Capture data about the current page (course title, number of students, collective conversation volume)
- Enable researchers to annotate portions of student discourse within the forum
- Package the annotations and page data into a simplified JSON format
- Send and retrieve data from the AWS Dynamo database
REFLECTION
During my time working as the sole web designer and full stack developer for the team at the Office of Academic Innovation, I successfully created Innotate as well as a small set of similar tools that challenged me to learn new technologies as well as practice defending my own design decisions to a team of non-designers. I left the internship with a strong sense of pride and accomplishment for what I had managed to create during my time there.
Looking back, I would have liked to use more time to conduct usability tests with the actual end users who would be relying on my tools to aid in their research. I believe that with more research and insights into how they would utilize the tool, I could have made even more improvements into the workflow of the learning analytics researchers.