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.

UCLA by Magnet

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.

UCLA by Magnet

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

Python
Python
Angular
Angular
HTML5
HTML5
CSS
CSS3
Terraform
Terraform
Vagrant
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.

UCLA Los Angeles

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 endorses Magnet Co 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.

McGraw Hill Education
McGraw Hill
Ford Asia
Ford
Ikea
Ikea
HGTV
HGTV
Gotham
Gotham
Expedia
Expedia
Cox
Cox
Explore
Explore
directv
Directv
Ebookers
Ebookers
AOL
AOL
nashville
Nashville Airport
Ovation
Ovation