I'm dedicated to cultivating future creators.

"One must look at the next step on the path ahead, rather than the mountain in the distance, or one would never reach one's goal" β€” Cassandra Clare

When I started pursuing design, I found myself lost in a space of confusing ambiguity and information overload. I was only able to get to where I am today thanks to my peers and mentors. Now, I want to do the same for aspiring designers. This motivated me to start sharing my knowledge as a student. It's intimidating to begin practicing a craft when people around you are years ahead in experience; I want to be a accessible and approachable guide for others.

Ever since the pandemic started, I've dived in teaching online. Here are some talks I've given:

Empowerment through Collaboration Tools

A talk I gave for Homecredit Philippines' "Tech Talk: I.T.'s a Home Run" last February 2020. I introduced what collaboration tools were and how they could be used to augment our workflows, using Developh's systems as examples. I was the youngest speaker, and got to speak to around 400 students from University of Makati.

GETTING A DESIGN INTERNSHIP

A talk I gave with Chia Amisola on landing internships in product design and multimedia arts. We covered everything from crafting materials like portfolios to succeeding in the application process. We had a second run of this talk, iterating on feedback we got from our first; watch it here!

BUILDING YOUR BRAND (WITHOUT SELLING OUT)

A talk I gave with Chia Amisola on personal branding. While we talked about the technicalities of developing a professional identity, we also emphasized the need to stay true to oneself.

DIGITAL COLLAGE ART

A workshop I gave on creating collage art pieces through Photoshop. You can watch it here. I also compiled a Notion document containing tutorial videos and resources here.

I've also taught in private, facilitating small groups and mentoring 1:1. While some sessions are planned, most often happen on-the-spot while we'd be coworking together!

No description available.
Facilitating affinity mapping for Developh Community Research

As a design educator, I believe in being...

  • Engaging: Learning doesn't happen at a distance; I believe in learning through doing. I always try to integrate hands-on activities and examples of practical application in my classes so that students can fully understand what is being taught. ⛏️
  • Collaborative: I learn from my students just as much as they do from me. I'm always asking questions (e.g. "What makes up an ideal discussion?") and requesting for feedback so that I can continue improving as a teacher. I also love using collaborative platforms like Figma that enable me and my students to work together in real-time. 🀝
  • Intentional: In design, thinking is just as important as making. I explore topics adjacent to design like development and ethics so that my students are able to defend their design decisions. 🧠

My approach to teaching: designing learning experiences.

As User Experience Society's AVP for Design Training, I was responsible for holding events that would kickstart the members' design journeys. In the past, workshops conducted by the organization were sporadic and inconsistent. Now that I was in charge, I wanted to ensure that they were more intentional. Thus, I decided to create Introductory Workshops, which aimed to turn an aspiring rookie into a seasoned designer. This series consisted of four classes, each subsequent one progressing in difficulty.

  1. UX/UI Foundations 🐣
  2. Figma for Dummies πŸ› οΈ
  3. Prototyping & Interactions πŸ‘Ÿ
  4. Designing for Development πŸ—οΈ

UX/UI Foundations

In this workshop, I introduced the elements and principles of design. These were shown through examples of interfaces so that students could understand their application to product design. To build on this, I had an application section where I compared two interfaces and asked which one was the better one. This was inspired by the Can't Unsee game and UI-centric accounts like @ui.sia.

Example slides
Slides from mini-game: Which Interface is Better?

At the end, I made the students do a website study. They had to paste a screenshot of their favorite website, then analyze how the elements & principles of design were applied.

‍

If there was one thing I could've done better, it would've been the onboarding for the activity. Initially, the students didn't know what to do. Many of them were new to Figma so they didn't know how to navigate the interface. I had to do a quick demonstration in order to get the ball rolling. If I had the chance to redo this workshop, I would've prepared simple instructions for using Figma along with how to do a website study. That way, there wouldn't be as much confusion.

figma for dummies

In this workshop, I taught the basics of Figma: how to navigate its interface, use its built-in tools, and make components.

Here, I took an unconventional approach: I invited the students to simultaneously try out what they were learning while I was presenting in the Figma file. This was for the mini-activities I inserted throughout the talk, where the students were asked how to replicate a certain design.

Mini-challenges placed throughout the talk

At the end, I had everyone take part in a Figma Quilt; each student had to contribute one square frame. The only constraints I had were to make use of a prescribed color palette, and to use components (if possible). Here's what we all came up with at the end!

‍

Feedback

Things students liked about the workshop were:

  • Hands-on approach: they were able to get real-time practice from working in the same document as the instructor; this was supplemented by the fun activities.
  • Easily digestible content: the unconventional format of the talk made it for them easier to digest a new platform like Figma.
  • Highlighted application: the workshop insights became more memorable thanks to being reinforced by multiple examples.

