MIRO / PRODUCT DESIGN

Enhancing Miro's File Management

THE PROBLEM

Miro only has two layers of hierarchy for organizing boards, teams and projects. People are really frustrated that there is currently no way to further organize.

For growing teams especially this is a huge problem. More people creating more boards means more organizational headaches. There is a real threat that companies may look elsewhere for their whiteboarding software needs.

ROLE
Product Designer
YEAR
Summer 2023
DURATION
6 weeks
TEAM
Product Designer (Me)
Product Designer (Consulted)
TOOLS
Figma
Otter.AI
Adobe Suite
Google Workspace
DELIVERABLES
Industry Trends
Competitive Analysis
Heuristic Evaluation
Affinity Map
User Interviews (x5 Users)
Affinity Map
Story Map
Competitive Solution Analysis
Sketches
Wireframes
Usability Tests (x5 Users)
Final UI Screens
High Fidelity Prototype
MY CONTRIBUTION
I led the full design of this project and
produced all deliverables.
THE OUTCOME

The 3rd highest feature request on Miro's forums is delivered. Nested folders allow teams to grow.

Miro hero animation of folder hierarchy
CONTEXT

Looking for a quick win with high impact

With just six weeks to work on this project from start to finish I started out this journey looking for something to work on that was relatively straight forward that wouldn’t require a ton of upfront research and doable within the timeframe.

I found what I was looking for on Miro’s own user forums. There were pages and pages of comments on how users were frustrated with the fact that they can’t add additional folders to their projects. A few people even mentioned they might even leave Miro altogether if this issue wasn't addressed soon! Three years after this thread started, nothing has changed.

The goal of this project was to improve Miro's file management system so that it better scales with users' growing organizational needs and provides a more robust file management experience.

illustration of man in room with lots of boxes of files
The Miro file system is out of control!
DISCOVERY

Turns out 60+ boards filed under a single project is not ideal.

Folders in projects:
3rd highest feature request

On Miro’s own community forum this feature request received nearly 1200 upvotes and has yet to be addressed over a period of 3 years.

75% of the largest direct competitors have this feature

Whiteboarding software packages Mural, Whimsical, and Fig jam all have more layers of folder hierarchy than Miro does.

I had some decisions to make about what to do to get enough research info to move forward, while at the same not spending so much effort upfront that I wouldn’t have time for everything else down the line.

I wound up doing a heuristic evaluation, competitive analysis and industry trends analysis. In hindsight industry trends I probably could have done without, but a competitive analysis was especially important because it gave business insight on how primary competitors like Mural and Whimsical were already addressing this problem.

Discovery methods

USER INSIGHTS: BROWSING MIRO'S FORUM
What's a user problem with significant user pain / business upside overlap?
screengrab of man complaining about lack of folder hierarchy in Miro
Takeaways:
This issue hasn't been addressed in three years and users aren't happy about it. This thread continues to be commented on weekly.
COMPETITOR ANALYSIS
How is the competition approaching their file management system?
Competitor analysis
Takeaways:
Mural looks like it has already addressed this same problem in their software and allows for x3 additional layers of hierarchy.
HEURISTIC EVALUATION
Since complexity is being added to the file management system, where could this get problematic with the way the system is currently implemented?
Heuristic evaluation
Takeaways:
It feels like not much thought was put into the file management system. With only two layers of hierarchy it's not a huge pain to navigate, but with additional complexity being added this will need to be addressed.

“I observe that if there are more than 5-7 elements per directory, it becomes less and less usable. Every single initiative we start, creates 2-5 boards. And it's just one initiative in one of our products. Without directories, project view becomes a mess and is completely unusable. For me, it's absolutely essential to maintain a basic structure of our knowledge and a lack of directories is a significant blocker.”

-Adam K. / comment on Miro community forum

Honing in on a guiding statement

Because I didn’t want to automatically assume that folders were the way to go over a tagging system or something else, I left the guiding problem statement without reference specifically to folders. This would leave room for idea exploration later on.

Here's the problem statement "How might we" I came up with.

How might we help Miro users feel more in control of their ability to manage and categorize all of their boards?
illustration of sand falling through an hour glass
The race against time and adapting the discovery process to quickly get the info needed to move forward was the name of the game.

Activities & outputs

Industry Trends
Competitive Analysis
Hueristic Evaluation
Framing the Problem
AFFINITY MAPPING: FORUM COMMENTS

Remixing the Research Formula: Reading through all 120+ forum comments & taking notes

I decided to skip the usual interview phase. Interviews are really time consuming! By closely studying the comments from the Miro forum on this topic I was able to get roughly the same insights and info I’d need to move forward in a few hours rather than a week!

There were three main takeaways here.

1. I’d need to look more into permissions and how they work.

2. I’d need to do a bit more digging on the pros v. cons of folders and tags

3. What’s the appropriate nested depth to go with folders per project?

Here's what I learned from user forum comments.

Growing teams:
More need for hierarchy

As teams and projects grow in complexity there is more of an organizational need for sub-categories within projects.

Boards in projects multiply fast

