Click through embedded prototype, or click Olio | Teacher-Facing LMS to open prototype in new tab
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 projects, engaging 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.
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:
Creating an Assignment
Submitting/Improving Documentation of Student Work
Opportunities for Student-to-Student 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.
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
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
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.
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
As a teacher, I want to give my students clear instructions that help them stay organized and submit appropriate assignments on time.
As a teacher of remote art courses, I want to enable my students to successfully document the work they submit.
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.
Design
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.
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
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
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
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