Discover
Sketch | 2021~2022
Late in 2021, I joined Sketch’s Team Onboarding as a Product Designer. Together with a group of very talented professionals, we designed and constantly improved every-day experiences such as creating an account, managing the team, paying for the product… – we were responsible for making Sketch a welcoming product for new and existing users.
This case study presents the journey of designing a space for new people using Sketch to get started and for existing ones to learn, get inspired and stay informed.
Communication
The complexity of a product is directly proportional to the time they have been in the market. Over the years, Sketch has grown from a macOS vector editing tool (popular for illustration and user interface design) into a platform that gives creatives everything they need for a collaborative design process.
While new features become available, there is more we can tell people using Sketch after creating an account and before using the product.
An Empty Space
Before we worked on this project, people creating a Sketch would just land on an empty Workspace – ready to get started but with no information on what are the next steps.
I think about the onboarding experience as if we would welcome someone into their own space, their own room. Before Discover, we were giving users the keys to a room, but this room was empty and it wasn’t all that welcoming.
What do we want to tell users after we give them the keys to open the door and start using the product?
Welcome to Sketch
Discover is a welcoming space for new users to get started and for existing ones to learn, explore and get inspired.
This feature is designed from the beginning with the mindset of giving people control through visible and invisible filters over useful guides, tutorials and tips regardless of the experience they have with Sketch.
Structuring the Content
The initial release of the Discover page is available on the web view of the Workspace – after signing up and directly from the navigation sidebar. One of the primary challenges faced during its development was gathering content from multiple sources and structuring it in a way that feels seamless. The content on Discover changes depending on your role and your account in Sketch.
We started by gathering the existing layout and later on we tidy it using a taxonomy of three criteria.
01 / FREQUENCY
Will the content in this section be updated regularly?
We have placed frequently updated content at the top of the page. This will help us keep the page current and make the latest content more accessible to users.
02 / PURPOSE
What is the main purpose of the content in this section?
- Given the wide variety of content offered, we needed a way to group it based on purpose. We ranked purposes based on their alignment with the goal of Discover.
03 SOURCE
Where does the content of this section come from?
- Discover goes beyond Sketch as a platform for content from the community. This includes designs shared by users on social media, as well as interviews and blog posts.
Contact
email@domain.com
000-000-000
Bridging the Gap
Discover acts as a bridge between the Sketch web app and the marketing website. When designing the high-fidelity UI, we faced a challenge where the components from the web app design system were not yet ready to display content, and the marketing website components did not directly fit within the web app.
Instead of using components from either of them, we developed a new visual style that would feel familiar to both worlds.
Discover Over Time
This project is an ever-changing playground for the team. We continuously add new sections, repurpose different parts of the UI, and keep an eye on ways to improve and make the most out of this page.
Since the beginning of the project, we have closely collaborated with the content team to build a system that helps them keep the page’s content up-to-date.
One of the most prominent elements of Discover that changes over time is the hero banner. It can serve as an onboarding element or as a space to announce new features, events, or anything that the content team wants to broadcast to everyone using Sketch.
Discover For Everyone
One of my favorite and challenging parts of the project was the design of the content filter. Here's a look at the process of designing a filter that helps people explore and discover more about Sketch.
Everyone using Sketch is different, so we wanted to give everyone a chance to get the most out of Discover and present them with helpful content. The first iteration of the filter put people in a position where they need to rate their skills immediately.
That pattern felt like many decisions to start reading or watching content. We went through multiple iterations on this pattern, updating the copy, changing the icons… But still, it had too many interactions and decision points and, as a consequence, more copy too – for what should be a straightforward way to filter content.
In the end, we switched the focus of the filter from the person's skills to the person's goals and included filters in each section.
/ Focus on learning goals
/ Quick way to update the choice
/ Just dive right into any type of content
Afterword
After several months of work on Discover, we were proud of the space we created for Sketch users – the initial version of Discover is an important step toward achieving that goal, and I look forward to continuing work on this project.
Discover was a great personal exercise in which I collaborated with incredible designers inside Sketch and different teams within the company. It was exciting to see the project being built slowly week after week, and I loved every moment I spent working with everyone.
Thank you for taking the time to read this case study.
