Our experience with teaching UX/UI at Masaryk University during the lockdown
As UX professionals, we want to play a role in developing aspiring designers and shaping the future of human and product relationships. So we set out to teach a class at Masaryk University’s Department of Informatics.
We taught a full-semester course called Development of Intuitive User Interfaces. Four colleagues from Red Hat decided to cross paths of front-end development and UX design in this class. The goal was to walk the students through a design process while creating a project implemented in React.
The class was quite an experience. From design-focused concepts and coding assignments to COVID-19 and remote experiences, our students remained smart, strong, and committed to finishing. Here’s our story.
About the class
The class introduced the basics of user-centered design, and we walked the students through tools to help them understand the needs of the end-user. This is a lot of material to learn, but our students caught on quickly. At the end of the semester, they were able to:
- Create a prototype.
- Conduct a user test.
- Understand the processes for create a better user experience.
- Write React apps and components.
- Understand build tools and data flows in JavaScript.
The final grade consisted of two parts: 50% UX and 50% UI implementation. We had a total of 19 students who completed the class, and we combined their skillsets to create teams of two. One person was design-focused, and the other one was code-focused. Collaboration between students played an important role throughout the whole semester.
This is what the grading breakdown looked like:
UX part (50%)
- Define a problem
- Build personas and storyboard
- Create sketches and prototypes
- Conduct usability testing
- Be creative and present the project
UI part (50%)
- Landing page
- Dashboard
- Chart using some library
- Table — static, interactive
- Entity and user detail
Dealing with the COVID-19 situation
We tried to introduce the whole UX design process in a fun way. The students were prototyping with dummy examples where they could practice their creativity. For example, the city has a problem with a full dog shelter. There are too many dogs and not enough volunteers to take them for a walk. How can technology solve this problem? These easy-to-understand use cases were very popular, and the students were creative with problem-solving — imagine a dog-walking Tinder app.
But then COVID-19 hit, and our original plans for the class were completely disrupted. UX is heavily collaborative, and a lot of activities rely on human interaction. How would this ever work remotely?
We originally considered cancelling. There were just so many questions that we didn’t have immediate answers for…
How do we keep the interactive communication with the students?
How do we set up the user testing?
How do we make them want to attend every online class on a Monday morning (ugh, Monday…)?
After thinking things over, we ultimately decided to be flexible and transform the class into a virtual experience. Our students supported us and wanted to continue.
As we planned this new teaching and learning experience, we built a timeline and made sure to cover all the topics we had originally planned:
We actually came to discover that changing the format forced us to be more creative and adaptable. UX designers deal with challenges and sudden changes all the time, so we knew we could get through this with our students.
Projects from students
The new virtual experience ended up working out well, and students were ready to take on their final project: the implementation of an app.
Our students had to process historical data about Brno’s weather and come up with an interesting story around it. It was surprising to see the progress some teams made, especially given the fear in their eyes at the beginning of the semester. We actually became learners ourselves—we didn’t even know it was possible to create so many different projects and themes from fixed data about weather and temperature.
In the project examples below, the one on the left is about important historical events that happened in Brno. The students connected historical events in Brno with a temperature on that day. This app can tell you, for example, Brno’s temperature when the Russians arrived in 1968 or whether our Brno Astronomical Clock had an impact on that temperature.
The second project presents volcano eruptions and forest fires that happened in the world. The team implemented an interactive map where you can see the location of every event. The content in the cards changes according to the selected event. This team came up with a dark mode of the app that looked very pretty.
Feedback from students
100% of participants said they would take this class again. From our professor's perspective, that is a major success. The students’ feedback confirmed that they gained so much from this course, even given the unexpected change in format:
“The personas, the storyboard and the interactive part when we could be creative was the most fun!”
“The combination of UX and implementation was expected, but this class exceeded my expectations”
“All the steps in the design process were new to me — from crazy 8s, storyboarding to prototyping. I found it interesting that in the creative process you have to really think outside of the box and come up with any ideas — being childish is an advantage.”
“We really enjoyed the UX part as we could be creative. The more stressful part was the one when we had to present our work and get feedback from the classmates. Even though it was challenging, the discussions we had were the most valuable experience.”
Overall, we consider the class a success. Despite the challenges we faced, we all pulled together and continued with the learning journey, which speaks volumes about our students’ passion and devotion. The future of UX is looking bright.
This article has been written by Tereza Novotná and Marie Dorušková
Have a UX story of your own? Send your ideas our way. More writers and fresh perspectives can only make PatternFly’s Medium publication stronger.
