Final Project: Miro | Hybrid workshops
Case study about finding a solution for Hybrid Workshops while using Miro collaborative Whiteboards
At the beginning of the Bootcamp, when I was thinking about the final project it seemed to be so far away! Now I am already in the final weeks of the Bootcamp and just started the Final Project.
For the final project I was working with my colleague Rocio Albertos Casas remote for 2 weeks on an interesting and quite challenging project for MIRO.
MIRO is an online collaborative whiteboard platform, that helps teams that are in different places to work together effectively, from brainstorming with digital sticky notes, to managing agile workflows, offering different templates, like mind map, user flow, user journey etc. Miro has seen exponential growth in 2020, while many companies have been looking for solutions during the Covid lockdowns, to continue with creative workshops. As part of their strategy to prepare for a “post-Covid world”, they engaged us and gave us the brief that will following the next chapter.
Project Brief
Think of how hybrid workshops (those with people both in the same room and remotely) can develop and what type of solutions could provide a better and engaging experience to both facilitators and participants.
Therefore, our Challenge was to conduct research and propose a conceptual idea of how Miro could evolve to keep its relevance in the market, after some people go back to the office and others continue to work online.
Expected deliverables from the Stakeholder:
Expected deliverables from the Stakeholder:
• Research report
• User personas
• User journey
• User flows
• Wireframes
• Validation of results
• Final High-fidelity prototype
While working on this project, we have followed the Design Thinking Process, as this process combines creative and critical thinking, that allows information and ideas to be organized, taken decisions and knowledge to be improved.
1. Empathize
1.2. Value Proposition Canvas
In order to understand better the product, we have done an in depth testing of the Miro app. After that, we have created the Value Proposition Canvas, where we identified different themes, like product’s benefits, what makes these benefits valuable, customer’s main pains & gains, which helped us see what makes Miro different from the competitors.
1.3. Competitive Analysis
Later on, we have done some desk research and we have noticed, that Miro’s direct competitors are: Mural, Webex, Microsoft Whiteboard. Having this information, we have created a comparative Matrix, where we have marked the features that each of these whiteboards have.
As we were not familiar with Miro’s competitors whiteboard solution before, it took quite some time to analyze each platform and find all the features, especially that we had access only to the free versions. We have googled the features that we didn’t find while testing each whiteboard, but sometimes google was also not giving us all the information we needed. Still we managed to create a comprehensive comparative table.
Findings:
- strong “winner-takes-it-all” market because of network effects and users want ONE integrated solution, i.e. more feature is actually better;
- 3 main competitors with MS Whiteboard being the main competitor;
- Miro has no recording feature, compared to MS Whiteboard.
1.4. Market Positioning
While doing our research, we have found on www.g2.com the Market Presence of the Collaborative Whiteboard tools, which actually underlined the information that we have already found in other resources.
User Research
1.5. Qualitative Research
As we had already chosen our user target group and wanted first to get more valuable insights from our users, we have started to prepare for the qualitative interviews. We managed to recruit 8 interviewees from our network, all users of the tool with different use cases and different experience. This allowed us to get different perspectives on how people use the tool, what they like and where they see pain points, particularly also in light of hybrid workshops.
We have conduced all the interviews online, following the structure of the questions that we had already prepared, but we didn’t stick 100% to them, as we wanted to make the interviews as natural conversations and friendly as possible, so that the users feel open and free to speak with us. It was nice to see, that most of the interviews took longer than expected, as the interviewees were open and liked to talk with us about this topic.
After 8 fruitful and successful interviews, we have noticed that we have already some patterns and that most of the interviewees mentioned more or less the same things. The following quotes stood out:
“The people online are somehow less involved.”
“Conversations happening onsite don’t always reach the online people.”
“Online attendees got lost and didn’t follow the conversation.”
“There is something magic about physical sticky notes.”
“Not possible to record sessions.”
“Miscommunication for the online people.”
“I never know who speaks in the room during hybrid workshops.”
Findings:
- Hybrid is the most challenging setting, because it includes challenges from full Onsite and Full Online PLUS creates its own challenges.
1.6. Quantitative Research
Based on our interview results, we have created the questions for the questionnaire, as we wanted to confirm the gathered results from our qualitative research. We had a total of 73 answers and interesting results which actually confirmed our assumptions.
Findings:
- The most used Whiteboard Collaborative Software: Miro
- The Software is used the most for: brainstorming
- The most used devices during collaborative sessions: laptop, mobile, speakers
Looking at the answers of the below question “How often do you want to go to the office?”, we can notice that the hybrid workshops are going to become the new normal, when more people will be able tp work flexible from home, office or other places.
Findings:
- Hybrid format will become the new normal when more people will be able to work flexible from home and office.
1.7. Empathy Map
In order to get to know better who our users are, we have brainstormed and created the Empathy Map. This helped us think deeper about our users and about what do they do, what do they see, what do they say, what do they do, what do they hear, think and feel.
1.8. Affinity Diagram
As we had a lot of information, we wanted to group all these research insights into categories and check the overlaps.
2. Define
2.1. User Personas
As the research gave us a lot of insights about our users, we have created two user personas based on the research, incorporating the needs, goals and observing their behavior patterns.
From our research, we have noticed that we have two archetypes of users — the attendee and the facilitator/moderator. Therefore, we have created a user persona for each of these two types of users.
Lisanne - is an attendee during workshops;
Thomy - is a facilitator/moderator and moderates workshops.
2.2. User Journey
After creating our personas, we have decided to create Thomy’s journey, in order to visualize his experiences and touchpoints as a moderator during hybrid workshops. Creating Thomy’s journey, helped us identify different ways to enable him to achieve his goals and create a positive experience.
2.3. HMW
At this point we have already noticed that there are quite some problems on the table and as we wanted to generate as many creative ideas as possible, we have started to ideate using How Might We questions. After some minutes of ideating each of us, we have noticed that we had a hand full of HMW’s, therefore we have discussed about each of them, voted and decided to continue with two of them.
How Might We help online participants in a hybrid workshop to better follow the conversation onsite?
How Might We give them the possibility to recap missing bits, in case they skip parts of the workshop?
2.4. Problem & Hypothesis Statement
As we knew what our HMW’s questions were, we have continued to think deeper, having our research results in mind and created our Problem Statement, with which we have identified the problems we wanted to solve and the Hypothesis Statement, that helped us decide on how we will want to solve them.
Problem Statement
Our features were designed to facilitate hybrid workshops using Miro. We have observed that hybrid workshops are challenging for the online users, because it is often hard for them to follow the conversations onsite, which makes people frustrated and disengaged.
Based on the problem, we have made our hypothesis, which was based on two features that we were going to propose for the project and implement them into our Hi-fi Prototype:
- A feature that shows who is speaking during the workshop and it shows as well which from the onsite participants are exactly speaking, so that the people online feel more connected to them;
- A 2nd feature that gives the possibility to record Miro sessions and replay them when needed.
Hypothesis Statement
We believe implementing a feature that shows who is speaking and the possibility to replay sessions, will achieve higher satisfaction among hybrid workshop participants. We will know we are right when within the majority of workshops, speakers will be identified and sessions recorded.
2.5. MVP
As we were going to build new features for our existing product, we have started to think what would be the functionalities that are the most important for us in order to reach our goal, therefore we have create the MVP.
Minimum - Allows the communication between onsite and online users
Viable - Offers visibility to the people that are speaking, online and onsite
Product - Implemented feature that easily shows the participants that are speaking
2.6. User Flow (I.A)
Before to jump into sketching and ideating solutions, we have definined the User Flow, creating the “Happy path” and having in mind the that we have to solve user’s pain points that we have discovered in the Problem Statement. We have divided the flow into 3 parts:
1. Start conference and add voices, where we have implemented a new button ‘Conference’. Here the user clicks the ‘Conference’ button and a new menu bar with buttons related to conference appears and from there the user can start the conference, turn on/off camera and microphone and add voices for other users that are using the same microphone. This feature can be used in any situation, where during a Miro Hybrid workshop, there are more than two persons that are using the same microphone. In order to use the ‘Add voice’ feature, the user that is logged in into Miro has to add the voices of the participants. Each participant has to write his/her name, click the ‘Recognize voice’ button, speak a sentence and add the voice. Later on, during the workshop, when any of there participants are speaking, it will be shown in Miro’s top bar.
2. Record sessions — the facilitator can enable the ‘Record session’ button and the Miro board is going to be recorded. This feature gives the opportunity to pause the session recording and as well to continue, after the pause.
3. Watch recorded session — where the facilitator can watch the recorded sessions, share, delete or edit them
Ideate
While ideating we have created more notes and sketches which were using different technologies, like AR, tracking, magnetic rolling board, 360° camera, QR scanning. We have discussed on each solution and discussed about advantages, disadvantages, ways of implementation, looked again at users pain points discovered in research and have chosen to solve one of the most mentioned pain point. During the process, we had quite many ideas and with some of them we went quite far. Based on customer and stakeholder feedback, we had to ‘kill’ many on them, go back to research and look for new possibilities. Therefore, at the end we ended up with quite a big ‘Ideation Graveyard’ and a part of them can be seen below.
4. Prototype
4.1. Mid-Fidelity Prototype & Usability Testing
Mid-Fidelity Prototype
As the user flow was clear for us, we have started to work on the Mid-Fi Prototype, following the user flow and as soon as the prototype was done, we have uploaded it to Maze in order to test it. We have sent the Maze link to different Slack groups, followed by a nice message and we were hoping that we will get enough people to test it and with great inputs.
Usability Testing
· Completed by 16 people
· Success rate 87,5%
· Bounce rate 0%
· Miss click rate 8.1%
We also got some good feedback, which we have implemented further on, in our Hi-Fi. For example, based on the below comment, we have added a new feature in Miro to record the voices together with the Whiteboard recording.
4.2. Design System
As this project on which we are working is for a company that exists already on the market for quite some time and has its own design system, we have used the same colors, styles, typography and tried to create all the new features blend smoothly into the existing whiteboard. Of course, we have created components and variants, in order to have a clean, easy and functional project.
4.3. Hi-Fidelity
We have created our Hi-Fi Prototype, based on the current Miro design and guidance and represented the same flows as mentioned earlier in the chapter, where I have described the User Flows
The Hi-Fi Prototype includes:
First flow - starting a conference, adding people’s voices and recording sessions
· Opening the Miro app
· Opening a board
· Starting a conference while clicking ‘Start Conference’ Button (feature implemented)
· Adding the voice of the participants that are using the same microphone during a Hybrid workshop
· Starting the conference (after the voices have been added)
Second flow - recording sessions
· Starting to record the Miro board session (Miro whiteboard and voices)
· Pausing and replaying the session
· Stopping the video conference call (the recording Miro board feature works even if the conference has been stopped and the other way around)
· Stopping the board recording (a pop-up that the recording has been saved appears)
Third flow — watch recorded session
· Opening the Miro app
· Going to “All recordings” (the user can share the recording, edit or delete it)
· Open the recording and watch it
Choosing the wrong path
Unfortunately, the flow was not always as linear as the previous chapters imply. During this project, we experienced that we went down a wrong road at the end of the first week. Based on our customer research, we learned that having the post-its on the wall, combined with people online is very difficult. Therefore we moved down this road pretty far, of how can we improve the wall experience of Post-its and scanning experience and we invested quite some time also with AR and other technologies, to somehow try to improve this pain point. However, after the 1st week, we realized based on feedback from customer and the stakeholder, that this path was not a feasible option to further pursue, that’s why we had to go go back to the research data to get more insights and a new direction. Lucky us, we had so much data from our research, so that we could quickly pivot to a better more valuable path. Even when this experience made us feel quite unhappy and stressed, as we knew that we have spent a lot of time and a whole weekend on the wrong path, it was looking back a very valuable experience and emphasized again the importance to validate hypothesis as early as possible in the process to avoid that one works too long for the bin. On the other hand it also showed how important it is to be able to “kill” an idea, irrespective of how much work has already went into it when the idea can not be validated. Otherwise the whole research becomes obsolete.
Outcomes & Learnings
As we have passed through some carrousels during these two weeks, we had moments when we thought that we are not going to have time to finish the project until the deadline and on top of that to create the presentation. But we gave our best and worked together as much as was needed, in order to succeed and deliver all the deliverables in due time! And…we succeeded!
As expected, we had quite some things that we have learned from these two weeks:
•Stay positive!
• Sleep and rest can booster your creativity;
• Keep a good working atmosphere and stay positive even when things go a both south;
• Too much stress can ‘block’ you, while sleep and rest can sometimes boost your creativity;
• Ask for help…;
• Better alignment with the stakeholder;
• Kill ideas earlier;
• Too much freedom is your friend and enemy in the same time, focus is needed early on;
• It is worth investing in work properly in Figma. It takes a bit longer at the beginning, but it is a massive time saver later in the process;
• Try as much as possible to stick to the roadmap.
Thank You for reading 😊
