GitHub

Role

Overview

Timeline: January - March 2023

Role: Editor, Researcher, and Designer

Teammates: Ishaan Bose & Thomas Fratantoni

Tools Used: Figma, GitHub, Zoom

Computer science is one of the hottest fields in the market, and more and more students are entering university in hopes of pursuing a career in technology. Even 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.

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.

The Problem

Pre-teens struggle with navigating the initial set up and onboarding process when starting to use GitHub, which leaves them feeling overwhelmed, leading to drop off altogether.

They need a simplified flow that would allow them to easily understand and perceive the next best action during set up in order to follow safe and modern version control practices.

Goals

For the user: starting to learn the tools of the trade earlier allows them to accelerate for early career growth

For the business: leveraging the influx of new practitioners into added market share by building their brand from the newest, and youngest developers

Flow

The main objective is to simplify the GitHub entry point for younger students. This can be accomplished through more kid-friendly vocab, fun visuals, and less options to decide on.

Research Process

Research Findings

Pain Points:

Hard to understand directions, which causes unnecessary confusion and leads to drop off

Lack of direction within product -> have to reference the tutorial

Lack of primary action buttons in general

Prototype Testing

I went through GitHub with students whom I tutor coding with.

They fit the age range and the audience group for young users of GitHub.

The participants tried to follow through instructions and navigate the platform, but encountered many obstacles.

Interviews.mp4

Frustrations & Findings:

[it was difficult to] “find stuff on the new page because I didn’t know where it was” (11:35)

“It says click the button and I don’t know which button. It says ‘Main’, but I don’t know where that is” (15:05)

(when trying to create a branch) “where is that? I don’t see it” (16:50)

“I don’t understand this[...] and then, I don’t know what to do with this, and then I have to go to another thingy, and it’s confusing” (23:20)

“What?!? I don’t even know where that page is! Can you just help me? How do you commit a change? How do you do a pull request?!? … Where is new pull request?!?” (27:40)

Iterations and More Prototypes

Another implementation was a progress bar to help the students keep track of which step they are in.

Not only does it break the parts up, but it also help reduce cognitive load for the kids.

After the user testing, I went through more layout ideas for the low-fi.

One of the changes was altering the project type to block icons so it is easier to click on and locate.

Another change was including a large pop-up confirmation to let the student know if they have successfully set up their project.

Younger students tend to like confirmation and affirmation so this helps bolster their interest in continuing with the platform.

Design Process

Developed a full flow with three separate alternative flow options to test with students. Through another round of user testing, I hope that the design can be narrowed to one flow.

Another Round of User Testing

Ran another round of user testing with the same group of students.

Feedback received:

"like the octotips!"
"design looks pretty good"
"easier because less stuff to click around on"

Our team took in the advice and feedback and decided to improve on the parts that the students enjoyed the most. I decided to combine the ideas from each of the prototype ideas and alternative screen ideas with the features that were liked the most.

Hi-Fi Prototype/Solution

Octotips

One of the main changes was adding in octotips, which are helpful instructions that guide the user through each step.

Each of the octotips is filled with kid-friendly and approved terms to assist the student.

Project Type & Progress Bar

The set project type eliminates the hassle for students to figure out what they need to do, but just choosing an option.

A progress bar helps them visualize which step of the repo they are at.

Icons

Another main implementation is the use of icons on many of the options.

Children are more visually-attracted to pictures, so the incorporation of icons will help them focus on completing the task at hand.

Click Through of the Prototype

GitHubforKids Prototype.mov

Results

After the redesign, there was an 80% satisfaction rate and a 100% completion of the onboarding process for the students.

Key Takeaways

This 10 week long project was very enriching and interesting because it was my first project working with a younger user testing group instead of college students, adults, or teens.

I was able to learn so much through the user research and each design stage. There were so many things like decreasing the number of options, including interactive elements, and displaying a progress bar that kids enjoyed so much more than adults.

It was interesting to learn how customizing most of the pages and limiting the amount of options can prove to be such an integral step to decreasing the difficulty for students.

For the next steps, I think of exploring more on visuals and icon redesign. Since the students have expressed more interest towards visually-appealing items, I think focusing on redesigning the shapes of elements and buttons will garner their attention the most.

I think this project was very successful given the difficult onboarding process in the beginning to the 100% onboarding process in the end.

Page updated

Report abuse