However, points for improvement were:

  • Chaotic presentation: having the students test out Figma while the talk was going on made the presentation confusing. This could be avoided in the future by creating separate pages for the speaker and the students.
  • Slower pacing: despite being targeted to beginners, the workshop felt too fast for them.
  • Incorporation of web design principles: the examples & activity in the workshop leaned towards graphic design. These could have been done from a product design perspective instead (e.g. replicating an app screen).
  • Take-home activities: so that students could practice on their own time, even after the workshop.

prototyping & interactions

In this workshop, I taught how to prototype designs with Figma, from creating connections to adjusting animations. The learnings from the talk were supported by product design examples, along with real-time demonstrations.

Example slides
Demonstration of animation types

I also did a walkthrough of my designathon project, showing the interactions I incorporated and how I was able to do them.

Case Study of Scenius

At the end, I challenged the students to quickly prototype a delivery app. They were divided into 4 groups, aided by experienced facilitators. Despite me telling the students to prioritize function over visuals, they still took a lot of time in crafting the UI of their prototypes. If I had the chance to do this workshop again, I would've provided a wireframe kit so that they could focus more on prototyping.

‍

‍

‍

‍

Feedback

Things students liked about the workshop were:

  • Speaker excellence: they liked the teacher (me) for being knowledgeable, enthusiastic, and engaging.
  • Application through activity: what made the workshop a great learning experience was the quick prototyping activity, since they were able to try out what they learned for themselves.
  • Group collaboration: since they were in groups, students were able to help each out so that they could deliver the best design they could

However, points for improvement were:

  • Inadequate explanation: I wasn't able to explain the characteristics of the animations properly; as a result, students found it hard to distinguish them.
  • Lack of examples: connecting to the above reason, students wished for more application to real-world product design (e.g. reasoning behind design decisions, best practices).
  • Dead air: during the activity, some groups were collaborating silently, which is quite saddening. This could be avoided in the future by training facilitators on how to lead and manage group activities.

DESIGNING FOR DEVELOPMENT

In this workshop, I introduced design systems. I discussed what they are, what their value is, what they consist of, and how they can be built on Figma. This was supplemented by examples, real-time demonstrations, and check-ins for students inserted throughout the talk.

Example slides
Demonstrating how to create styles

At the end, I prepared a group activity where the students had to create a design system based on a prompt, and apply this in designing a mobile screen. Initially, this was supposed to have facilitators; however, I requested for this too late, so I had to add more guides for the students (e.g. pegs, instructions, example design system pages).

Unfortunately, during this part of the workshop, Figma went down. So I had to improvise by demonstrating on the spot: doing the activity on my own, taking on suggestions from the students.

Sample set-up for group activity

‍

Feedback

Things students liked about the workshop were:

  • Speaker excellence: they appreciated my presence & professionalism.
  • In-depth content: the workshop covered design systems thoroughly, especially when it came ot technical parts (e.g. making variants).
  • Tons of interaction: they appreciated how much I engaged with them, whether it be through testing their knowledge or asking them for design suggestions. The small turnout in this workshop (around 10 people) actually helped make it feel more cozy.

However, points for improvement were:

  • Lack of time: the time allotted for the workshop didn't feel enough for the students. However, 2 hours is already long; instead of increasing time, what could be done instead is adjusting sections of different parts of the program flow (e.g. less time for activity, more time for talk).
  • Post-workshop duties: students wished to have access to the recording after the session so that they could still study it (note: this is mainly the responsibility of the event project manager).

Results

Turnout varied wildly; some workshops would have around 20 people attend, while others reached as high as 100+. What surprised me too was how most respondents ended up not being affiliated with User Experience Society or Ateneo; it showed me just how much people wanted to learn design. Based on feedback, the workshops were consistently rated high across different aspects (i.e. lecture, activity, speaker, logistics, overall experience).

Reflection

When it comes to an online setting, I've learned that a simplified bite-sized approach is best for workshops with big audiences. This is because many attendees struggled to match the pace of the workshops due to complicated content, flow, and time constraints. To handle this for future workshops, here are some recommendations:

  • Step-by-step guide with photo references on what should happen
  • Teach as if audiences don’t know why this is important
  • Access to Figma file for hands-on learning
  • Provide homework or exercises for those who want to learn more
  • Show-and-check strategy (show what to do, and then make everyone follow)

Another downside of the workshop format is that it's one-time only. I want to ensure that students can continue learning even after the workshop. Aside from providing take-home modules, this can be tackled by uploading recordings as soon as possible. This way, not only workshop attendees can review; those who weren't able to attend also get a chance to learn. I'm also planning to make an internal guide on online workshop design and facilitation so that future User Experience Society core can replicate this.

Spearheading design workshops for User Experience Society made me realize how much I love teaching. I can't wait to work more on the future of education.

Thank You!

My project manager Lance, who handled the logistics side of the workshops, from setting timelines to communicating with other departments. Without him, I wouldn't have been able to keep myself together.

My fellow User Experience Society core members, who often supported my workshops as attendees or facilitators.

All of the workshop attendees! I learned as much from them as they did from me; I'm honored to have been part of their design journeys.