Pin-MI: Redesigning the Web Experiential Learning of Interview Skills through Role-play

Role

UX Designer

Skills

Website Audit, Usability Testing, Web Redesign

Timeline

2024 Summer

Team

1 Engineer, 1 PM, 1 UX Designer
In this project, I led the redesign of Pin-MI, a video-call web platform, to better meet the needs of general communication skills learning. By tailoring the user flow, reducing cognitive load during role-play sessions, and promoting continuous, structured learning, I improved the overall ease of use and perceived usefulness.

Overview

Research

Iteration 1

User Testing

Iteration 2

Final Solution

CONTEXT

What is Pin-MI?

In fields like counseling, customer service, and user research, strong communication skills are essential but hard to train without regular practice. Pin-MI is a video-call tool that solves this with interactive role-playing, quick notes ("Pins"), structured self-reflection, and real-time peer feedback, making training easier and more effective.
Pin: quick notes during role-play session

Why Redesign?

Previously, Pin-MI has shown value in training for motivational interviewing, a therapeutic technique, but now we’re exploring broader use cases for people who need to learn intentional communication skills, like user interview training or suicide hotline counseling. However, users often find Pin-MI confusing and difficult to use, so it’s also important improving usability to make Pin-MI more user-friendly and intuitive.

Results

Based on final prototype testing:

23%

Perceived usefulness

20%

Tool effectiveness

75%

Success Rate
Our results proved that Pin-MI is effective for training broader users, particularly with students learning how to conduct user interviews). Pin-MI is also easier to use: 3 out of 4 users completed the session and created at least one Pin without help, as compared to less than 50% (estimated) previous success rate.

Final Solution Preview

A Central Hub for Structured & Continuous Learning

The "My Practice" page is a central hub where learners understand how Pin-MI works and view past practice. Learners can also start new sessions directly from this page or receive invitations from the hosts.

Before

Unintuitive way of joining; Can't access previous notes

After

Organized & structured learning

Make a Reflective Pin with Simple Tags for Focused Sessions

Introduce tags as a quick way for learners to mark areas for reflection with a simple click, helping the host stay focused on leading the session. The host can also practice note-taking during the session, simulating real interview scenarios.

Before

Limited pinning functionality; No way to view or delete a Pin

After

A quick and simple way to review all your Pins on a single page.

👉🏻 Crafting tailored screens for different roles to ensure reflection quality

To ensure high quality feedback and smooth Role-play session, I introduced a new role “Trainer” and designed customized interfaces for each role to match their specific tasks, making the experience more intuitive.

Host

Participant

Trainer

Simplified Collaborative Reflection & Feedback

Reflection is now simplified with straightforward, text-based questions focused on feedback rather than strengths or weaknesses. All Pins are displayed in a single list with checkmarks for completed items, making it easier for learners to view and edit without extra navigation.

Before

Users had challenges in navigating through all the Pins

After

A quick and simple way to review all your Pins on a single page.

Redesign Pin-MI

How might we expand Pin-MI to support broader communication skills training while improving usability for a more intuitive, accessible experience?

Overall Process

RESEARCH

Heuristic Evaluation

When I first tried out Pin-MI, I noticed some bugs, so I collaborated with the engineer to perform a heuristic evaluation. This helped us pinpoint bugs, usability issues, and design opportunities. Once we addressed the technical problems, we were ready to move on to usability testing

Usability Testing

We ran an unmoderated usability test with 60 participants comparing Pin-MI with a control group to identify usability issues and assess its impact on interview and customer service skills. Students from a User Research course trying to practice unbiased questioning and empathy participated as our target group.

Key Insights

Pinning while having a back-and-forth conversation is too cognitively demanding.
Users are confused and frustrated about using Pin-MI because a lack of clarity and undo functionality.
Students skip reflections because they didn’t make Pins during role-play.
Lack of access to previous sessions and notes hinders continuous learning and peer support.
"It made it confusing where we should explain our pins and could not easily move back and forth if we were not finished with it. We take screenshots of the notes because the system seems do not keep it."
ITERATION 1

Insight to Solution

After the testing, I believed users were confused by Pin-MI due to vague instructions and an unintuitive layout. Therefore, a clear guidance at each step—through direct cues or subtle hints—would help them navigate better. In this iteration, I focused on tutorials, contextual guidance, and a clearer layout with visual reminders to clarify each feature.

Hypothesis 1

If Pin-MI provides clear instructions, better information layouts, and nudges for behavioral changes, users will experience less confusion, make fewer errors, and have a smoother experience with Pin-MI.

Based on the hypothesis, we ideated solutions and decided to focus on:

  • Provide tutorials and contextual guidance to reduce user confusion with Pin-MI.
  • Reduce the cognitive load during the role-play session with alternative way of Pinning.
  • Encourage users to engage with Pin reflections using nudges and actionable instructions.
How to Define 1st Time Experience: Provide Guidance to Reduce Confusion
How to Encourage Users to Engage with Reflections: Using Nudges
A key challenge I considered was...

How Might We Reduce the Cognitive Load during the Role-play Session?

