review-ninja-logo-green.png
 
 

ReviewNinja is an open source code review tool that integrates with GitHub (the popular source code management system). ReviewNinja makes it easy for development teams to improve and maintain their code quality.

 
ReviewNinja-Storyboard.png

Storyboards

After conducting generative research with developers and engineering managers, I created a series of storyboards to understand code reviews within the development process. We learned in research how important it was for our tool to seamlessly integrate with GitHub and existing processes.

ReviewNinja-Sketch wireframe Repo List.png

Sketch wireframes

I sketched multiple iterations of UX flows so that the whole product team could quickly and easily collaborate and make decisions. We learned from research that development teams expected the tool to follow GitHub conventions so it would integrate seamlessly. As a result I used nomenclature, iconography, and key UX patterns (like adding repositories) that are consistent with GitHub and its ecosystem.

ReviewNinja-add repo.png

UI design

Once the team had agreed on the UX scope for our minimum viable product (MVP) and we'd tested the wireframe UX with representative end users, I moved on to design the UI. We wanted a lightweight, contemporary UI that was distinctive yet felt like a part of the GitHub ecosystem.

ReviewNinja-PR List.png

UI Design

It was important for developers to get a lot of information at-a-glance from their pull requests. Using patterns they'd be familiar with from GitHub, we made sure that all review status information was easily available.  

< Previous

ReviewNinja-Storyboard 2.png

Storyboards

I created different storyboards for different users and flows so we could all get a feel for who would be doing what, when, why, and where. It was key for us to understand that we needed to offer more robust functionality than GitHub for code reviews, but not be so burdensome that developers stopped doing reviews.

ReviewNinja-Sketch wireframe.png

Sketch wireframes

Working rapidly and iteratively, in a highly collaborative and transparent way, helps the whole team take ownership of the user experience. One way that we broke with GitHub's UX standards, was adding a conversation panel to the side of the code view. We chose to do this because in the context of reviewing the conversation about the code is as important as the code, and both need to be visible at the same time.

ReviewNinja-PR Detail.png

UI Design

A visual design intern created the logo and high-level visual design direction, and together we created the product design. We knew from research that developers needed to complete code reviews thoroughly and efficiently, so we used highlighting, one-click approvals, and integrated merging to support them.

ReviewNinja-Compare Control.png

Compare control

From research we learned that it's important for developers to be able to compare commits and see when issues were introduced. I co-created the compare control with developers so they can quickly see code changes.

Next >