Github Clear
A beginner-friendly version of an industry-standard code versioning application
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
Proposed Solution
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.
A simplified application that prioritizes beginners needs and utilizes traditional mental models.
Process
Discover
Define
Develop
Deliver
Discover
-
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
84.2% use web interface, 5.3% use desktop app, and 10.5% push/pull from terminal
Min requirements of GH for codesharing are: Push, pull, merge. Issues are also valuable
78.9% would prefer to use the web interface over the desktop client
Primary uses:
-
Find code
-
submit assignments
89.4% of new users needed help figuring out how to use GitHub
Most important features:
-
Finding open source code
-
Online repository (cloud storage designed for code)
-
Sharing code
Usability descriptions
-
Confusing
-
Designed for developers
-
Inaccessible language
-
Usually need help to navigate
-
Location constraint
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."
Quotes
Current New User Journey
Competitive Analysis
Current User Flow
Define
Getting at the root of the issue
The problem
Why?
New Users to GitHub have trouble figuring out how to use it
They don’t understand the navigation architecture or have a mental model
Why?
Why?
Github has a complicated structure with non intuitive affordances
GitHub offers many affordances for users with a range of coding experience
Why?
Github is trying to address with an all-encompassing interface
Why?
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
Persona
Develop
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
Moodboard
Deliver
Prototype 1: Wireframe Sketches
Prototype 2: Interactive Figma Wireframes
Features
-
CODE
-
View history
-
Edit code
-
Add an Issue
-
RUN the code
-
Becomes web-based IDE
-
-
-
MERGE
-
Select two branches
-
compare code
-
-
ISSUES SECTION
-
Open/Reopen/Closed colors
-
Link to flagged code
-
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
-
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.
-
-
Evaluation: 13 user tests
-
Next iteration should include UI for exploring
-
Be very precise with hover text
-
Over text should all match