Olio

A Learning Management System for Art Education

Image alt tag
Olio addresses the specific needs of remote, hybrid, and in-person art education, while providing all of the benefits of a traditional learning management system.
Olio

Context & Scope

The client has built a learning management system (LMS) that is widely used by private and public schools. The LMS was developed prior to Covid-19 and the widespread adoption of remote/hybrid learning, but many schools continued to use this LMS during this time. 

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 long-term projects, engaging in student-to-student critique, and understanding technical instruction. 

The product team sees this gap as an opportunity to launch Olio, an extension of their existing LMS that will bring the benefits of an LMS into online and in-person art classrooms.

Product Priorities

User Stories

The Company provided me with 3 user stories for the student-facing product:

1. As a student, I want to know how to complete assignments and submit appropriate work.

2. As a student, I want to interact with classmates in a way that feels ‘normal’.

3. As a student,  I want to learn and review art techniques within my online course environment.

I was also given three additional objectives by the Product Manager:

Responsive Design

The company wants to lean into the trends of school-provided iPads and also accommodate BYOD courses. Design should be tablet-focused but responsive for desktop users.

Familiarity

Although this product will be the first of its kind as an LMS, it still need to follow familiar patterns to make adoption and use as easy as possible.

Private-School Focus

Early on, the company wants to appeal to private schools that prioritize investing in technology and have large art programs. Design should feel high-end and target students with advanced knowledge.

The Team

Erin Boudreaux
UX Designer

I was responsible for...

  • Researching the student experience with LMS

  • Designing the student-facing LMS from end-to-end

  • Creating and managing the design system used by both sides of the LMS

Rachel Meuler
UX Designer, Art Teacher and Artist

Rachel was responsible for...

  • Researching the teacher experience with LMS

  • Designing the teacher-facing LMS

  • Leading the branding and visual design

Understanding the Landscape

Research Questions

  • What do students engaged in remote learning value in an LMS?

  • What pain points do students encounter when using various LMS platforms?

  • What pain points do students encounter when learning art remotely?

  • What problems do teachers report their students encountering?

Research Challenges

As a 30-something in a pandemic, it wasn't easy to access middle-to-high school students. Being able to reach students during the last few weeks of school was even more difficult!

With only four weeks to complete this project, I prioritized qualitative data related to students' experiences with remote art education.

Student Surveys

Surveying was the fastest and safest way to quickly receive a lot of data remotely. We used Google Forms to find out more about the experiences of 31 students ages 14-18 in a remote/hybrid upper-level art class at a private school.

Judging by the quantitative data alone, it doesn't seem like an LMS needs to change all that much for an art classroom. When asked about their school's LMS, students were mostly positive:

  • 77% said the LMS helped them know what they needed to do for class

  • 66% said that the course content kept them updated for class

  • 70% said that the LMS kept them organized for class

The qualitative data clarified the larger picture. Despite their positive feelings about their school's specific LMS, students shared a lot of insights when asked about the most frustrating parts of learning art remotely.

I synthesized these findings and understood them more deeply by creating an affinity map.

Olio

Student Pain Points

Interaction

The element missing from their online art class was interaction with fellow students and teachers.

This aligned with Rachel's finding that 50% of teachers felt that remote learning limited student-to-student learning.

Submitting Work

Students also noted that documenting their artwork was a major challenge with big consequences. Poor documentation resulted in lower grades.

This also matched our teacher data - 32% of teachers felt that project documentation was a challenge.

Instruction

A smaller portion of students mentioned issues with following instructions, focusing, and being able to get work done remotely.

Technical instruction was a priority for 32% of teachers too.

Competitive Analysis

In addition to student and teacher surveys, I conducted a competitive analysis of three competitors. For each competitor, I walked through the assignment submission process, which is a key flow of every student-facing LMS.

Fleshing Out User's Needs

Interaction & Collaboration

The majority of students indicated that remote/hybrid learning with their current LMS did not make it easy to connect with their teacher or other classmates.

Teachers also prioritized this, indicating that student-to-student learning and critique were not easily facilitated remotely.

Documenting & Submitting Assignments

Students also reported that submitting work wasn't always easy with camera/lighting differences causing point deductions.

Teachers were also frustrated with this as they couldn't assess work that wasn't accurately represented.

A Space that Facilitates Learning

Students considered their LMS to be overwhelming, disorganized, and often boring.

Because course setup and structure vary from classroom-to-classroom, Olio needed to be designed with focus and understanding at its core.

Olio
Aligning Ideas with Insights

User Flows

Using the knowledge gained from competitive analysis and surveys, I created user flows that would serve as a roadmap for creating the student-facing prototype.

These flows really helped me see how complex an LMS can be in terms of navigation and site architecture. I had to think critically about this complexity and determine my minimum viable product.

Sketches

Once my flows were complete, I sketched the key screens using the Crazy 8s method. This helped me explore a range of UI treatments that would present the flows in delightful, user-centered ways. After completing our sketches, we merged our screens and elements to create a cohesive layout that could be adapted across both interfaces.