The sheer number of boards in any single project can quickly become overwhelming and  unmanageable to browse through.

3rd Parties:
More restriction options

When interacting with clients and other outside 3rd parties, there is often a need to restrict access to certain sets of boards. Sub-folders with set permissions is an easy way to do this.

Tags & labels:
It might get complicated

Tags or labels although useful for custom filtering  can get very complicated when it comes to permissions. Across a large organization this can become very messy, very fast.

And here is what users had to say.

“I truly don't understand how this is not a feature yet. It's frustrating to see that such basic functionality is not implemented while you guys pump out updates all the time.
Over one year on this is the 4th most requested item on the wish list. Are there any plans to work on this feature? We're considering moving over from Whimsical. From a board features perspective it's a no-brainer, but not being able to organize our projects is honestly a deal breaker.”

- Marius B. / comment on Miro community forum

Affinity maps

AFFINITY MAP: EXAMPLE 1
Miro affinity map
Takeaways:
Folder hierarchy often times matches organizational structures in a company. If the software can't match this they might look for other options like competitors Mural or Whimsical.
AFFINITY MAP: EXAMPLE 2
Miro affinity map 2
Takeaways:
Another benefit of additional folder structure is the ability to keep sensitive info partitioned off when companies are screen sharing with clients or other third parties.

Putting it all together: Folders & permissions & tags (oh my).

Here are some conclusions I came to.

Five total layers of hierarchy is the sweet spot: This would match that of closest competitor MURAL. From a business standpoint this made sense. Each Miro project would now have 3 additional sub-layers, but would keep teams / projects as the top two structural layers.

Tags still might be something worth looking into in the future:  For now though it would just complicate things. I was looking for a quick user / business win. Adding sub-folders to projects would accomplish this.

illustration of folders on a desk
Let's get this filing system under control!

Activities & outputs

Interview x1 User
Affinity Map: Forum User Comments
IA & WIREFRAMES

Google Drive & Dropbox as reference: Learning from the best in the biz

The driving activity for this stage in the process was looking at how competitors as well as  Google Drive and Dropbox solve problems around folder hierarchy and moving lots of files around. A lot of the UI and interaction patterns that ended up in the final design were adapted directly from Drive and Dropbox helping to ensure users would be familiar with the interaction patterns.

One big realization I came to here was that multi-selecting boards / files would need to be a key piece of this feature set. Imagine having to move 60 boards from one folder to another one at a time. Not including this would have been a disaster!

Story map: A holistic view

STORY MAP
A story map was helpful in laying out exactly what needed to be built.
Miro story map
Notes:
Doing this exercise helped me distill down what needed to be prioritized with the time left and how user needs directly translated into features.

Competitive solution analysis: Multi-select has entered the chat

COMPETITOR SOLUTION ANALYSIS
Mural: They already have folders but it doesn't look very well thought through.
Miro competitor analysis 1
COMPETITOR SOLUTION ANALYSIS
Whimsical: There are some very familiar folder specific UI patterns here that would translate well into Miro.
Miro competitor analysis 2
COMPETITOR SOLUTION ANALYSIS
Dropbox: Drive and Dropbox both use similar UI for moving batches of files around with a pop up menu so it was safe to assume its a pattern users are familiar with.
Miro competitor analysis 3
COMPETITOR SOLUTION ANALYSIS
Drive: Files and folders are split up into separate rows, another common pattern users will be familiar with.
Miro competitor analysis 4
COMPETITOR SOLUTION ANALYSIS
ClickUp: Multi-select files is done with a checkbox in the corner of the card. Dropbox uses this pattern as well.
Miro competitor analysis 5

Sketches: Making sure I hit all touchpoints

SKETCHES: CONCEPT 1
Overall Structure & Multi-Select
Miro sketch 1
Notes:
Combining familiar UI patterns used in Dropbox, Drive, ClickUp and Whimsical ensures that users can intuitively understand the new feature set.
SKETCHES: CONCEPT 2
Multi-Select + Move Board
Miro sketch 2
Notes:
I can modify the pop up modal for moving boards between projects and apply the same UI to moving between folders. This creates less work for engineering.
SKETCHES: CONCEPT 3
Folders View: List
Miro sketch 3
Notes:
I always try and think through multiple ways to do the same thing while I am sketching.
SKETCHES: CONCEPT 4
Folders View: Board
Miro sketch 4
Notes:
Including folder icons will help users move through the task flows more quickly as symbols register more quickly than words on a screen.
SKETCHES: CONCEPT 5
Recents
Miro sketch 5
Notes:
The recents section needed to be rethought a bit. Previously it only included recent boards.
SKETCHES: CONCEPT 6
Search
Miro sketch 6
Notes:
The addition of folders complicates search a bit. I needed to think through changes here also.
SKETCHES: CONCEPT 7
Starred
Miro sketch 6
Notes:
Previously in Miro's UI starred projects and boards appeared in two different places. With the addition of folders this would get even more confusing, so this would need to be rethought.
SKETCHES: CONCEPT 8
Delete Folder
Miro sketch 7
Notes:
I needed to think through deleting folders. What happens to boards in those folders?

