Olio tailors the benefits of a traditional Learning Management System to the specific needs of remote, hybrid, and in-person learning in art classrooms.

Context and Scope

The client has a Learning Management System (LMS) that is widely used by private and public schools. Although it was developed prior to Covid-19 and the widespread adoption of remote/hybrid learning, many schools continued using this LMS throughout the pandemic. 

Teachers in all grade levels and subject areas reported struggling to translate in-class curriculum to online courses, but the company has noted that art teachers have reported the most issues.

Art teachers note that their students have faced difficulty with core activities including documenting their process and projectsengaging in student-to-student critique, and understanding technical instruction. 

The product team sees this gap as opportunity to launch Olio as an extension of their existing platform. Olio improves upon the benefits of a traditional LMS with specialized tailoring for remote, hybrid, and in-person learning in art classrooms.

Meet Team Olio

Me, Rachel Meuler | UX Designer, Art Educator, Artist

I was responsible for...

  • Researching the teacher experience using an LMS for Covid-responsive instruction

  • Teacher-Facing LMS including interaction design, sketches, wireframes & prototypes

  • Leading the branding & visual design

My Design Partner, Erin Boudreaux | UX Designer

Erin was responsible for...

  • Researching the student experience with LMS

  • Student-facing LMS including interaction design, sketches, wireframes and prototypes.

  • Managing the design system

Tools

Figma, Photoshop, Illustrator, Google Suite

Product Priorities

Dual-Facing Products

Olio needs to improve the instructional experience for teachers and the learning experience for students.

Responsive Design

Data shows that teachers unilaterally access their LMS using laptops or desktops, while students generally use tablets or phones. To meet user needs, Olio must adhere to responsive design principles.

Familiar Structure

Although Olio aims to bridge a gap between a traditional LMS and the specialized needs of the art classroom, the platform must align to usability heuristics.

Research

Surveys

I used a Google form to learn about the experiences of art educators during Covid-19. Over the course of the pandemic, their teaching environments were hybrid (81%), fully remote (63%), and fully in-person (30%). This data reinforced the need for Olio to support remote and in-person learning practices.

Streamlining Remote and Hybrid Learning

Competitive Analysis

To clarify existing solutions and areas for innovation, I conducted competitive analysis between Google Classroom/Drive, Padlet, Blackbaud, and Moodle for the Teacher-Facing User Goals most reported in surveys:

  1. Creating an Assignment

  2. Submitting/Improving Documentation of Student Work

  3. Opportunities for Student-to-Student Learning

Streamlining Remote and Hybrid Learning

Strengths:

  • Clean, organized, minimal UI

  • Assignments can be embedded in topics, and students can complete writing or open links from topic

  • Classroom links to google drive, forms, slides, docs, etc

  • In classroom, completed/missing work is very clear

  • Students can submit artwork documentation to Drive

  • Students and teacher can comment on items in Drive

Areas for Improvement:

  • Topic input form might be too minimal with few formatting options

  • Endless scroll of text-heavy cards with no customization

  • Can’t embed images or video, only link to google drive

  • IA/Organization depends on teachers creating folder systems and students using correct folders and filenames

Opportunities:

  • Drive is a great repository for student submissions, but there is room for innovation with actually helping students improve the documentation of their artwork

  • Comment feature in Drive is exciting. There might be an opportunity to combine the discussion elements from classroom with the comments feature in Drive.

Streamlining Remote and Hybrid Learning

Strengths:

  • Content displays as topic cards which can be dragged and dropped to organize page

  • Text, photos, videos, links, can be embedded in topics

  • Straightforward and minimal UI

  • Participants (students and teacher) can comment on topics and/or link topics to others (what are the permission parameters?)

Areas for Improvement:

  • UI is visually chaotic

  • Blog-like > some cards open to new tabs and some as modals

  • Add/edit content button on bottom right but modal opens bottom left - not intuitive

  • If text not attached as .doc, cards get extremely long

  • No customization of card sizes/shapes

  • No calendar or class interface (this is a 3rd party site and not an LMS)

Opportunities:

  • Topics could be used to collect student artwork, and comments could help improve documentation

  • Comments and connect topics features provide some opportunity for student-to-student learning

Streamlining Remote and Hybrid Learning

Strengths:

  • Assignments appear as topic cards, with clear information such as title and deadline

  • Customization options for topics include layout, type, and resources

  • Topics can be assigned to multiple classes, with a calendar modal for assigned and due dates

Areas for Improvement:

  • The text input form is quite small and unresponsive, especially when the type options are open

  • Layout options with images and video content get easily cluttered (see last screenshot)

  • Images open in a large white space with no clear indicator to return to the assignment

Opportunities:

  • No method to collect student artwork documentation using this platform

  • No options for student-to-student learning unless as an assignment using another platform

Streamlining Remote and Hybrid Learning

Strengths:

  • Videos embed in the topic thread

  • The UI is very straightforward

Areas for Improvement:

  • Input form for text is quite small and unresponsive, especially when the type options are open

  • Page appears as an endless scroll of text in the center with wide white spaces on either side cropped

  • Little/no customization outside of embedding images or videos in the main text field

Opportunities:

  • No method to collect student artwork documentation using this platform

  • Student-to-student learning can be assigned using a forum, which mimics a post and discussion board

Discovery

Teacher-Facing Persona and User Journey

