Miro
Designing to foster psychological safety and community amidst the online environment.
Role
Product Design Consultant, Prototyping & Iteration Lead
Team
Megan Chai, Nerissa Hsieh, Vivian Tsang, Yuhan Xie (project mentor)
Miro’s Education and NPO Team
Discipline
UI/UX Design, UX Research, Product Strategy
Timeline
February 2021 - June 2021
Tools
Figma, Illustrator, Photoshop
Overview
As the iteration lead for this project, I guided the team through defining our user flows, prototyping and iterating our low-fidelity wireframes into high-fidelity deliverables, and usability testing. I also contributed towards conducting user research through surveys and interviews, ideation and definition, and affinity mapping and persona creation in the synthesis phase.
Background
Miro is an online collaborative whiteboard platform largely used in the corporate and education sectors for brainstorming and visualization. They challenged Berkeley Innovation, a student-run design consultancy at Berkeley, to find a product opportunity within their product to help create a vibrant educational community amidst the online environment.
Our solution was Miro Connect: customizable personal profiles that ease the process of forming connections and collaborating within an online setting.
Project Timeline
04 Iteration
User mapping
Mid-fidelity prototype
User testing
High-fidelity prototype
Final presentation
01 Research
Understand project scope
Competitive analysis (8)
User interviews (18)
03 Ideation
Brainstorming
Low-fidelity prototypes
Dot Matrixing
02 Synthesis
Affinity maps
Personas
Journey maps
Narrow project scope
Defining the Problem
From generative research from 506 survey respondents, 16 interviews and 8 competitive product analyses, we saw that college students were seeking a sense of psychological safety from their educators, along with opportunities to form interpersonal connections and stay engaged amidst their remote learning environment.
Thus, our design goal was driven by the question:
How might we help educators leverage Miro more broadly to foster psychological safety, engagement, and curiosity among students in hybrid and online learning environments?
Introducing Miro Connect, personal profiles for students integrated into the existing Miro interface. While engaging with Miro’s collaborative whiteboard, students can simultaneously learn more about fellow classmates and build a sense of community by interacting with each other’s personal profiles. Miro Connect helps students overcome the initial barrier of social outreach and deepen connections with their peers, establishing a more motivating classroom environment within both the remote and in-person spheres.
Our Solution
Core Experiences
Customize your profile and show your individuality.
Share as much or as little information about yourself as you’re comfortable with.
Let your classmates know about your hobbies, classes, social networks, availability, or write a quick biography to introduce yourself without the stress of speaking in front of a Zoom call.
Easily find and form connections.
Learn about classmates’ hobbies, availability, work preferences, classes, and personality at a quick glance.
Simplify the obstacle of reaching out and forming relationships with people you connect with.
All while simultaneously collaborating on your Whiteboard.
In addition to the Profile Gallery, seamlessly access the same information about classmates while still participating in the activity happening on your Board.
Seamlessly filter for classmates with similar hobbies and classes.
On both the Active Users View and the Miro Board View, filter for classmates with similar interests, aligning schedules, or the same classes.
This allows students to gain confidence in forming connections and grow one step closer to establishing a community amidst the isolating remote environment.
The Process
Miro, launched in 2011, provides a platform for distributed teams to work effectively together, from brainstorming with digital sticky notes to planning and managing agile workflows. However, their product is currently largely catered to the corporate sector, as opposed to the education sector where unfamiliar groups of people are frequently being asked to collaborate. Thus, Miro EDU saw an opportunity to diversify their target market for college students, who are constantly forming new connections and collaborating across many groups.
Context
Miro’s whiteboarding platform, from Miro’s website.
Thus, the goal of our project was to conduct research on the specific social and educational needs of college students, and pitch a design recommendation for a solution to help bridge the social gap many students are experiencing in the online environment. Our constraints for the project were that our deliverable should have high implementation feasibility, align with Miro’s brand identity and business goals of expansion, and integrate into their current ecosystem.
01 Research
Goals and Hypothesis
Our main research goal was to understand:
✢ How educators and students are currently using Miro
✢ College students’ ideas and values of community and education
Our hypothesis was that college students are hesitant to form new connections and engage in unfamiliar communities—especially within the remote learning environment—thus causing their lack of comfortability and collaboration on platforms like Miro.
Research Methods
Competitive Analyses - 8 studies
To gain a better understanding of both whiteboarding and education platforms, we researched different platforms like Microsoft Whiteboard, Jamboard, and Canvas.
We discovered that many platforms emphasized the basic features users need, rather than focusing on many extravagant functions. From our followup research, we found that a majority of whiteboarding users only interact with a few basic functions, rarely taking the time to explore advanced features and templates.
User Survey - 169 respondents
We surveyed college students and educators to understand their attitudes towards collaboration, community, and communication during remote learning, as well as their current usage habits of educational and collaborative tools.
From our survey insights, we discovered:
✢ A good community aims to preserve individuality
✢ Users seek easier mediums to meet like-minded individuals, especially in the current online environment
User Interviews - 18 interviewees
We interviewed 7 educators and 11 students to dive deeper into their behavior, motivations, and frustrations while collaborating and cultivating a sense of community remotely.
We discovered three common themes across our interviews with both user groups:
✢ Emphasis on psychological safety and health
✢ Facilitation of feedback and communication
✢ Seeking community and interpersonal relationships
02 Synthesis
Finding Commonalities
Affinity Mapping
We consolidated our user research insights from our survey, competitive analyses, and interviews by placing all of our insights onto post-it notes and grouping them by common themes we noticed.
A small snippet of our full affinity map!
Key Insights
01 Emphasis on psychological safety and mental health
✢ Educators need to create a safe and welcoming environment for all students to ask questions
✢ Educators are incorporating additional methods such as check-in forms and exit tickets to assess student’s mental health
02 Facilitating feedback and communication
✢ Continuous feedback between students and educators help foster a more welcoming online classroom environment
✢ Educators feel more assured when students participate in class
03 Seeking community and interpersonal relationships
✢ Educators and students value forming close bonds with each other
✢ Educators find it more difficult to extend academic support to their students remotely
✢ Students find it easier to maintain existing relationships online, but more challenging to meet new people
Meet Verina, the Passive Learner
After creating personas and journey maps to empathize with our three user groups, high school students, college students, and educators, we decided to focus on the college student persona as our main target user.
Meet Verina, a college student aiming to discover a more vibrant community and striving to gain more motivation to actively participate in class. The remote learning environment has made Verina’s goals challenging to achieve, as the loss of visual and verbal cues that are important in both peer-to-peer and student-to-teacher communication have made it difficult to establish a safe and welcoming environment. As a result of what feels like forced and artificial interactions with peers and educators, students like Verina often feel discouraged and unmotivated to learn.
Our college student persona, The Passive Learner
Verina’s journey map through a typical weekday
03 Ideation
Brainstorming
Lo-fidelity sketches
We aimed for our solution to mediate college students’ feelings of discouragement and barriers to learning within the remote classroom environment. We highlighted ideas that fostered a sentiment of trust, promoted active engagement, and inspired curiosity in students amidst both hybrid and online learning environments. Some of our ideas included polls and reactions, live anonymous question submissions, and dedicated Canvas integrations.
Collaboratively with the Miro team, we discussed the implementation feasibility of each of these features within the existing Miro platform and how our ideas aligned with Miro’s broader business goals.
Introducing Miro Connect
Customizable personal profiles integrated into Miro’s existing interface.
After weighing the implementation feasibility and potential positive impact of each of our proposed ideas, we converged on customizable personal profiles as our final solution. We chose Miro Connect for its versatility across different environments, as well as its potential to foster community and active engagement.
Versatility
Miro Connect can be integrated into both online and in-person learning environments, and it can be utilized by sectors beyond education users.
Community
Students are able to easily filter for peers with similar interests, goals, study habits, and classes, mitigating the struggles associated with navigating large social circles and finding people you click with.
Engagement
With seamless integration into the existing Miro interface, students are able to easily reach out to peers while active on their classroom’s Miro board, overcoming the intimidating social barrier introduced by the remote environment.
04 Iteration
As the Prototyping and Iteration lead, I led our team through mid-fidelity prototyping, user mapping, usability testing, and finally iteration to our final deliverable.
User Mapping
Once our team converged on a final solution concept, we mapped out each of the touchpoints the user would be interacting with throughout their user journey. We divided the journey into four main flows—namely Personal Profile Settings, Team Settings, Miro Board, and Active Users View.
a small snippet of our user map!
Mid-fidelity Prototypes
We distributed each of our flows among our four members and diverged to create mid-fidelity prototypes for each flow. I took lead on the Filters feature, as well as the Profile Gallery in the Active Users view.
Putting our designs to the test!
After iterating through our prototypes, we conducted usability interviews with 7 college students and Miro users from different backgrounds. Broadly, users resonated with how our interfaces felt intuitive and unintrusive to the existing Miro platform. Additionally, we received feedback that helped us improve the clarity of user actions, the navigability of information, and communication of product motivations and benefits.
Clarity
To improve the clarity of our product motivations and purpose, we refined the visuals, pop-up modals, and copy that appears when users are first onboarded onto the Miro platform and introduced to Miro Connect.
Accessibility
To make our product features more accessible and more intuitive for the user, we made changes like incorporating online, offline, and away states for user activity, as well as streamlining the design of the filter feature to be easier to navigate.
Readability
To amplify the communication and navigability of our interface, we added components like filter tags to more effectively communicate when the user is in the filtered state, and changed ambiguous icons to be more explicit and clear.
Introducing Miro Connect, personal profiles for students integrated into the existing Miro interface. While engaging with Miro’s collaborative whiteboard, students can simultaneously learn more about fellow classmates and build a sense of community by interacting with each other’s personal profiles. Miro Connect helps students overcome the initial barrier of social outreach and deepen connections with their peers, establishing a more motivating classroom environment within both the remote and in-person spheres.
The Final Product
Core Experiences
Customize your profile and show your individuality.
Share as much or as little information about yourself as you’re comfortable with.
Let your classmates know about your hobbies, classes, social networks, availability, or write a quick biography to introduce yourself without the stress of speaking in front of a Zoom call.
Easily find and form connections.
Learn about classmates’ hobbies, availability, work preferences, classes, and personality at a quick glance.
Simplify the obstacle of reaching out and forming relationships with people you connect with.
All while simultaneously collaborating on your Whiteboard.
In addition to the Profile Gallery, seamlessly access the same information about classmates while still participating in the activity happening on your Board.
Seamlessly filter for classmates with similar hobbies and classes.
On both the Active Users View and the Miro Board View, filter for classmates with similar interests, aligning schedules, or the same classes.
This allows students to gain confidence in forming connections and grow one step closer to establishing a community amidst the isolating remote environment.
Wishes
Learnings
Final Words
Explore more ways to enhance versatility and applicability.
Since our project scope was narrowed to the education sector from the very beginning, we conducted all of our research and ideation with students and educators in mind. However, I think it would’ve been a great challenge to explore how Miro Connect could be refined and optimized to be applicable in other diverse environments, including the corporate sector.
Additional user testing with educators.
Given more time, I would’ve liked to conduct for usability testing with educators from both high school and college backgrounds in order to gain a greater understanding of how our product can cater to their needs and how we can refine the features to enhance their classroom activity on Miro.
Working with a pre-defined design system and interface.
This was my first project working with an existing detailed design system and solidified interface. It was a refreshing challenge to design an innovative solution with Miro’s established components, without straying too far from Miro’s brand identity and existing interface.
Applying research insights for data-backed design decisions.
Through this project, I learned the importance of quantitative data in justifying design decisions that impact business value and brand identity. It was a great learning experience to connect quantitative insights to the qualitative findings we yielded from our user interviews.
I couldn’t have asked for a better team or client for this project. I learned a great deal, not only about the human-centered design process, but also about the educational environment that I interact with on a daily basis. Thank you to Natalie and to my wonderful team!
The Miro team with our client, Natalie!