GitHub Repo Consolidation

Raven 3-page View.png

Problem Space

Overview

On a team of four at Pivotal Labs (one PM, one designer, two devs), we built an interface that allows admins to transfer GitHub repositories in batches. We built this in response to a new GitHub subscription model that was slated cost Pivotal several hundred thousand dollars. Consolidation would lower long term costs through reduced repos and solve for pain points with secure and consistent administration. We designed and built the interface in 5 weeks.

Methodologies

  • Lean UX
  • User-centered Design (UCD)
  • Extreme Programming (XP)
  • Test-driven Development (TDD)

Design Challenges

 

Ghost Designing

Internal Pivotal did not officially allocate a designer to the project, so I worked on the project ad-hoc as a “ghost designer.” The challenge was that I needed to build a successful flow without access to critical design necessities, such as user testing (which came later), consensus on look & feel, etc. My plan of execution was:

  • Rely on the PM for user insight,
  • Utilize the Pivotal style-guide for consistent look & feel, and
  • Create a modular-feeling, lightweight design that could be easily modified if/when new information became available.

I continued to push for officially allocating design to the project because of opportunities for leveraging the interface with external customers. Beyond our own purposes, the interface could be licensed to other companies who want to reduce numbers of repos or it could be open sourced for the purpose of Pivotal-branded publicity. Both of these options would expose an explicit need for a user-centered UI.

Exposing errors

I iterated on my initial spreadsheet layout to a card layout for the purposes of floating errors to the top and creating a more dynamic UI. This decision was made after user research highlighted the importance of users resolving errors and getting the transfer done quickly, without getting “in-the-weeds” with details.

Transfer 1.3.1 (transferring - errors).png

Iteration #1

With a long repo list, users would have to scroll down to the bottom of the page to catch all possible errors.

3.0 Errors_New (2).png

Iteration #2

Errors float to the top and cards spin on mouse-over so the user can get more info on how to resolve the errors.