Making computers cheaper and more accessible has introduced a whole new user base to computer science, but how can we help them succeed?

Computer science is one of the hottest fields in the market, with less technical positions are being asked to become familiar with industry-standard tools in many companies, making technological literacy invaluable. One key competency is using Git to collaborate with other developers and practice safe software management practices. To take advantage of this ubiquity, we wanted to introduce GitHub, the largest provider for Git and version control, to younger audiences.

The reason for this is simple - from a user perspective, starting to learn the tools of the trade earlier allows you to accelerate your early career growth. From the company's perspective, they can leverage this rapid influx of new practitioners into added market share by building their brand from the newest, and youngest developers.

Thus, targeting pre-teens and teens in the middle school age range would allow us to develop a new simplified model of version control - GitHub for Kids.

Our research consisted of observational user studies of children who took part of a coding class that my teammate was conducting.

Challenge: Find Target User, and understand what exactly is their current painpoint in onboarding

Approach: Conduct observational user testing studies to gain qualitative data

Outcome: Persona developed, pain point found

Our research showed that onboarding, and the sheer number of steps was often a blocker to getting kids to start.

Challenge: Ideate on potential ways to simplify terms, and explain things in a way that a younger audience would understand

Approach: Sketch, test and integrate

Outcome: Flow of use, core idea

I created a prototype that we could test with these kids again, to see if it addressed their onboarding pain points.

Challenge 3: Build out our idea into a higher fidelity prototype which could be tested.

Approach: Develop multiple representations of what screens could look like

Outcome: 1 Full Flow of screens, 3 Alternative Screens for flow

The core part of this solution is introducing a stepper wizard that delivers helpful "octotips"

Breaking the onboarding down into a smaller stepper made it more manageable.

Choosing a project type speeds up the repo creation process by pre loading helpful licenses, folder structure and file types.

Giving kids some default option and templates would help them be guided.

This feature uses a neutral point of entry which preserves the normal point of entry for non-targeted user. By default this would come on for first time users.

This opt in element would preserve the experience for the vast majority of users who are not kids.s

We needed to simplify technical terms and make it easier to understand.

From our user research we realized that for first time and younger users, understanding the buttons and their terminology can be difficult. To target this pain point, I decided to use metaphors and kid friendly language in helpful tool tips that auto play on first time activation of a repo.

We re-engaged with the same kids who we tested on originally.

I tested this prototype with target users that reflected our core persona, using an observational user test.

Some of the key insights, as extracted from testing:

From our user testing we wanted to add additional state and hover indicators to make sure our users knew what affordances were possible.

Subtle interactions can help the design feel more delightful.

A full click through stepping through it.

The end to end flow focuses on onboarding, and using "octotips" to help guide kids through the repo creation process. From there it can teach kids throuhg accessible language and metaphors.

The best part about this was getting to interact with real kids who are learning how to code through volunteers at UC San Diego. Seeing their passion was invigorating!

This project was really fun, as it was my final project that I've been able to complete while at UC San Diego. It has been heartwarming to see how far my design skills have progressed in relation to some of the first projects that I completed in my time here, and I look back fondly on this experience. I am excited to continue to grow and apply what I learned here in new experiences, and see where that takes me.

The one skill I feel like I really developed in this project was learning how to operate under pressure and as quickly as possible. A lot of the deadlines and turnaround for this project were week to week, and I had to quickly find the best direction. It helped me learn how to navigate ambiguity and access options rapidly, as well as learn how to get detached from decisions.

A follow up on this project that I would do if I was given more time would be to see the influence of color on perception and engagement for children's use. One hypothesis that I had was that children would engage more with bright and colorful web elements, but I decided against that in favor of staying inline with GitHub Brand guidelines. I would love to conduct a more formal experiment to see how this assumption fares.