top of page

Github Clear

A beginner-friendly version of an industry-standard code versioning application

Screenshot 2023-09-13 at 4.30.30 PM.png

Spring 2022

Created for UX Design

Grad level class
Taught by Regine Gilbert

Integrated Design and Media Department

NYU Tandon School of Engineering

Design Challenge

How can we empower new coders to understand and navigate GitHub without needing outside help or research?

Problem Identified

GitHub is designed to address complex issues of advanced users and experienced software developers. A new user and inexperienced coder feels overwhelmed by the language, structure and affordances of the interface.

Proposed Solution

A simplified application that prioritizes beginners needs and utilizes  traditional mental models.

iMac - 1.png
iMac - 2.png
iMac - 5.png
Screenshot 2023-09-13 at 12.13.20 PM.png







  • 19 responses to User Survey

  • 4 User interviews

  • 8 User Tests

Key research Insights

88.2% of those who needed help knew documentation exists but only  5.8% have used

78.9% would prefer to use the  web interface over the desktop client

Most important features:

  • Finding open source code

  • Online repository (cloud storage designed for code)

  • Sharing code

84.2% use web interface, 5.3% use desktop app, and 10.5% push/pull from terminal

Primary uses:

  • Find code

  • submit assignments

Usability descriptions

  • Confusing

  • Designed for developers

  • Inaccessible language

  • Usually need help to navigate 

  • Location constraint 

Min requirements of GH for codesharing are: Push, pull, merge. Issues are also valuable

89.4%  of new users needed help figuring out how to use GitHub

Most new coders utilize web interface without Git functionality

  • Increases complication of merge

  • Don't have to download client 


"The language was unfamiliar and I did not understand what the different features were"

"It's like a website for developers only"

"I'm not the main user group GitHub focuses on"

"A lot of options I won't use which makes it more complicated than needed for me"

"The website was pretty straightforward I appreciate that I had the ability to explore other projects, but making my own was a little less straightforward I had to request the help of my professors and just learn how to use Git to push projects to the repository."

Current New User Journey

Screenshot 2023-08-24 at 1.47.17 PM.png

Current User Flow

Screenshot 2023-04-08 at 10.18.14 PM.png
Screenshot 2023-04-08 at 10.30.57 PM.png
Screenshot 2023-04-08 at 10.31.07 PM.png

Competitive Analysis


Getting at the root of the issue

The problem


New Users to GitHub have trouble figuring out how to use it

They don’t understand the navigation architecture or have a mental model 




Github has a complicated structure with non intuitive affordances

GitHub offers many affordances for users with a range of coding experience

Github is trying to address with an all-encompassing interface


Collaborative coding is increasingly complicated for advanced users needs

Root cause

 GitHub is designed to address complex issues of advanced users and experienced coders but the new user and inexperienced coder have a hard time using it

Screenshot 2023-04-08 at 10.52.12 PM.png



Feature Prioritization

Must have

  • Sign in

  • push/pull code to local/cloud

  • Version History 

  • suggest/review changes

  • New code indicated

  • Repository nav

Should have

  • public/private repositories

  • Repository directory page

  • Merge techniques

  • Comparison

Could have

  • branches

  • forks

  • Organizations

  • Projects

Won't have

  • Networking aspects

  • Issues (changed)

  • Pull requests (changed)

Content Model

Screenshot 2023-08-24 at 1.56.10 PM.png


Screenshot 2023-04-08 at 10.46.00 PM.png


Prototype 1: Wireframe Sketches

Prototype 2: Interactive Figma Wireframes

iMac - 1.png
iMac - 5.png


  • CODE

    • View history

    • Edit code​

    • Add an Issue

    • RUN the code

      • Becomes web-based IDE​

  • MERGE​​

    • ​ Select two branches

    • compare code


    • Open/Reopen/Closed colors​

    • Link to flagged code

iMac - 2.png

Evaluation  11 user tests

  • Simplified UI encompasses what is needed to complete projects collaboratively or solo

  • Doesn't demystify lingo

Prototype 3: Revised Interactive Figma Wireframes

Screenshot 2023-04-11 at 1.03.22 PM.png
Screenshot 2023-04-11 at 1.03.08 PM.png
  • Hover text to explain each feature during use

    • Demystifies lingo

    • Clarifies icons and text without cluttering page

    • readable in a screen reader for inclusivity

  • Intuitive organization​

    • drop down menus​

    • Search/filter functions​

    • Collapsible Repositories bar on the left

      • Collapsible Branch bar when repository is selected.​

Screenshot 2023-04-11 at 1.04.03 PM.png
Screenshot 2023-04-11 at 1.04.22 PM.png
Screenshot 2023-04-11 at 12.42.04 PM.png

Evaluation:   13 user tests

  • Next iteration should include UI for exploring 

  • Be very precise with hover text

  • Over text should all match

bottom of page