One of the responsibilities as a UX educator is keeping our learning design content up to date with industry standards and expectations. One of the workshops I worked on was Animation.

Role: UX Designer
Year: 2022
Duration: 3 months

The problem

We noticed a pattern in our graduating students although their research and strategy skills were advanced, their UI was not. Most specifically, when looking at their interaction and animation design skills. Not only did the education team recognize this but we also received qualitative feedback directly from the students saying that their expectations were not met regarding what they would learn in this chapter and that the class was too difficult to follow.

Previous animation feedback from students
Project goals
Update the content and teach the skills that our students would 
need in the industry.
Re-design lab content to be easier to follow along for varying levels of skill.
See an improvement in students' overall animation and prototyping skills.

Part 1: Lecture

The animation lab was in two parts, lecture and lab. We wanted Part One to preface what the students would be executing in he lab so we leaned on an article by Issara Willenskomer to outline the 12 principals of animation and how motion benefits UX designers.

Selected slides from the updated lecture.
Workshopping the workshop
The workshop had undergone several modifications, but none of them seemed to be the optimal solution. Our first iteration was inspired by the Figma playgrounds. While this did help us outline what exercises we wanted to include in the workshop, it was still slightly advanced for some of our students even with an educator demonstrating as they went along. The above example was another iteration we had experimented with having step-by-step directions. Unfortunately, this did not scale well for exercises that had more than 8-10 steps.

Final Solution: Tutorial Series

I considered my own perspective as a learner; and realized that my initial solution to learn how to do something on Figma is always to watch a video. With this in mind, I proposed the idea of producing a series of tutorials so that instead of centering the lab around instructing the students, we could demonstrate the process through visualization. The series consisted of 15 different videos that covered the animation principles from the prior lecture. We also gave the students the freedom of choice to either follow along live with an educator or watch the videos at their own pace. This allowed varying levels of skillsets to work in ways that are best for them.

Figma Workspace lab layout

Final Solution: The Figma File

I also needed to think about what we would need to provide the students with in order for them to focus solely on animating and not general UI. I centered the file around different lessons, each set up in the same format that had a corresponding video lesson.

Outcomes & Results
Students were able to jump around the
workshop file and practice the animation
lessons they found most interesting.
The lab allowed for students with varying levels of
skillsets to succeed and feel supported.
Students were excited to learn how to make their animation come to life and felt more confident in their prototype.
Key Learnings
One of my biggest takeaways from creating this lab was remembering to make sure I provided the students with the correct tools to succeed and multiple ways to deliver information based on different learning styles. I also needed to consider how to provide digestible amounts of information based on the topic and pivot when I realized that creating slides wasn't the best way to deliver directions for this particular subject.