Activities & outputs

Story Map
Competitive Solution Analysis
Sketches
Wireframes
USABILITY TESTING

Learning from mistakes & some unexpected test results

One of the downsides of working fast is to being prone to letting some details slip. This was an issue I ran into while writing the first draft of my user test tasks.

In a few task prompts I had accidentally telegraphed the area of the site that I wanted the user to look in to move forward in each task. Luckily I had sent the questions over to a mentor beforehand to take a look at before I used them. He set me straight and reminded me that I needed to be careful not to lead the user too much with how I worded my questions. Lesson learned with minimal damage done!

Old: Task #4
Please use the search bar to find a board you think maybe has the word “Tagline” in it. You want to narrow down your inquiry to only Project: Site Update and Folder: Alpha.
New: Task #4
How would you find a board you think maybe has the word “Tagline” in it? You want to narrow down your inquiry to only Project: Site Update and Folder: Alpha

I conducted user tests with x5 Miro users remotely with Zoom over the timeframe of a week. Two things really surprised me about the results, users overwhelming preferring drag and drop to move boards and using the search bar as their first option to find a board.

User test insights

Drag & drop: Intuitive file interaction

80% of participants mentioned that their first instinct when trying to batch move files would be to multi-select then drag and drop.

Integrating search: Multi-faceted browsing

60% of participants mentioned that using the search bar is a part of their workflow when looking for files. Often its where users start.

Making the hierarchy crystal clear: Project and folder headings

40% of participants had trouble understanding the relationship between the projects and nested folders when looking at the page heading area. This needed to be made more obvious and less confusing.

Activities & outputs

Usability Tests
FINAL DESIGNS

Hitting the deadline & fixing Miro’s design system along the way

With just two weeks left to go I was almost there! Before moving into final designs though there were a few usability issues to address that I had come across during a heuristics evaluation all the way at the beginning of the project.

Fixing these issues to Miro’s design system would be important because now with the added complexity of the addition of folders to project navigation, it was more important than ever that areas like the search bar and the project navigation bar be crystal clear and easy to use. It wasn’t a huge deal when there was one level of project hierarchy at a time to contend with, but now each project had potentially three extra folders!

Usability issues I found

Miro issue 1
Search bar doesn't follow standard UI pattern
Miro issue 2
Hover & selected are visually the same
Miro issue 3
Multiple button primaries on the same screen

x3 layers of sub-folders in projects

Miro sub-folders animation

Multi-select interaction bar

When multi-selecting, you now have the option to move, copy, delete, or archive.

Miro multi-select animation

Drag & drop to move folders & boards

Multi-select also has the option to drag and drop boards and folders, as per user request!

Miro grab animation

Search bar improvements

The overall search bar functionality has been improved along with needed upgrades to work with additional folder layers.

Miro search animation

Updated starred / recents sections

Starred and Recents have been updated as well. The new layout works more seamlessly with the addition of folders.

Miro star and recents animation

Activities & outputs

High Fidelity Desktop UI
High Fidelity Prototype
IMPACT

Scaling with customer needs & retaining clients

Beyond the fact that boards are now easier to manage and keep track of is the reality that Miro users have been listened to and now have a feature that they have been urgently asking for for the last three years.

x3 additional layers of hierarchy = flexibility

Users now have much more flexibility in how they structure their board filing systems. A major limitation and loudly voiced user pain with business impact is addressed.

Miro now matches its biggest rivals in an important feature

It was loud and clear in the Miro forum comments. If something wasn't done about this. Users would consider leaving for a competitor that had addressed this issue. Problem solved!

Miro is now much better suited to service larger, enterprise level
(and higher revenue generating) clients.

The biggest gripes were coming from clients as they grew in size. With this feature set now addressed Miro is in a much better position to retain and go after larger, higher revenue clients.

REFLECTION

This project was about adaptation and time management

The biggest challenges I faced during the course of this project were a limited time frame to get a complete feature set done and having to figure out some alternative research methods to shorten the discovery process. The tricky part though, was it still needed to be quality research! The most impactful way I was able to do that was by using forum comments instead of lengthy and time consuming interviews during research.

As of November 2023 this feature is in development. Looks like it was an important problem to solve!

Miro screengrab of wishlist

Lessons learned & areas for improvement

I learned that UX methods are like mix and match Legos: By that I mean you can mix and match and mold them to fit to the needs of a project. A method that’s appropriate for one project may not be for the next one.

When creating usability tests I should use writing that makes the product feel as real as possible: Test users should feel like they are in a real scenario as much as possible. My usability test was lacking in this area this time around.


Future roadmap

These are some things I’d look to continue to iterate on in the future with this feature.

Tags or labels for custom filtering

The biggest issue I found with using tags and labels for an application like this is the mess it could potentially cause with many people tagging boards in their own ways for their own purposes.

However, tags are useful for being able to filter boards outside of the folder structure. If done right this would be worth looking into in the future.

I'd love to chat about how I might align with your team's goals!
Feel free to email blutjens@gmail.com or connect on Linkedin.
Contact

Check out my other work!

Making Slack Less Overwhelming
View Project >