πŸ’»

Miro

Intro

Miro is a cloud-based collaboration tool for small to midsize businesses. The solution features a digital whiteboard that can be used for research, ideation, building customer journeys and user story maps, wireframing and a range of other collaborative activities.

β€£
Navigation

Role

User Research

Product Strategy

UX Design

UI Design

Prototyping

Usability Testing

Tools

Miro

Typeform

Figma

Maze

Timeline

5 weeks

The Problem

From conducting user interviews, the problem identified is that remote participants feel disengaged as they are not sure of what functions they can utilize during hybrid workshops/collaboration sessions.

Hypothesis

We believe that participants would be more engaged if they are aware of the functions that they can utilize during hybrid workshops. Hence, our business goal is to be able to customize functions based on roles/groups & to make it more visible to users of the functions.

The Solution

The Outcome

πŸ‘€ Questions & Observations

To help me better frame any problems with the product, I began by forming some questions and observations I have about the product. To easily document these I followed the structure [situation], [response], [problem to business or experience] to ensure I'm aware of users and business needs.

When inviting members, users are not able to choose a role for each invitee (edit, comment, view only), which causes challenges as the organize may only want some members to be editing the board.
When members are on the board, users can either edit/make changes to the board, which may cause some crucial info to be deleted/edited.

πŸ” UX Research

To confirm my observations and begin forming a hypothesis backed by data, I drafted a user interview script and conducted a series of user interviews to uncover the core problems with the product that I could prioritise for user and business needs.

β€£
Interview Questions Script❓
β€£
Interview with Jasper
β€£
Interview with Chee Hoe
β€£
Interview with Sue
β€£
Interview with Liz
β€£
Interview with William

User Interview Synthesis

β€£
Affinity Map

Customer Journey Map

Customer Journey Map v 1.0

image

Customer Journey Map v 2.0

image

Prioritised Problems

When users are on the board , they have access to all functions which may cause some vital information to be edited/deleted.
When collaborating in hybrid workshops, remote participants do not know how to contribute in discussions (not aware of functions) which may cause them to feel disengaged during the workshop.

Ideation

image

[Insert a screenshot of your Information Architecture in Miro]

User Flows

Miro As Is Flow

image
πŸ’‘
By creating a user flow of the existing experience, I am able to identify areas which can be improved.

Miro Proposed Flow

image
πŸ’‘

✍️ Hypothesis

Having prioritized ideas based on what can be improved, added, or crazy ideas, I wrote a hypothesis that helps me frame the problem for user and business goals.

We believe that participants would be more engaged if they are aware of the functions that they can utilize during hybrid workshops. Hence, our business goal is to be able to customize functions based on roles/groups & to make it more visible to users of the functions.

✏️ Rapid Sketching

Following the creation of my hypothesis I rapidly sketched solutions in lo fidelity. This helped me quickly map and understand the current product and consider options for how I could iterate directly in the product.

  1. When participants first join the Miro board
  • Participants would have a quick 2 step tour informing of the functions they have
image

2. Functions that are available to participants (observers)

image

3. Facilitator/admin access to the Miro board

  • Facilitators have access to all functions on Miro
  • Facilitators can change the permissions for each participant
image

4. Cursor in different colours

  • Different colours to differentiate teams (physical & remote)
  • Facilitators would have a separate colour as well
  • Whatever participants contribute would have their names on it
image

Styles & Components

[Describe why you've created styles and interactive components to iterate on the product]

[Insert a screenshot of your UI Designs]

High Fidelity Prototype

Below is the final version of the prototype that I created. I included interactions and transitions from Figma to match the products flow.

[Insert a link to your Figma Prototype]

Moderated Testing

With the hi fi prototype created I formed a testing script with scenario and tasks for the user to complete to validate the prototype with real users. To test the prototype I conducted a series of moderated tests

[Insert a screenshot from your moderated test in Zoom]

Outcome

The outcome of the case study was x