Figma / Figjam / maze / UserZoom
ExperiencePoint
project
This project aims to enhance the remote workshop user experience of ExperienceInnovation™ | Learn Virtual (ELV). The workshop is divided into two distinct user roles: participants and facilitators. Workshop participants engage via a video conference application and access the design thinking case study simulation through a web browser. Conversely, facilitators share their facilitation slides via the video conference application and optimize the learning experience for workshop participants by utilizing the simulation app.
ExperiencePoint
ExperienceInnovation™ | Learn
Position
Primary UX researcher/designer in the Agile team
Role
Lead UX Research
Lead UX Research
Design System
UX / UI Development
Usability Testing
Cross-functional team Communication
Challenges
"How might we enhance the collaboration experience for remote participants during the workshop, enabling them to learn design thinking and apply it to solve their own challenges?"
This workshop aims to educate participants about the design thinking mindset and how to identify and solve the right problems using it. In the real world, problem-solving is a team effort. In this workshop, we strive to replicate the team collaboration environment as participants engage in a case study simulation to acquire practical skills. The business goal was to enhance the team collaboration experience of the existing remote workshop, making it as competitive as the on-site workshop experience.
The goals of the project:
1. Discovering opportunities to enhance the workshop experience for remote participants.
2. Defining requirements for onboarding and the experience of the 14 activities.
3. Researching and designing solutions to address the root causes.
4. Evaluating potential solutions to ensure they align with the project goal.
5. Delivering comprehensive documentation and UI designs to the development team for efficient implementation.
2. Defining requirements for onboarding and the experience of the 14 activities.
3. Researching and designing solutions to address the root causes.
4. Evaluating potential solutions to ensure they align with the project goal.
5. Delivering comprehensive documentation and UI designs to the development team for efficient implementation.
We developed a real-time communication feature for the simulation app to enable participants to collaborate during the activities. We implemented 5 major changes to enhance the workshop participants' and facilitators' experience with the real-time communication feature:
+ Created a unifying design system that combines usability guidelines with aesthetic appeal.
+ Implemented a seamless onboarding experience.
+ Integrated 13 activities into the simulation app to reduce participants' actions.
+ Introduced gamification elements to increase engagement.
+ Established a progress tracking system to support the facilitator's teaching experience.
+ Implemented a seamless onboarding experience.
+ Integrated 13 activities into the simulation app to reduce participants' actions.
+ Introduced gamification elements to increase engagement.
+ Established a progress tracking system to support the facilitator's teaching experience.
These changes had a significant impact on the participants' and facilitators' workshop experiences. We received positive feedback from seasoned facilitators after User Acceptance Testing (UAT).
Design Process
Interviewed stakeholders to grasp the business goals and conducted a heuristic evaluation to establish the product's baseline.
To understand product requirements and constraints, I gathered available data, such as related documents and existing versions of the design file. Additionally, I conducted a heuristic evaluation and interviewed cross-functional teams involved in building the existing product, including the product owner, creative team, development team, and facilitators to understand the reasons behind their decisions and how they achieved their goals.
At the end of this stage, I learned the workshop's goals, its timeline, the stakeholders involved, and the necessary technology requirements. With this collected data, I proceeded to the next step, which involved empathizing with the users to identify improvement opportunities.
At the end of this stage, I learned the workshop's goals, its timeline, the stakeholders involved, and the necessary technology requirements. With this collected data, I proceeded to the next step, which involved empathizing with the users to identify improvement opportunities.
Participated and observed in the workshop to empathize with users (participants and facilitators) and identify pain points and needs.
To empathize with users, I participated in the workshop multiple times as a participant and observer. Additionally, I interviewed facilitators and the customer support team to learn about how users often behave and what they say during the workshop. Also, how facilitators deliver the existing remote workshop as well as the on-site workshop.
Based on the data that I gathered, I created personas and mapped the existing workshop participant's journey. I visualized user persona and journey map to share research results effectively and efficiently with the project team.
Based on the data that I gathered, I created personas and mapped the existing workshop participant's journey. I visualized user persona and journey map to share research results effectively and efficiently with the project team.
Synthesized observations into insights using the '5 Whys' method to identify needs and pain points.
I collaborated with a cross-functional Agile team and stakeholders and identified that the current simulation app needs a real-time communication feature to enhance team collaboration experience.
This was the company's very first real-time communication app development project, so we divided it into 5 epics to make progress.
Epic 1: Enhancing Accessibility and Usability
Epic 2: Implementing an Onboarding System for Participant Access to Simulation App
Epic 3: Integrating 14 Different Types of Activities into the Simulation App
Epic 4: Promoting Active Engagement in Workshops
Epic 5: Enabling Facilitators to Track Team Progress
Epic 2: Implementing an Onboarding System for Participant Access to Simulation App
Epic 3: Integrating 14 Different Types of Activities into the Simulation App
Epic 4: Promoting Active Engagement in Workshops
Epic 5: Enabling Facilitators to Track Team Progress
Tackling each epic with a design thinking process
I revisited the user journey map to identify key issues and needs, defined goals that were desirable, feasible, and viable, collaborated with the project team and stakeholders to brainstorm solutions, created prototypes to test these ideas, gathered feedback, and iterated. This design process was applied to each epic.
Epic 1: Enhancing Accessibility and Usability.
Developed a design system using WCAG and the Tailwind CSS framework.
Developed a design system using WCAG and the Tailwind CSS framework.
Enhanced participants' experience by focusing on factors such as colour contrast, consistency, and intuition.
I conducted research on both Material UI and Tailwind to compare their suitability for building the design system for us. I shared the findings with developers and fellow designers, leading us to choose Tailwind CSS due to its higher level of customization compared to Material UI.
Built design tokens utilizing the Tailwind CSS system and documented them to share with other designers and the development team.
Participants will not interact with this product repeatedly, the UI elements need to be intuitive and aligned with their expectations of how actions will correspond to outcomes. To achieve this goal, I focused on the principles of "Match between system and the real world", "Consistency and Standards" and "Recognition rather than recall".
Utilizing these principles, I built design patterns for the most frequent actions of "input text" and "submit outcomes".
Utilizing these principles, I built design patterns for the most frequent actions of "input text" and "submit outcomes".
Epic 2: Implementing an Onboarding System for Participant Access to the Simulation App.
Redesigned the onboarding experience for remote workshop participants.
Redesigned the onboarding experience for remote workshop participants.
I crafted journey maps illustrating each participant's path to access the app and join a specific team, then shared these with cross-functional teams to gather feedback. After narrowing down to two solutions, I developed interactive prototypes to assess user interactions.
The redesign of the onboarding experience also requires the management of the workshop itself, prompting me to improve the dashboard for optimization.
I conducted design sessions with users, developers and the product owner to identify the desirability, feasibility and viability of the dashboard.
I conducted design sessions with users, developers and the product owner to identify the desirability, feasibility and viability of the dashboard.
Epic 3: Integrating 14 Different Types of Activities into the Simulation App.
Designed activities using patterns and mental models.
Designed activities using patterns and mental models.
The most significant challenge was addressing the question: "How might we assist participants in practicing complex problem-solving within a limited timeframe using the app?"
Key Participant Factors:
1. New to the design thinking concept
2. Non-tech-savvy working professionals
3. One-time participation
1. New to the design thinking concept
2. Non-tech-savvy working professionals
3. One-time participation
Considering these factors, I devised patterns based on actions such as inputting data, moving items, and building on ideas. I then shared and tested interactive prototypes with stakeholders and users to verify whether these patterns met their expectations and activity requirements.
Created both mock-ups and prototypes to make ideas tangible.
The prototyping technique fulfilled two primary purposes: communication and testing. For communication, I employed weekly Agile team meetings to showcase and review ideas, gathering feedback from cross-functional teams. Depending on the nature of the information and feedback I needed, I provided appropriate prototypes, including low-fidelity prototypes, interactive prototypes, and brief demo videos.
I used interactive prototypes and high-fidelity prototypes to collect behavioural data and validate key assumptions.
Epic 4: Promoting Active Engagement in Workshops
Conducted analogous research to ideate solutions to enhance participants' engagement.
Conducted analogous research to ideate solutions to enhance participants' engagement.
I prepared a collaborative space to collect ideas from colleagues both inside and outside of the project team. I selected tools that were familiar to them, ensuring that their creativity wouldn't be hindered by unfamiliar software. Importantly, I focused on creating a secure environment for sharing ideas.
Based on this ideation process, we discovered that enhancing gamification, including visualizing progress and implementing recognition rewards, could effectively encourage participant engagement.
Epic 5: Enabling Facilitators to Track Team Progress.
Assessed feasibility with the product owner and the development team to evaluate the solutions.
Assessed feasibility with the product owner and the development team to evaluate the solutions.
I identified and clarified the reasons for implementing the tracking feature, what are the requirements to track progress, where the data originated from, who needs access to the specific data and why, and what metrics to use for tracking the progress and why.
I implemented the completion percentages for activities where participants were tasked to achieve specific goals. For activities focused on attaining quantitative outcomes, I utilized item counters.
A red flag is triggered when a team shows no progress, which serves as a signal to the facilitator, enabling them to discern the appropriate moment to step into the breakout room and offer assistance.
Furthermore, I integrated a feature that enables the facilitator to access workshop-level results. This functionality empowers the facilitator to recognize participants' comprehension level of design thinking and explain any pitfalls they may have encountered.
Tested the solutions with 5 - 8 participants each time to gather feedback, validate solutions and learn improvement opportunities. Analyzed data and applied it to the next iteration.
Throughout this project, I conducted multiple tests with both internal and external users. I was responsible for planning, conducting, analyzing data, and reporting to the Agile team for all the tests.
During the planning phase, I collaborated with the team to establish assumptions, set success criteria, and define metrics for the tests. Based on these assumptions and metrics, I selected the most suitable testing methods to collect the required data, identified participants for the tests, and determined how to record all the data.
As this project is workshop-based, facilitation plays a crucial role in shaping participants' experiences. To ensure effective facilitation during testing, I sought support from certified facilitators. Before conducting each test, I scheduled meetings with the support team members to align our objectives and clarify their roles and expectations. This alignment meeting proved instrumental in running the tests smoothly and efficiently, allowing us to collect valuable data.
To conduct and collect data for the testing, I utilized tools such as Maze, UserZoom, QuickTime, and Zoom.
Improved cross-functional communication and collaboration by implementing a documentation system and creating effective documents.
As a member of an Agile team, effective communication and collaboration were pivotal to optimizing the design process. Ensuring alignment with developers was particularly critical for maximizing productivity. Throughout the project, I meticulously documented the design system, UI expected behaviours, logic, system progress, decision-making processes, and sources of information.
Furthermore, to enhance the utility of these documents, I ensured they were accessible to all team members and interconnected related elements. For text-based information, I employed tools like Google Docs and Google Sheets, while visual-based information was managed using Google Slides and Figma. These documents were then linked to tasks in Monday.com, enabling assigned developers to seamlessly navigate the required information.
In sum, these practices significantly boosted communication and collaboration efficiency, thereby fostering an effective design process.
outcomes
With the new version of the remote ExperienceInnovation™ | Learn workshop, we've integrated real-time collaboration features into 13 out of 14 activities. This enhancement reduces the participants' need to share their screens during activities and eliminates the use of PDF activity guides, simplifying their required actions and enhancing the learning experience. The participants' interface has been enhanced to meet WCAG AA colour contrast standards in the new design system.
Furthermore, we've directly integrated instructions into the simulation and added a progress-tracking function. These new elements empowered facilitators to deliver workshops more effectively.
After User Acceptance Testing (UAT) with the seasoned facilitators, 6 out of 6 facilitators answered they would like to use the new virtual workshop for the next delivery.