Understanding student needs in the Role-play phase was challenging—some wanted transcripts, others Pin tracking or screen-sharing. I tested two approaches: one offering full context and informative Pins for reflection, and the other focused on quick actions to lighten the mental load. A key testing question: is text-based Pins truly helpful for learner to reflect later?

Role-Play V1: informative and text-based

Role-Play V2: simple & quick

USER TESTING

Oops...it’s even more confusing

I conducted Think-Aloud usability tests with 4 participants acting as the "Host" in Pin-MI:
  • Sessions ran longer than expected, leading to fatigue
  • The tutorials added cognitive load rather than improving understanding.
  • While users preferred the simpler Role-play V2 and valued making Pins, they still found it hard to write reflective content during the session.
"The tutorials were actually kind of confusing—they made it feel like there was too much to take in at once. I still didn't know what to do during the Role-play!"
ITERATION 2

A Shift Toward a Smoother and Personalized Journey

I took a step back to reconsider why users need Pins, their tasks and goals, and how Pins could best support reflection. Rather than addressing issues at each step, I shifted my focus to streamlining the entire experience for a smoother, more cohesive journey, and came up with hypothesis 2.
Helping users understand how to use Pin-MI better by providing clearer instructions and intuitive layouts, reducing confusion and errors.
Catering to different user needs, designing intuitive user flows, and supporting continuous learning to make the experience seamless and easy to use.

Hypothesis 2

If Pin-MI provides easy-to-use tools for users to continuously practice mock sessions and reflect later, it will create a smoother experience, enabling efficient task completion and fostering high-quality learning.

In this iteration, we decided to focus on:

Simplify the entire process while supporting continuous, tailored learning by providing a central hub.
Instead of encouraging users to write more pins during the role-play, allow them to focus on having a quality role-play session so that they can reflect later.
Promote a collaborative peer feedback experience and make reflection easy.
FINAL SOLUTION: FEATURE 1

Introduce a “My Practice Page” for Structured & Continuous Learning

🔍 Insight:
In the first iteration, I only included a basic download button for session records, but user testing highlighted that learning needs ongoing access to past recordings and notes to reinforce knowledge and support growth.
🔑 Solution
The "My Practice" page is where learners understand how Pin-MI works, see session prep steps, and access past practice history. The host can easily start new sessions here, gaining ownership of the process. Usability testing showed learners value easy access to past notes for review.
Promoting a session of ongoing practice
The original flow was very linear, but users often switch roles and give feedback as peers, which is perfect for adding a pop-up window asking if they want to choose the next host and start a new session.
FEATURE 2

Quality Feedback vs Focused Session: Introducing the 3rd Role “Trainer”

🔍 Insight:
Pinning during conversation is too demanding, as learners juggle tasks and can’t fully engage. It’s necessary to simplifying note-taking in role-play, prioritizing a Seamless Role-play and Note-taking Experience.
🔑 Solution
By having the Trainer solely focus on listening and giving objective feedback, the host and participant can concentrate on their roles without the added burden. In the future, AI could take over, offering personalized and accessible feedback.
Host screen, Participant screen, and Trainer screen
FEATURE 3

Simplified Collaborative Reflection & Feedback

🔍 Insight:
Students often skip reflections because they didn’t create Pins during role-play, the instructions are unclear, and they can only see one pins at a time (so they skip the rest)!
🔑 Solution
Reflection questions should be simple and straightforward. There’s no need for "meta" thinking about strengths and weaknesses, just feedback. Moreover, a list of Pins make more sense than navigate through each one of them.
NEXT STEP

What was the outcome?

I tested the solution with a group of 4 students. Our results proved that Pin-MI is effective for training broader users, particularly with students learning how to conduct user interviews). Pin-MI is also easier to use: 3 out of 4 users completed the session and created at least one Pin without help, as compared to less than 50% (estimated) previous success rate.

What's next?

For the next step of the project, we were going to the implementation phase, starting with revising some of the key features before making large changes to the site. We also wanted to incorporate the use of AI for future implementation of trainer.

My takeaway

Balancing stakeholders' needs in an educational tool

Pin-MI stands out from typical video platforms by allowing students to interview each other while building interview skills. However, while teachers value the reflection process and require evidence of it, students prefer a simpler, more engaging experience and often lack motivation for reflection tasks. Balancing these needs was challenging, and I learned the importance of listening to stakeholders, understanding core needs, and setting clear priorities.

Realizing technical limitations and design within constraints

From user testing to workflow redesign, I collaborated closely with two front-end engineers to address technical issues and assess feasibility. For an early-stage tool like Pin-MI, technical glitches were the main challenge, so we prioritized and clarified bugs together. We also explored future features, balancing user needs, business goals, and technical feasibility. While we initially considered speaker identification, testing showed it wasn’t essential to users and was technically challenging, so we chose to drop it.

Other Projects

DoryVR: Data Storytelling in Virtual Reality
Negotium: Evaluating User Engagement and Content Quality
App Design: Support Emotional Well-being for Mastectomy Patients
Optimizing ExpertVoice Product Reviews Research
Say hi to me through ->
Designed & Made by Me!