Annie Au

The MarkUp leadership team wanted to explore ways that we could monetize the product since we had reached a significant amount of Daily Active Users. Ultimately they settled on having a free tier and a paid tier (and eventually an enterprise tier). As a result of this business decision we needed to deemphasize functionality that would not be available to the free tier users. This meant a redesign of the navigation and updates to certain key pages.

MarkUp needed a way to distinguish between Free and Paid tiers of product access.

I led this project as the MarkUp Design lead. This project also coincided with a planned product suite design brand initiative so I collaborated with the other products designers.

I conducted competitive analysis of other products in the space. It was helpful to understand the current patterns for collapsable navigation sidebars.

We started to explore a sidebar that would include the ability to Star key folder and projects. I then started mapping out what would show in an expanded or collapsed navigation bar:

Since this was a business led decision, I wanted to make sure we weren't going to detract from our current customers experiences should they decide to stay with the free plan.

We knew that a majority of our users had a single workspace, with a smaller group of users have 3 workspaces on average. After speaking to customers to learn more, I was able to confirm that the Workspaces feature was primarily used by our power users and that treating it as a paid feature would not create too much of a negative impact.

For design exploration I considered multiple paths starting with exploration of how the folder and project structure could be exposed through the navigation.

Then I moved to a rough sketch of a version where the user could see this interactive list of folders and projects:

However after reviewing this with the team we all agreed that this was putting too much information in front of the user and could be overwhelming. The business team had also given further guidance about how we can draw the lines, features that were primarily used by Power Users like Folders and Workspaces would be downplayed.

For my second iteration I prepared a more traditional sidebar:

This sidebar was more closely aligned with the users workflows and our current IA. The side bar was also collapsable for users who wanted to see more projects on screen. I received very positive feedback from the team on this pattern.

Ultimately, I was asked to simplify the second design even further. Since MarkUp is part of a larger suite of Products led by its parent Ceros, so we needed to ensure consistency across them. So I simplified our navigation to match the other products.

I was able to leverage most of the components from the design library that I had been working on. This made it easy to quickly create mockups of how this version would look in other parts of the product:

We had taken this opportunity to modify the navigation for our Paid vs Free tiers to also align our navigation across all of the Ceros products. This was our first coordinated release and it went quite well.

We saw positive customer sentiment with this release, there were comments about reduced clutter and satisfaction seeing more projects at once. We also monitored for any negative feedback since the Workspace navigation was simplified but fortunately it was well received.

This project really proved the value of the initial research. Since I was able to prove that Workspaces were used by a smaller percent of users and primarily power users we were able to deemphasize without any negative impact.

This was also our first cross product design project which went well. The Ceros team also used this opportunity to start their own design library off of the one I introduced for MarkUp.

Ideally we would have released a slightly more full featured sidebar but for a first release this worked well enough.