Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
From 2008 to 2017, software platform GitHub grew to 26 million users, becoming the world’s largest host of source code.
While GitHub is used by large businesses and experienced development teams, GitHub maintains a beginner-friendly approach to user onboarding. By keeping the platform inclusive to users of all backgrounds and levels of experience, GitHub makes it easy for anyone to engage with the product.
Here’s how GitHub has crafted onboarding to welcome users of different backgrounds and create a rich community.
1. Tailor user onboarding from the start
GitHub has worked to smooth the way in for teammates of developers, while staying true to the dev-centric audience.
When the new user arrives at GitHub, they get to tailor their profile during the first interaction they have:
They can select their particular use case or role from this onboarding survey:
The top bar makes progress visible, a classic and effective technique for helping users avoid the frustration of feeling like their time is being wasted during the onboarding process.
Personalization is vital for GitHub to make beginners feel welcome.
Get to know new users and start customizing their experience right away. Start by calling new users by their names in every interaction — it’s a small touch that makes users feel more comfortable with your product from the start.
Not only does personalization help users engage with the onboarding steps they’re completing, but it also kickstarts a longer-term relationship with your product. We’ve found that personalization during onboarding is crucial to retention down the line. Netflix calls users by their first name during onboarding to welcome them and to encourage them to personalize the product even further.
GitHub presents two clear CTAs to new users who’ve just signed up — “start a project” or “read the Hello World guide.”
The “Hello World” guide takes users through the core actions of GitHub—creating a repository, a branch, a commit, and a pull request. They reduce friction by alerting the user to the time this will take (10 mins) at the top of the guide.
GitHub tells users what they’ll learn in the tutorial, and at the end, remind the user what they’ve achieved. This all helps to drill in the learning, especially for users who’ve never encountered these actions before.
Future iterations of the guide could build on this learning-by-doing method by personalizing further to particular use cases. How about the “Hello World” guide for project managers, in which a core action could be completing an integration with one of the PM tools they use?
When users first come into your app, get them started right away. Bake the true value of your product into your onboarding actions. If you have a time tracking app, let the new user start the timer right away and discover how your tool will give them a window on their productivity. If you have a design app, get users creating or importing a new design within the first five minutes of their first session.
Segment — a tool for connecting data to your business ops— has a beautiful and straight-forward onboarding flow that guides users towards compiling their data. It takes users by the hand, following the logic of the tool — starting first with where there data comes from, then setting up the tools it passes through, and where it’s stored. Completing these steps in this order helps users understand why the tool is cool, and sets them up to start using it just as Team Segment designed.
Videos are a powerful, quick way to connect to new users. Inserting a video into your introductory message can increase click-through rates by 96%. Videos are especially engaging when they include people — they humanize your product for new users and get them emotionally connected to what they’re doing.
GitHub regularly updates its library of videos on Youtube. The videos help viewers visualize features of GitHub, while playlists provide dedicated resources to different kinds of users . For example, the “Get Up and Running” playlist is full of basics guides and tutorials to coach new users, while the “Ecosystem” playlist helps existing users expand their usage of the platform.
One thing GitHub could do better is to insert video into their onboarding guide.
The “Hello World” guide does a great job of teaching through doing, but there are no videos to be found in that flow. New users actually have to poke around and find the videos themselves, in the top-right corner of the Guides screen. Incorporating video into a new user’s first foray into creating with GitHub could help them adopt the actions they’re learning much quicker.
Incorporating video into your onboarding flow helps you humanize your team and your tool for new users, propelling them towards their first aha! moment with you. It doesn’t have to be a high-budget stop motion animation. You could simply have your lead developer describing what your tool does on the user’s first landing page after signup, instead of having that description in a block of text. Or you could record your screen to give a demo of your product, pointing out all the best bits.
Wistia’s onboarding starts right off with video. This is a great move because it shows off what Wistia’s tool does — it’s a video player that you can customize to your business needs. It also works because it presents the new user with a human face right away, leveraging the familiarity principle to increase engagement.
The key to team onboarding is to enable the developers themselves to take the lead in introducing their team members to GitHub.
The first time the new user arrives at their team profile, they’re greeted by “what’s new.” Teams can @ mention each other, give project access to others, and invite further members onto the platform.
Plus, when the new user visits their own dashboard for the first time, they can see this “personal news feed.” It’s empty right now, but it will fill up as soon as the user follows colleagues or chooses some repositories to “watch.”
GitHub does a good job of highlighting the parts of the platform where the new user will interact with their colleagues, but they could go a step further.
During that initial “start a project” onboarding sequence, the new user accomplished the stages alone. This process could be much more effective with some teamwork thrown in. Collaboration is a core action of GitHub—it’s the users that take advantage of the opportunities to connect who get the most out of the platform. Adding in a teamwork exercise for new users to check off their initiation list would be a powerful onboarding upgrade.
If teamwork is vital to your new user learning to love your tool, then help them do it right away. Incorporate a collaborative action into your onboarding checklist.
Dropbox knows that users who share Dropbox with their friends are more engaged and find more value in the tool, so they cook it right into the first few onboarding steps—new users must share a file to progress to the next stage.
Making your product work for a wider range of users is one approach to growing your user base. GitHub has done an excellent job of building a network for anyone, from experienced developers to developers’ colleagues, to get started.
Personalizing onboarding to different use cases and opening plenty of opportunities for collaboration straight away are the first steps to getting new people feeling at home and connected within your app’s world.
AI-driven updates, curated by humans and hand-edited for the Prototypr community