UCLA

Annotations for the classroom

The Department of English at UCLA is renowned for supporting groundbreaking research and innovative teaching excellence. Students and educators were having trouble collaborating effectively on document annotations for assignments.

Strategy

Through interviews, focus groups and feedback, we learned that teachers needed a way to easily upload or scan content, edit it, set permissions and restraints, and respond to student's comments. Students wanted something modern and seamless, with little onboarding friction that allowed for collaboration and added value to their learning experience.

We designed a custom platform to integrate advanced document management with OCR processing and multi-threaded annotations, built to perform at scale.

We employed the following services:

Strategy

Digital strategy
Analytics and research

Creative

Flowcharts and wireframes
UX - Experience design
UI - Interface design
Behavioral design

Engineering

Full-stack development
CMS integrations
Systems architecture
DevOps
Performance and security

Support

Training
Monitoring
Analytics and insights
Hosting

Prototyping

The type selection and color scheme were chosen to be readable and friendly across resolutions and point sizes.

Since potentially hundreds or thousands of students could be annotating the same document, we made design decisions that would keep information orderly and uncluttered.

The interface was built as a split screen layout with the source text on the left side of the screen and the annotations on the right. Filters and paragraph selection allow for high levels of participation without excess visual clutter.

As teachers and students would spend a lot of time writing inside the app, this became a primary function of the design, alongside readability. Inline text transformation, auto-saving and offline functionality enhance the writing experience and improve engagement.

Annotation activity is contained within assignments. Faculty can add any number of tasks to each document added to an assignment. A dashboard interface with due dates and color labelling allow students to track their progress visually.

Implementation

With hundreds of students and faculty members concurrently annotating and uploading documents, performance was key.

A microservices architecture allowed us to choose the best technologies and distribute load across the app. This included Tesseract OCR for interpreting scanned text, Elastic for search, Angular for the frontend, an open-source EDMS document management system and more.

A particular challenge was building a method for any kind of scanned or digital document type to be easily uploaded, OCR scanned, MIME type sorted and ultimately transformed into semantic HTML, ready for annotating.

The platform was built using Python, Angular, HTML5, CSS, Terraform, Tesseract OCR and a few more magical tools.

Python

Angular

HTML5

CSS3

Terraform

Vagrant

Outcome

We created a breathable yet feature-rich, powerful yet lightweight application that would be a key tool for the humanities at UCLA for years to come.

The finished Digital Gateway allows students and educators to effectively collaborate on annotation-based assignments. Widely accepted and appreciated by faculty, staff and over 600 students, we are continuing to work with the University to customize similar solutions to fit other departments' needs.

Working with Magnet has been eye-opening. They helped refine our vision for the app, while also developing a remarkably creative and effective design that actually broadened the scope of what we hoped would be possible.
Matthew Fisher, UCLA Professor

Clients

We have had the privilege of working with large and small companies from around the world, spanning education, philanthropy, travel and tourism, retail, entertainment, professional services and the sciences.

View all case studies