Below are sketches for the Dashboard and Critique views, which were the anchor points of the entire prototype.

Building the Foundation

Wireframe Prototype

We created our wireframes using a shared UI kit. This allowed us to quickly prototype and validate that our flows served our users, achieved the company's goals, and remained visually cohesive.

I've embedded the wireframe prototype to show where I started, complete with some pretty hilarious issues with nested frames.

Usability Testing

I tested the wireframes with teenage students from around the country that had taken an online or hybrid course at some point in the last school year. These young people gave incredible feedback that helped improve Olio while also validating its strengths.

Issue:

Confusing Terms & Navigation

Early on, I was focused on keeping the student and teacher versions of Olio parallel to make sure that both sides "spoke" to each other and felt cohesive.

While observing students find their way around the app, it was clear that mirroring the language and structure of the teacher-facing product was confusing and, at times, needlessly complex.

Resolution:

Center Student Priorities

When taking an online class, students are going to be transactional with the LMS - they are focused on accessing lessons, submitting work, and viewing grades.

Testing helped me prioritize the key interactions students valued. I added shortcuts for grades and assignments to the dashboard, simplified the side navigation and made action items more clear on course pages and assignments.

Issue:

Course Structure

The teacher-facing side of Olio uses a topic-based paradigm for assignment creation that allows any topic to be flagged differently for grading (e.g. lessons, assignments, multi-part projects, homework etc.) This allows teachers flexibility in course creation but can also create inconsistencies across classes.

This paradigm was familiar to teachers who tested but wasn't so obvious to student testers, who often had different ideas about what words like "project", "unit", and "assignment" meant. Students were apprehensive to have to learn a different system for each teacher.

Resolution:

Make it Obvious

Because the topic-based structure was a constraint put in place by the Teacher-facing product, I opted to make assignment types clear to students regardless of the teacher's set up.

In the final version, each topic is clearly marked with the type of topic that a teacher has defined it as. This eliminated ambiguity and helped students more easily identify the types of topics they were engaging with when using Olio for online learning.

Style Guide & Design System
Olio

With our wireframes designed and validated, we moved forward with tailoring our design system to align the product with its brand values:

  • Reliability

  • Exploration

  • Accessibility

  • Collaboration

  • Growth Mindset

  • Student-Centered Learning

Rachel was pivotal in this process by selecting our color scheme and creating design elements that would be echoed throughout both of our respective designs. I was able to adapt her vision and style into a light-weight atomic design system that we could use for both of our prototypes.

Final Prototype

After completing wireframe usability tests and developing the app's visual style, I iterated on the prototype before conducting an additional round of usability tests. The final round of tests validated the changes and gave users a chance to discuss features they'd like to see in the future.

Olio

Hello, Olio!

Olio addresses the specific needs of remote, hybrid, and in-person art education, while providing all of the benefits of a traditional learning management system.

Olio

Responsive & Accessible Design

Olio is optimized for tablets, but created on a responsive grid that can adapt to bring your own device classrooms.

The UI is thoughtfully designed to meet WCAG AA compliance standards. Olio's calm and straightforward aesthetic in built with all learners in mind. It aims to inform without overwhelming and guide without patronizing.

"Google classroom is the monster I don’t like having to deal with. It’s blank and not interesting. It doesn’t engage me. [Olio] grabs attention without being distracting. I know exactly what I need to do."
Alex, 18
Olio

Media Rich Instruction

Olio avoids overwhelming walls of text and difficult to navigate external links.

Lessons and assignments are given in discrete steps with the ability to add multimedia instructional aides.

"I like that it gives step-by-step instructions and the rubric attached to it. With other online classes, you sometimes have to go out the way to find that."
Amelia, 17
Olio

Clear Project Submission

Students can capture their works-in-progress accurately with a smart camera that optimizes lighting and automatically crops images to the right size and aspect ratio.

"This is easier to navigate than Blackboard and way more aesthetic.”
Ella, 16
Olio

Conversational Critique

Giving and receiving feedback online and in class will feel more natural with a prompted critique module that looks and feels like a text conversation instead of an assignment.

What I'll Take With Me

This project was an incredible deep-dive into Learning Management Systems, accessible and responsive design. If I could do it all over again...

  • I would do more initial discovery interviews with a broader range of students and conduct a guerilla test in person prior to wireframing. My school-age testers were very opinionated and open with feedback. More of their insight would have been excellent earlier on.

  • Afford more time to information architecture and feature prioritization in the early stages, as these both caused fits and starts as I moved from low to high fidelity.

While these UI-skills alone were a huge gain, I learned even more about collaboration, compromise, and user focus. Rachel was an excellent design partner, because she was nothing like me at all! Though our approaches to UX and visual design could sometimes be in tension, we thrived through our mutual respect and shared commitment to make art education easier and more accessible.

Working as partners did create challenges. We would occasionally have trouble reconciling our users' needs, business constraints, and our own design methods. In these moments, I always remember what it means to be a UX designer. I am, before anything else, an advocate for the users. By keeping their needs as my north star, I was able to adapt and create the best product possible.