How Figma Transformed This Berkeley Design Class
Academia hasn’t kept up with the head-spinning rise of digital design. If students are lucky, their design school or engineering program might offer a few UX or UI classes. Otherwise, aspiring designers are stuck cobbling together fragmented Medium articles and Lynda.com videos for guidance.
One class at UC Berkeley, An Introduction to Human Computer Interaction (CS 160), is trying to change that. It teaches computer science majors the tenets of usability, and it’s one of only four digital product design courses at the public school, which has 40,000 students.
CS 160’s teachers have faced their share of hurdles to make the class effective, but over time they’ve perfected their method. For the past few years, Figma has been key to their process — our collaborative, cloud based application allows students with any type of computer to work together in a design file…for free.
The early years had a lot of challenges
Group projects are a core part of CS 160. Students are paired into 3–4 person teams to create Android apps inspired by the semester’s theme. (Past themes include everything from healthcare to the election.) Then, as each week progresses, students apply the lessons they learned in class to their project.
Shana Hu, a former student who took the class and then TA’ed it, said they haven’t been able to keep up with demand. One semester, they even had to double CS 160’s original 100 person cap.
“There’s a craving to learn how to become a designer in the tech industry,” Shana told us. After assistant teaching CS 160 for two semesters, Shana landed a design job herself at Pinterest.
When Berkeley first started offering CS 160, its instructors had trouble coordinating the tech needs of such a big group of students. For one thing, people in the class used different types of computers. Some students preferred Linux, others split between Windows and Macs, some didn’t have personal laptops at all.
“There’s a craving for a way to learn to become a designer in the tech industry.”
“For those who had computer issues with certain software, we designated computer labs but we never figured out something that worked,” Shana admitted.
Likewise, the TAs struggled to integrate students without design experience into the process. Adobe tools — one of the few design programs to run on all types of computers — required way too much practice. “There was a steep learning curve,” Shana explained. “We’d spend most of our time teaching Photoshop instead of design.”
They jury rigged what they could, which meant that in some group projects only students with design training and the right computers did the wireframing and prototyping. The others would help out with user testing or write the actual code.
Students picked up Figma in an hour
Shana and the other TAs were convinced there was a better way, and eventually found Figma. Our tool met all their needs.
Figma’s benefits in the classroom:
- Free for students
- Works on every type of computer
- Design commenting function lets teachers leave feedback in context
- Simple, easy-to-learn interface
- Teachers can review work progress with version control
- Multiple students can edit the same design file at the same time
- Prototyping is built in for student presentations
One compsci major, Ryan Kapur, said he picked up Figma in an hour despite not having design tool experience. Its ease of use allowed him to focus on the class lessons — like learning Nielsen’s 10 usability heuristics.
“We were able to apply the stuff taught in class right onto our project,” Ryan said. “By doing that we ingrained the concepts in our heads a lot deeper.”
Each semester was a different theme, and Ryan’s class focused on health care. His group chose alcoholism as their topic and made an app for alcoholics to find the nearest AA meeting.
“We were able to apply the stuff taught in class right onto our project.”
“The fact that Figma is so intuitive was an asset because we only had one hour of face time with teammates each week,” Ryan said. “In that short of time we could brainstorm a new feature and prototype it.”
According to Shana, Figma also made the TAs’ lives a lot easier. They could leave comments for students in context of the design, compared to previous tools, when they’d have to give feedback en masse over email or other applications. Back then, they would just hope students understood what part of the design the feedback was meant for.
Group projects became more collaborative
Figma lets multiple people edit a file at the same time, so students could collaborate on designs together, watch each other work, check on how projects progressed, or brainstorm within the file. “The live editing feature came in handy right before project deadlines,” Ryan admitted.
If teams wanted to work on the design outside of class, they didn’t have to worry about corrupting or saving over a file if several people opened it at once. That gave everyone the opportunity to contribute and participate.
“The most magical things happen when you’re able to bring two fields together,” Shana said. “That’s what we tried to introduce in this class, with Figma’s help.”
