Ramsés Cabello

Collections

Sketch | 2023

We designed and developed Collections at Sketch in early 2023 as a cross-team collaboration between web and macOS – it is a first approach at giving more freedom to store, organize and retrieve design knowledge inside Sketch.


In this case study we will have a look at how we designed a familiar concept that expands the hierarchy to enable people using Sketch to organize design documents.

Workspaces & Projects

In Sketch, the Workspace is a hub where people and design meet. They are a reflection of the organization and the company structure, while projects are the spaces where they store their documents.


However, as complexity grows, so does volume — up to the point where static, formal hierarchies are no longer an effective way to organize documents.

Managing Complexity

The complexity led us to question how people using Sketch can best manage their design knowledge. As a design platform, Sketch needs to offer more natural ways to store, organise and access design documents. But merely adding more folders and subfolders would decrease visibility and create even more complexity.

That's where Collections come into play: a high-visibility, open, non-hierarchical mechanism that helps organise documents inside a project as contextual groups that follow any sort of criteria, making it much easier to find design documents in a project.


In short, Collections help humans organize their information in a natural, human way.

Shaping Collections

A Collection is a new type of document container that belongs to a single project – increasing the opportunities to organize documents in complex scenarios.

We established three main characteristics that helped us move forward with the concept of Collections.

01

Collections organise documents that are already inside projects

02

  • Collections share the same set of permissions as the project they belong to.

03

  • Collections do not contain projects or other collections – there’s no nesting.

Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

A Familiar Language

While working on new features, we aim to give it a familiar feeling – like something that has been there all along and it is now available. Collections is a concept that fits right in with the hierarchy of the Workspace structure and visual language across web, mac and iOS.


Interaction for Collections add a familiar and natural experience – in additional to the regular flows, people can drag and drop two documents to create a new collection; or inside a Collection.

Flexible and Open

Our goal with Collections is to create an open and flexible system for everyone. While working on this feature, Esther, one of our colleagues defined projects as the folders designers store documents, and collections as the little plastic dividers to separate sections inside a project.


A few of the main use cases we kept in mind while designing Collections include:

by status

Organize documents inside a project by status – documents that are in progress, done, archived

by feature/topic

Organize documents inside a project by specific features or other topics.

by type of content

Organize documents inside a project by the type of content or output – mockups, illustrations, prototypes…

your criteria

Organize documents inside a project by any criteria that can help you and your team store and find design documents.

Afterword

Creating a new way of organizing documents for people using Sketch was a great exercise in building a concept that is open and offers flexibility to make it your own. This was a collaboration with multiple teams inside Sketch, where we could shape the concept together.


The initial work on Collections sets a nice track for us to keep working on and evolving together with everyone using Sketch. I am looking forward to that.


Thanks to everyone who worked on this project.

Thank you for reading this case study.

Further Reading

Three ways to organize your Workspace: Introducing a new level of organization for your Workspace. With Collections, you can group documents inside of Projects.


Read →


Organize your Workspace: Keeping your Workspace documents organized can help you work more efficiently and make it easier for other collaborate with you.


Read →


Acknowledgements

Everyone at Sketch for their support and hard work in this entire project – specially the team web.


  • Joseph Todaro for creating the motion video that I use on this case study.


  • Everyone using Sketch for helping us shape this and every other feature.


email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook