Emily

Rethinking onboarding and design systems at Sketch

I worked as a Product Designer at Sketch early in 2021 until the summer of 2022, working within both the Onboarding and Design Systems teams.

I've had some wonderful opportunities to improve the experience and core functionality for our millions of users. So far, I've helped improve the overall onboarding experience when signing up to Sketch, how users access their account page and numerous MacOS improvements that will be coming to light very soon.

Designing a better onboarding experience

Working on improving the onboarding to Sketch started out with an 'information matrix'. The team investigated what actions a user would have to undertake when signing up to Sketch. These actions were then categorised and split into those which were core to the users journey and those that were deemed 'exploratory' and could be completed at any time.

This exercise helped us eliminate mental noise from the experience allowing the user to discover Sketch at their own pace.

The problems

After signing up to Sketch we originally asked the user to create their Workspace straight after inputting their basic sign up information.

From user research we found this step to create confusion and many questions were raised; What was a Workspace? If I've just signed up don't I get a Workspace by default? I don't know what a Workspace is how would I know who to invite at this stage?

It was causing cognitive overload that could easily be avoided.

After the previous step, we'd then present the user with a 'Workspace ready' screen, with a lot of actions for the user to take when they hadn't yet even experienced a Workspace.

We gave them learning material on this screen, a way to set up their payment and the option to download the Mac app. All actions which shouldn't be forced on a user so early into the set up process.

The user then landed in a very empty looking Workspace, with minimal information on getting their Workspace up and running and how to manage their documents.

We also had no way to see all that helpful information from the previous screens.

A new flow

After a lot of exploration we decided to simplify the experience down to two screens, including the sign up screen. We kept the sign up fields to a minimum and added a link to download the mac app on this screen, rather than having to go through the multiple steps to access our core product.

As intrusive as modals are, our research showed that users didn't know what to expect from the trial period, we wanted to be completely upfront so there were no surprises later down the line. Using the one modal allowed us to set expectations early.

We went through a lot of ideas of how to introduce a new user to their Workspace, a walkthrough with tooltips being one of them, however we deemed this too intrusive. Referring back to our action matrix, we were able to decipher that helpful signposts, designed to let the user explore as and when they wish, would be the most user friendly experience.

Using the information matrix as our guide, we made smaller unobtrusive 'banner' signposts that didn't interrupt the content but worked around it, allowing a new user to explore an existing Workspace at their own pace but not leaving them without any guidance at all on their next steps and how to get the most out of Sketch.

Just the beginning

The most exciting part of the redesign was when we identified that improving the sign up was just the first step. We added signposts yes but wouldn't it be great if we took our new users to somewhere where they could discover everything new with Sketch and give them a big welcome, like a virtual hug as they arrived?

Expanding on our 'Quick Links' from our new welcome state, we started mocking up a 'Resources' page, putting ideas down for what a new user to Sketch would be interested in the most and find helpful to start them on their journey with Sketch .

Working with the Marketing team we identified the key areas in which we could deliver the most output, we wouldn't want our content getting stale over time, it needed to be relevant and useful. We also wanted to add the feeling of community and showcase the amazing done every day by creatives using Sketch.

We worked on numerous iterations to make sure we covered all potential layouts, content ideas and entry points, after all it wasn't just designers that would be joining Sketch.

It was at this point that I had to unfortunately say goodbye to my onboarding team to join the design systems team due to a team shuffle around.

However, I was still on hand to help and give feedback whenever the team needed it. Discover is launching in April for all Sketch users and I'm so incredibly happy with where we ended up.

Introducing Discover

For the final release the team kept the basic layout but added tabs for the Guides and Insight sections, which allows the user to choose which level of content is most relevant to them, for beginners 'Get Started' would be ideal, but for those already familiar to Sketch 'Dive Deeper' would be much more suitable and useful.

The community aspect moved on considerably to include an 'Inspiration' section which brings stories from the community to the spotlight.

Overall this onboarding project was a journey and something i'm extremely proud to have been a part of.

Acknowledgements

Design

The Discover project wouldn't be what it is today without Ramsés Cabello he took an initial idea in it's infancy and completely ran with it as well as making the onboarding experience what it is today.

André Goncalves for being the best partner in crime for the onboarding redesign.

Product

Laura Palombi for being the absolute queen that she is, the mother of onboarding at Sketch.

Team

And every bit of praise goes to the whole of the onboarding team: João Guiomar, Ruben Almeida, Bernie Snell,  Unai Esteibar, Sonia Meruelo, Alin Burduhos, and Jurgen Zimmermann.

Components Web View

Working with the Design Systems team at Sketch has been the highlight of my career so far. Together we brought to life Components Web View, the start of the big plans the team has to improve the experience of designing and managing design systems.

In the infancy of Sketch's web app, the ability to view a document or libraries components such as Symbols, Text Styles, Layer Styles and Color Variables was limited if non-existent. A user would need to scroll down a long list of pages within their document to view a vast array of Symbols that weren't organised.

Bringing MacOS to the web

We started by imagining how a user would best want to see their components in the web. We wanted it to fit in with the existing page designs and layouts in the web app.

We also wanted to marry the experience from the Mac app, the components needed to fit effortlessly in a web environment as well as MacOS.

Six months in the making and Components Web View was born, allowing the user to navigate their document with ease, surfacing all the components a team would need when handing off design work for development.

I worked on helping to bring this idea to life along with product and working with the engineering team to make sure we continuously work towards the best UX. Together we also introduced Color Tokens, the first design tool to do so natively. We're very excited to continue improving our features for both web and Mac.

Acknowledgements

Design

Glenn Hitchcock the mastermind, Components Web View is very much his baby, we are not worthy.

Product

The absolute powerhouse team that is Glòria Langreo and Tim Davies for leading this project and making it what it is.

Team

All praise to the Design Systems: Egor Mikhnevich, Gavin MacLean, Inês Carvalho, Marcio Barrios, Michal Csanaky, Michal Filip Strzelczyk, Ole Halvorsen and Sean Reilly.

Grid Size is a small feature add-on to enhance Components Web View, but something i'm super proud of.

We noticed that with the new Components View, we weren't giving the user enough options to customise their viewing experience.

We can never predict what size components a user is going to be upload, to help we designed a simple dropdown that allows the user to pick from a range of grid sizes to optimise components view to the fullest.

Helping all components look their best regardless of whether they're 12 x 12 icons or illustrations that deserve to be seen with all their glorious detail.