Defining a persona and mapping her user journey helped refine the scope for Olio's MVP. With limited time and resources, my partner and I wanted to identify key features to develop specifically for art education, differentiating Olio from other learning management systems.

Streamlining Remote and Hybrid Learning

The teacher-facing journey map focused the problem statement, and also identified opportunities for both teacher and student-facing products.

How might we create a learning management system that prioritizes the core needs of an art classroom - learning art concepts, documenting artwork, and engaging in peer critique?

Ideation

Interaction Design

User Stories

  1. As a teacher, I want to give my students clear instructions that help them stay organized and submit appropriate assignments on time.

  2. As a teacher of remote art courses, I want to enable my students to successfully document the work they submit.

  3. As a teacher, I want to promote student-to-student learning while teaching remotely.

Information Architecture

User stories helped me refine key flows for the MVP, and provided the structure for the User Flow and Site Map. These tools clarified navigation before beginning sketches and wireframes.

Streamlining Remote and Hybrid Learning
Design
Streamlining Remote and Hybrid Learning

Style Guide

I created the logo, style guide, and splash screens to reflect Olio's brand attributes:

  • Reliability

  • Exploration

  • Accessibility

  • Collaboration

  • Growth Mindset

  • Student-Centered Learning

My partner and I also opted to design both light and dark modes for added engagement and accessibility.

Streamlining Remote and Hybrid Learning

Sketches

I like to make quick sketches to ideate possible design solutions before beginning wireframes.

Sketching helped my design partner and I communicate our ideas for our dual-facing products, which have opposite user groups, but require visual consistency.

*The student-facing product includes a feature to help students improve their artwork documentation.

Prototyping & Testing

Click through embedded prototype, or click Olio | Teacher-Facing LMS to open prototype in new tab

Wireframe Prototype

I made medium-fidelity wireframes and prototyped to test the navigation and features. The goals for testing were:

  • To view Painting 1 homework 3 and add a new assignment

  • To view overall submissions for Painting 1, and student Amir's Homework 1 submissions

  • To view student interactions for Amir's Step 4

Testing Parameters

  • Testers fit the target demographic of high school art teachers (80%) or product managers

  • I conducted tests remotely using the Figma prototype

  • Testers were asked to Create a New Assignment, Access Student Submissions, and Access Student Interactions

Results > Strengths

  • Intuitive navigation + pleasing UI

  • Ability to link media resources = Value Add

  • Aggregation of student submissions with visual indicators for lateness = Value Add

  • Integrated assessment = Value Add

  • Student interaction = Value Add

> Opportunities

  • Create comprehensive dashboard for all classes

  • Offer option to use topics to create assignments or lessons

  • Add grading and deadlines to rubric steps

  • Integrate completed student submission information to topics

  • Remove scroll from submissions "Quick View"

  • Adjust copy in assignment flow from "Add New" to "Create New Assignment"

  • Add "Mark All" option to Interactions Screen

  • Correct breadcrumbs

Hi-Fidelity Designs

Streamlining Remote and Hybrid Learning

Hi-Fidelity Prototype

After usability testing the wireframes, I designed the final screens in Figma following iOS and Material guidelines.

I ran two more rounds of testing and iteration on the hi-fis before finalizing the design and navigation.

Testers enjoyed the product, found it intuitive to use, and felt it would be a valuable tool in their art classrooms.

Key iterations in the final hi-fi version include:

  • Navigation from Topic to Submissions

  • Filter views by Student or Assignment for submitted work

  • Changing the copy from "Interaction" to Critique

  • Toggle to show/hide student critique comments

  • Critique comments visible by default

Click screen above to go through embedded prototype, or click Olio | Teacher-Facing LMS to open prototype in new tab

Click through embedded prototype, or click Olio | Student-Facing LMS to open prototype in new tab

Hi-Fidelity Student-Facing Prototype

My design partner, Erin Boudreaux, created the student-facing product for Olio.

This product includes features to:

  • Help students improve documentation of the work they will submit to the teacher-facing product

  • Guide students through the process of critique

  • Work in tandem with the teacher-facing product

Insights

Olio is a unique learning management system specifically for art classrooms, and it posed unique design challenges.

As a dual-facing product, it has two distinct user groups with different goals and frustrations. Teacher's goals do not necessarily align with student's goals, and as designers we had to navigate this space.

Because my partner and I were designing opposite facing products, we each represented one group of users within the full scope of the project. This dynamic fueled some very interesting conversations while we worked through our design solutions, and in the end Olio is a better product for it.

Design Thinking Solutions:

  • MVP flow beginning with teacher-facing needs, then incorporating student-facing needs (as teachers generally have a broader view of the curriculum and want to support widespread student success over time, while students generally focus on their immediate, individual needs)

  • Shared design system + UI between teacher and student-facing products adhering to the tablet-based student interface enables teachers to support student learning and product adoption

  • Students appreciate organized curriculum and clearly presented assignments, and Olio's assignment-creation flow enables teachers to achieve this easily

  • Students and teachers both expressed challenges around student's documenting and submitting work, and Olio solves this in the student-facing product

Next Steps for Olio could include:

  • The addition of an open-source repository for instructional resources that teachers could access and add to as they build their curriculum. These could be core instructional resources or supplemental materials for students needing extra instruction.

  • Design and development of the gradebook, scheduling, and to-do features (currently visible in the tab bar but not yet functional).

  • A feature to export student work submissions into an online portfolio/gallery.

15
Meetings
12
Iterations
50
Screens
100%
User Satisfaction