Redesigning Even Better File Organization (Part II)

Back in 2015, I wrote about how we designed and implemented a system for naming and organizing our files in our company’s Dropbox account. It worked well for the last 2 ½ years. However, our approach started to break because we underwent some big changes in the middle of last year. The team was hard at work researching, building and launching our newest subscription-based product for pro designers, and we just launched it last week! Make sure to check out Creative Market Pro!

So, it was time re-evaluate our approach. After we saw Dropbox change the way shared links work, we knew we could rework our entire account structure and maintain the integrity of external links. Bazinga!

The Tipping Point

Our previous Dropbox structure had 4 parent-level folders: Campaigns, Operations, Platform, and Resources. The reason that this structure worked so well for us for so long was because our marketplace and parent company utilized the same brand. They had a symbiotic relationship that made it simple to manage and easy to execute.

New Product = System Restructure
In 2017, we started building new product. This decision immediately broke our current design system, paper documentation, and file organization — in a good way. We had to shift our approach to keep up with how we were evolving the company as it unfolded.

We decided to rework our design system’s structure first, because it didn’t make sense to reorganize our Dropbox account before we did that. How we store our files needed to directly correlate to the system we were building. After this, we planned to rework our Dropbox File and Paper structures to the new scheme. This would ensure that it would be simple for the team to navigate and use in their daily work.

Holes, Cracks, and Legacy Debt
We saw that a few other things were breaking in our previous system. We aimed to fix these issues this time around in order to make our file system more evergreen and easier to maintain.

• The concept of active vs. archive folders became irrelevant once Dropbox launched their selective sync feature.
• It wasn’t easy for new or existing team members to know what to selective sync. This made for a fun game of storage space whack-a-mole. We had to get this right in V2.
• We ended up with a folder of A/B test design work inside of Product. Features began to have duplicate folders of both core feature work and iterative a/b tests. That wasn’t ideal.
• Each team needed a dedicated folder to store various files.

Reframing Our Design System

So, our first order of business was to try to figure out what the heck our design system should look like. We began by stepping back and focusing on the big picture — our brand. It was very tempting to jump in and audit our marketplace product’s UI components, but all good things start with the Why. And that question is much more a brand question than a product one.

Bronwyn and I researched and discussed how to organize our brand. We stumbled upon the great work that the Asana team did in organizing their brand system, which made a lot of sense to us. As we dug deeper, we found ourselves talking about Simon Sinek’s golden circle TED talk from 2009. Everything started to click. Here’s where we landed.

Our original design system leaned into the symbiotic brand relationship between our company and marketplace.

Simon Sinek’s golden circle concept starts with the inner circle of Why. From there, it moves outwards to the middle circle of What, and then ends inthe outermost circle of How. This framework proved to be the smart base that we were looking for so we leaned into it.

Asana’s brand system seems to use the same pattern as Simon’s golden circle. We were inspired by their work and used aspects of it as a starting point to our system’s restructuring.

Building new products required us to decide if they should all flow from the same brand elements or if they should each have their own unique attributes and style. Part of this decision was also influenced by the fact that by launching multiple products, users needed a new way to manage account details across multiple products in a central space.

We chose to introduce 3 sub-Product Systems so that we could reinforce that each new product we build is meant to target a specific audience. We created a Central System to capture our parent company’s brand, unify elements across products, and house the product application work of management tools that users across all of our future products will need. In short, Central System helps us maintain brand cohesion and bridges our products together.

Our New Dropbox Structure

As you can imagine, our Dropbox account followed the revised design system structure. Here’s what it looks like in folder format:

At a high level, we have a Company folder and individual folders for each Product System. Inside of each Product System is a Brand, Product, and Research folder.

The Brand folder includes Identity, Element, and Application folders. This structure makes it easy for us to decide which identity pieces and elements are global (e.g. put in Central System) or product-specific (e.g. either Creative Market “Marketplace” or Creative Market Pro).

• Identity: contains files related to the core attributes and mission of each system.
• Elements: contains files such as color, type, illustration, icons and more.
• Application: contains brand executions such as advertising, marketing, campaigns, and more.

Conceptually, the Product Application should live under the Brand Application folder. However, because of its weight and importance, we elevated it to a higher structure outside of the Brand folder. Each Product folder contains a Components, Experience, and Features folder.

• Components: contains core assets we use to build with such as master Sketch files, grids, and more.
• Experience: contains high-level user experience deliverables such as site maps, journey maps, and more. If it’s epic to the overall company, it lives in Central System.
• Features: contains individual page states and comp work, usually in the form of exported files like pngs and organized by feature type.

In addition to this restructuring exercise, Noah and I spent time creating a consistent taxonomy that we could use to build each Product’s UI components against for each Product’s master Sketch files. We’ve currently got 11 component group files per a product, resulting in a library of 33 master Sketch files. We hope to share more about this topic soon as we finish building everything out.

The Research folder is the place we put files from our Market, User Experience, and Visual research for each individual product.

Our company folder breaks down into Operations and Resources, which were carried over from our previous structure. We also added a Teams folder so that each individual teams could have a dedicated place to store files.

• Operations: contains files such as policies, process, roadmaps, legal, and more.
• Resources: contains files such as photos, presentations, templates, documents, and more.
• Teams: contains a dedicated place for each team on Creative Market to store any files they want that aren’t specific to the actual build of each Product’s System.

Our Design Team’s folder is organized much like our Design Org, but I’ll save that discussion for another day.

El Fin

The setup and execution of this work wasn’t done alone and took a lot of time. It’s no small task to plan and move large amounts of files around in Dropbox. It took 3 dedicated days to execute the plan!

The design team was all hands on deck for this restructuring and they continue to build the v1 of our revised design system too. We hope to finish and share that with you later in 2018! And, as always, we’ll keep learning from the improvements we made here, continue to iterate, and share how we evolve.

Whether you’re building a single product or multiple ones, I hope that you found this breakdown of our design system and file structure helpful. So, if you’re leveling up your design system and Dropbox structure, I highly recommend that you take your time to plan it well and execute the restructuring near the weekend to minimize the interruptions it might cause the team.

If you have any other questions that I didn’t answer in this article, please reach out to me. I’d be happy to answer them!

Cheers,
Gerren

We’re always looking for amazing people to join the Creative Market team. We value our culture as much as we value our mission, so if helping creators turn passion into opportunity sounds like something you’d love to do with a group of folks who feel the same way, then check out our job openings and apply today!