Skip Navigation

Behind the scenes: How we built Discover — a knowledge hub right in your Workspace

Peek behind the curtains of how one of Sketch’s most collaborative projects came to life

Earlier this year, we launched Discover, a curated selection of articles, resources and inspiration — along with the latest Sketch updates — right inside your Workspace. From sharing helpful plugins to highlighting success stories from designers we admire, Discover has something for everyone.

For our Onboarding team, the driving engine behind this project, Discover was about creating a place where people could find everything they need to make their best work in Sketch. But how did they do it?

Let’s dive in!

Helping each other create our best work

We’re always working hard to produce product guides as well as design tutorials to help you design better and faster. While you can always find this content on our site, we wanted to make it easier than ever for you to find it. So we put it right where the magic happens — Sketch itself.

“We really wanted to offer enough insight to people first trying out Sketch. But at the same time, we didn’t want them to suffer from severe hand-holding. We value the pace of self-discovery and know that not all information is relevant to everyone, so we decided to build a product that reflected that,” says Laura Palombi, Product Manager at Team Onboarding.

And that’s how Discover was born: the desire to create a space that you can always come back to for guidance and inspiration.

Settling on an MVP

While Discover as a feature felt like a natural next step, we had to play around with the functionality. We had many useful ideas and resources we could share with you, so our first task was to figure out a way to narrow down those elements.

We wanted to create something that was meaningful and relevant to you, so we gave a lot of thought to the type of content, sections, and filtering options we’d offer. The challenge was in striking a balance between which elements were a must and which elements could be based on your preferences.

As one of Team Onboarding’s frontend developers João Guiomar saw it, “From an implementation standpoint, we needed to showcase a variety of components in an impactful way. It was a fun challenge to undertake, from creating a big Hero component with video animation to adding a complex grid system so the content fit together snugly. We could go all out because Discover was always meant to be an impactful page”.

Here’s a quick look at the final product.

Fine-tuning the experience

No two Sketch users are the same. And that’s why we wanted to give you the chance to personalize Discover, so you would always see the most useful content for you. As we mentioned, one of the primary goals for Discover was to share relevant content in the best way possible. And one way to achieve that was to create a modal where you could choose between different levels of familiarity with Sketch.

“We loved the idea… up until the moment we realized it had too many interactions, too many decision points — and far too much UX copy!” shares Product Designer Ramsés Cabello. “As we iterated further, we drastically simplified the interactions and moved the focus away from skill levels to what makes the user’s decision an easier, more light-hearted choice”.

At first, we gave people customization options based on their role and their familiarity with Sketch. But it was too complex, so we started to simplify the setup. Ultimately, we decided that a simple toggle in each section would be best, since it doesn’t pressure you to evaluate your skills — you can just dive right into the content that you want.

Finding the heart of Discover

While we had a lot of ideas for and around Discover, one thing was clear: we wanted it to be easy to iterate on and easy to personalize. One of the most common pitfalls when creating content repositories is adding too many options and complexity. We wanted Discover to be clean and intuitive so that getting the resources you need didn’t come at the price of an extra learning curve.

”Our main priority was to be able to swap out content immediately without needing to go back to the drawing board,” explains Ruben Almeida, another frontend developer for Team Onboarding. “For that, we asked ourselves questions like what are the common fields between content, how can we make this flexible for future content, how can we make it easy to update and add new elements, etc. And then we built from there”.

The solution? Going with a grid system. This type of modular setup means we can always keep your page updated with the best content. It even looks great on mobile! We also created reusable components for common features such as titles, blurbs, images, etc. Now, whenever anyone needs to update Discover, all they have to do is replace the specifics. It all looks visually different, so you can easily see differences at a glance.

“One of the greatest outcomes of this project was that, even for a first MVP, we didn’t need to implement a content manager,” says Laura. “Adding and modifying content is so easy that anyone in Sketch can do it safely. In that sense, it really empowers everyone who collaborates with the project,” said Laura.

Populating the grid

At its core, Discover is an ever-changing page meant to reflect the current interests and trends within Sketch and the design industry. The process of populating Discover brought together the Product, Technology and Content teams, who all had ideas of what we should showcase.

“We were determined to make Discover useful and not only populate it with the items that were important to us. They had to be important to you first and foremost,” Laura says.

Once we had mapped out the content, the tiers, and the type of resources people might like, the implementation was fairly straightforward. The team was also able to have some fun with the design, figuring out which modules to make more prominent and how to make it all work together.

“The whole tech team loves that Discover shines as a whole. It’s very content-rich and has a multitude of different components that make the whole visual experience very pleasant,” shares the frontend team.

An image showing different modules in Discover

Two of Discover’s primary modules are ‘Guides’ and ‘Insights’. As you can see, you can toggle between beginning or advanced content using the tabs above.

What’s next for Discover

The concept behind Discover speaks for itself. What you see today inside your Workspace is only the beginning. And as we create more content in coming weeks and months, you can expect to see Discover evolve too. And because it’s built right into your Workspace, you won’t miss a single thing.

“We wanted a space for people to get a first grasp of the opportunities with Sketch, and we plan to evolve that conversation with people. It’s a really exciting path to walk, and we’re already designing the next steps,” says Laura.

Where to find Discover

You’ll find the Discover tab in your Workspace’s sidebar. We’ll update Discover regularly, so keep checking back for fresh content!

As always, we build all of our products with you in mind and appreciate your feedback every step of the way. Let us know your thoughts and suggestions through your preferred channel, such as Twitter and Instagram.