Interactive Life Drawing Gallery
UX Tool
Online learning can be an accessible way to pursue new areas of interest and develop knowledge and skills. However, it takes intentional changes to traditional learning experiences to support all students. Creative use of educational technologies help instructors meet the diverse learning needs that an online student population brings to the table. Informed by user data and using universal design, this project will develop interactive tools to revise an online life drawing course.
Target audience: 2D/3D Animation, Fashion Design, Game Art, Illustration, and Illustrative Design students with a completed Life Drawing I prerequisite
Tools used: Google Slides, RMCAD LMS
Year: 2022
Overview
This project addresses identified pain points in the Life Drawing II course by creating an interactive ‘playlist’ of student assignment examples. Although the text-based instructions are necessary for students to complete the assignment, the current format for student examples is overwhelming and not built for accessibility. This project will combine still images with alt text in an interactive format using Google Slides.
EMDT Program Learning Goal(s):
Students will evaluate and create instructional media and technology to support teaching and learning.
Students will analyze and evaluate effective teaching strategies in the design and development of curricula.
Students will incorporate and analyze higher order thinking skills in the design of assessments
Students will effectively communicate educational technology trends to stakeholders, grounding their findings in research.
Instructional Goal of the Artifact: Employ user experience data to increase accessibility and add an alternative option for students to explore life drawing examples.
Process
This project was completed over the 8-week UX for Educators course.
Proposal
The Rocky Mountain of College of Art + Design (RMCAD) services approximately 1800 students, with two thirds of the student population taking strictly asynchronous online courses. There is a mix of full-time and part-time enrollments with only 35% being traditional (18-21 years of age) students. The proposed project revises FD1380 Life Drawing II, which is required for 2D/3D Animation, Fashion Design, Game Art, Illustration, and Illustrative Design students. There is also a prerequisite class (Life Drawing I) which indicates student experience in still life and observational drawing techniques. Each online section has a course cap of 21 students, with the average class size being 14 students.
After reviewing a section of Life Drawing II that ran from February 2022 to April 2022, a few points of interest appear. Course content consists of text and still images, with little to no differentiation amongst media. Modules contain a range of 5-19 photo examples including, but not limited to: anatomy diagrams, student examples, portraits, reference photos, and more. These photos are supplemented with plain text and headings, and captions are rarely used. An audit of alternative text also showcases a lack of accessibility for images. RMCAD’s Learning Management System (LMS) is designed to ‘long scroll’ through course content, with modules built to separate weekly discussions, assignments, demonstrations, and critiques. Navigation tools are located at the top and bottom of each module, but images and text have no interactivity. By addressing these pain points, the Life Drawing II course can become a creative and valuable tool in RMCAD’s online learning environment.
User Data & Profiles
Creating the scope of this project began with reviewing the pain points in the course and defining user profiles to guide the process. Nodder (2017) shares that UX design ideation begins with defining the problem that needs to be addressed. In this case, the problem stems from lack of accessibility and poor UX design in the LMS. The project that will address these pain points and provide learners with a better experience in the Life Drawing II class is an interactive ‘playlist’ of student assignment examples. Although the text-based instructions are necessary for students to complete the assignment, the current format for student examples is overwhelming and not built for accessibility. This project will combine still images with alt text in an interactive format using Google Slides. Google Slide presentations can be embedded directly into the RMCAD LMS which avoids redirection.
Creating this tool with universal design for learning (UDL) will manifest in a few different ways. This interactive tool will give students representation of important vocabulary and activate prior knowledge from previous classes. This representation is important for knowledge building (CAST, 2010). Creating content to model action and expression will occur by choosing student examples at multiple levels of proficiency. This will give students models and feedback to express what they know at a personalized level (Fisher & Frey, 2017). With the multiple user profiles generated to guide the project, it’s important to create learning content using UDL to support the diversity of learners in the course.
User scenarios
User Scenarios
Applying my project in a practical setting using user profiles ensure that some features carry through to the final iteration. Taking the time to think through a user scenario can ‘lock’ in features that are helpful while drawing attention to those that aren’t. I can also see how the project can help different student populations, focusing on accessibility design. As we design tools for our diverse population, we cater these tools to apply in a specific context. For example, most projects in the EMDT program ask you to design learning materials with our specific populations in mind. Creating user profiles helps diversify that design and ensure that we are building tools for more than just a handful of students. I used the above user scenarios to ‘lock in’ features of the proposed tool.
Prototype
I created a wireframe for my IL1380 student example library and shared it with a few students this past week. I was lucky that an open-figure drawing session occurred during this phase, so I participated and then showed a few students the prototype during the 5/10 minute breaks. All of the students except one were illustration majors. The outlier was an animation student. After explaining the problem this tool is meant to solve and what the final outcome will look like, the students immediately recognized how this would impact their life drawing classes. One student even mentioned that he has taken Life Drawing 1, 2, and 3, and the example photographs/content diagrams in the LMS are a lot to scroll through. I suggested that this could be a reoccurring tool in each of the life drawing classes, and a few students thought that having a 'master library' of examples was a good idea. Upon reflection, using a reoccurring format for examples will help create predictability in these sequential courses.
Gallery Wireframe
Most of these students experienced some sort of online classes during Covid, other than one student who was new to RMCAD. They liked the hierarchy that I built but suggested that I arrange the categories into relevance by week. This would put Unique Pose Project at the end and Gesture Studies as the first column. I asked if a week-by-week method should be used, but a few were against that idea due to it being limited to just one class.
Now it's time to make a few modifications, collect the images, build the tool, and run accessibility tests.
User Testing
My high fidelity prototype includes all of the navigate features and some design details, but still lacks the images from the course content. Creating a working prototype without completing the tool helped me make changes as suggested by my users without worrying about changing all of the content. I reached back out to the students I initially completed a user test with to get their thoughts on the student example gallery.
Since I gathered information from the same set of users, I already explained the purpose of the tool during the first testing phase, but I shared a quick refresher to reduce any confusion. I presented the gallery in an empty LMS course module, which each student is familiar with. I asked them a series of questions relating to navigation and use cases.
I first wanted them to play around with the tool before prompting any uses, so I asked them to start on the title page and go from there (Exploratory Task). Each student successfully navigated to the 'how to use' and 'table of contents' page with no prompting. They even started moving throughout the document looking for additional content. With basic navigation a success, I started each student at the title page again and asked them to find the examples of leg ecorché drawings (Directed Task). The user path for each student was the same: Title -> How to Use -> Table of Contents -> Ecorché Drawings -> Legs Ecorché Drawings. This was a successful test. I then asked them to navigate back to the table of contents and complete two more similar use cases. Each student used the required 'return' buttons to do so. The navigation and use tests were a success!
After navigation and use case tests, I asked for any feedback on the experience and how the students would use the tool. One student shared that they rely on student examples to determine the quality of work they need to aim for. They also shared they like the variety of examples shown, both high-quality assignments and low-quality as well. This may be tricky to implement since most of the content in IL1380 Life Drawing 2 is already determined. I would need to work with a SME or an instructor/chair of Illustration to gather more student examples ranging in quality. Good feedback to hear though.
Another student was unsure if they would use the tool at all. They informed me that the student examples are often not helpful in their own assignment process, but can see how having a one-stop-shop for all of the images might change their mind.
Results and Takeaways
The final tool can be viewed below.
Final Interactive Tool Design
Feedback from my instructor highlighted navigation concerns with the interactive tool, it only takes a mis-click to be taken out of the navigation sequence. I'm hoping that RMCAD will acquire H5P (it's in the works) which will give us a tool very similar to what I tried to build here. That should help reduce some of those navigation issues.
Focusing on the user experience allowed me to create this tool in stages. Reviewing user data, creating user profiles, discovering pain points, and then user testing multiple prototypes allowed me to better understand UX for educators.
References
CAST. (2010). UDL at a glance [video file]. https://www.youtube.com/watch?v=bDvKnY0g6e4
Fisher, D., & Frey, N. (2017). Digital tools to broaden learning: New technologies can give students multiple means of engagement, action, and representation. Educational Leadership, 74(7), 81–82.
Nodder, C. (2017). UX design: Ideation [video file]. https://www.linkedin.com/learning/ux-design-4-ideation/welcome?u=37035188
