Annie Au

MarkUp users were looking for the ability to curate and organize their projects. Now that Workspaces were released, we were able to use that technical foundation and build out Folders. Folders would solve a majority of the pain points we had learned from customers.

Customers had too many projects, and no way to organize them.

I was the lead Designer for MarkUp. This project continued on from my previous project Workspaces.

A majority of the research was completed during the Workspaces project a few months earlier. Instead of redoing the research, I reached out to a small set of customers (10% of our total user base) to validate the user cases that would have been addressed by folders. During this research I launched a 5 question survey related to their workflows and saw an 40% response rate.

Ultimately I confirmed that Folders would be key in addressing the most common pain point of project organization across all personas.

I broke down the project into the different functionalities that would be related to Folders, for example:

    • Folder Creation
    • Folder Sharing/Permissioning
    • Folder Management
    • Search

I used this time to map out the complexities that could be introduced through Folders. I iterated back with the product manager to start to answer these questions.

I worked to formalize the use cases into the following:

    • Users wanted to be able to organize projects into folders and sub-folders
    • Users wanted to be able to set permissions (or share) entire folders at once
    • Users wanted to be able to locate folders and their contents quickly

Using these use cases and the mapping done earlier, I worked to create the potential user flows:

The Folders project would be able to use a lot of the same design objects I used as part of Workspaces. I made updates to the information architecture diagrams I created for Workspaces as a way to align the team on the changes.

The Folders project was mostly self contained, but one of our goals was to make it clear to our users what was inside a Folder when on the Project Dashboard. I started to come up with options here:

Ultimately, the team agreed on a grid system within the thumbnail that would dynamically adjust based on a folders contents.

I started building out the visual layer on top of the wireframes that we used for alignment. This new Folder thumbnail successfully showed a preview of the contents, as well as reusing the indicator pattern to show how many sub-folders and projects were a layer down.

We built the Folder settings into the existing Team page which already included the ability to view what each user has access to.

Lastly, I updated the newly introduced Move modal to include moving to a Folder in addition to Workspaces.

The Folders launch was a huge success. We saw that a majority of our customers used it without any hesitation or needing any education. In addition, we were able to use this launch to start building strong relationships with our customers and start building a strong feedback loop with them.

I'd say this was a great example of how to do an iterative project. The structures and patterns I built out for Workspaces were all reusable, which made designing Folders much quicker. The team also agreed that on the implementation side this was a big win as well.
This project could have also been a complicated mess but I worked closely with Product and Engineering to ensure we put reasonable limits where applicable (for example a maximum cap on levels of Folders).