Skillshare Design System

Designing and documenting a cross platform design system

Rye Bennett
Aug 22, 2017 · 6 min read

The design system at Skillshare was tasked with unifying the design team and creating a more cohesive user experience across all products. In this post, I will review the process and of creating and implementing a detailed design system. This was a long but rewarding experience — I hope to share some of the insights and lessons learned.

What is Skillshare?

Skillshare is community where creators come to learn, and makers come to teach. Our mission is to unlock the world’s creativity to help people thrive, live adventurously, and make really great things. We’re dismantling the traditional barriers to learning so that anyone, anywhere in the world, can learn whatever they set their minds to. We believe learning should never end. And it doesn’t have to.

When I joined the Product Team at Skillshare, there was very little design documentation or standards. I quickly noticed the inconsistencies, delayed workflow, and developer frustrations that came from this and set to work. I began the process with an audit of the current platform, analyzing what was working and what wasn’t, documented design discrepancies, and began assembling elements into a single Sketch file to see everything in one place.

Principles

We began by distilling our guiding design principles — what matters most to our team and company values.

Content First

Skillshare prides itself on it’s open platform and ability for anyone to teach and class. For this reason, we focused on creating a content first interface that would allow the classes, projects, and user profiles to take the front seat. Our brand is reductive and we tried to maintain this throughout the interface design.

Simple, Clean, Approachably Professional

Users, both teachers and students should be able to find the content they are looking for without distraction. We wanted the Skillshare brand to take a backseat to the user’s experience on the site and the high quality, diversecontent on our open platform

Product Focused

Although we wanted a fresh, modern UI, we primarily focused on building design standards that would fit the needs of our product. We never wanted to modify the content to fit the design — instead we focused on creating a flexible design system that would adapt to fit any (and all) applications and edge cases.

a portion of the design specs produced

Patterns and components

After assembling all the existing design elements, we collaborated to refine the styling and identify our guiding visual elements. We then began the process of converting this into a comprehensive system of design elements with patterns and components. Since I was working independently on this project, I used UX Power Tools as a (fantastic) starting point to get off on the right foot. This kit allowed a ton of built in flexibility out of the box and also set up an organizational structure that made customizing and creating new elements a speedy process.

working session identifying existing patterns

Once the structure for the system was in place, I focused on detailing an extensive set of patterns, elements, and components to cover all user flows, states, and edge cases. This comprehensive sketch file would act as a single point of reference for our team as well as a design repository to expedite the design process.

Snapshot of the master design file in Sketch

States, Edge Cases and Responsiveness

We account for all ‘states’ in the system, and there are symbols for each of these states. For example, a form input has a placeholder, hover, focus, filled out, error and disabled state. In the example below for our multi-select component, to the right you’ll see the “multi-select / placeholder” symbol is selected. From there you can access a dropdown of all other symbols — and change the symbol to “multi-select / filled out” or “multi-select / error”. This is great for designing and mapping out product flows!

Plasma is designed to be responsive. While it’s simple to build responsive components, it’s not so simple to mockup responsively. Or so we thought. It’s important to design web UIs that work at different browser widths. Fortunately, Sketch provides the ability to set elements to respond in different ways as they grow or shrink in size. Using a combination of settings, groups and symbols, you can create a basic responsive UI in Sketch. While this won’t help you with breakpoints, it is powerful for quickly seeing how or if the design works at different browser sizes. Thus we created our library of patterns and components to be responsive.

Collaboration

Single Point of Reference

In order to make the Design System as effective as possible, we needed the whole team to be working off of the same file. If an update was made on the master, this needed to immediately take effect for all designers. To make this happen, we created a Sketch Template file in Dropbox for the team to use. The template contains all flexible symbols, components, grids, brand assets, and text+color usage to make it simple for everyone to quickly start a new project. Having everything in a master file also eliminates the issue of design inconsistency as the team would need to meet and discuss before making any additions or modifications to the system. Having clear and detailed UI documentation gives us more time to focus on complex user experiences, product challenges, and collaborating with other teams.

Craft Library

Another tool that our team uses to stay aligned is Craft Library. Similarly to the master design file, this system allows us to keep a synced database of all design elements in Dropbox. Designers can quickly drag and drop into their design files and there is no risk of files being out of date.

Quickly building a high fidelity UI from our shared craft library

Always a Work in Progress

While we have made significant progress on this system over the past ~4 months, our team treats this as a constant work n progress. Instead of simply functioning as design documentation, we make it a part of our design workflow to continuously audit the system — adding and subtracting elements to better fit the needs of the product and tweaking components to help us better craft delightful user experiences.

While improving the design system, we are also focus on better unifying the documentation with our engineering workflow. When we are able to have code elements that match our Sketch styleguides, snippets to quickly build forms, and custom components for any page of the site, we will be an even more efficient team. Quickly building features without the risk of design inconsistencies or overlooked responsive behaviors will be a thing of the past!

)

Rye Bennett

Written by

product design lead @ Meetup, architect in a previous life www.riannabennett.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade