Ship It: DevOps Tools

Project date: 2017
My Role: Lead Designer
Other team members: Full Stack Engineers (2)
Project description: Ship it was an internal tool used by the engineering team at Avvo. It was used to automate the process of shipping releases and creating test environments. The tool was originally built by an engineer as a hackathon project, but eventually grew into a more robust application owned by the infrastructure team.

Responsibilities:
Research & testing
Wireframing
Prototyping
Visual design
Front-end
Data analysis
Create-release.png

The Challenge

Ship it was an internal tool that was designed by a couple Avvo engineers to help them make the process of shipping releases and creating test environments easier. As the company grew, we got to a point where many more people were using and relying on the tool. New employees had a difficult time understanding how it worked, and it was becoming more of a burden rather than an improvement. We knew we needed to invest some resources into making the tool more usable, consistent, and more intuitive for new employees.

My process

  1. Understand the needs/problems/goals

    My first task was to start talking to our engineers and find out what was working or not working in their current process. I did a series of interviews with both seasoned veterans and new employees, and asked my team mates to call me over any time they were shipping code so that I could watch. A few things were clear to me after delving into the research: the tool had no consistency in it’s terminology & layout, there were many complex processes and words that meant completely different things to different people, nobody had exactly the same process for a given task, and it would often take several tries to find the part of the tool they needed.

  2. Card sort

    It was clear there needed to be a better hierarchy of information within the app, but since there was so much variance in the way engineers used the app I wanted to have a better understanding of people’s mental models. In order to get there, I conducted a card sort exercise with several engineers. Every bit of functionality within the tool was written down on an index card, and the engineers were instructed to group them logically and assign each group a name. At the end we discussed their groupings and their reasoning behind them.

  3. Prototyping & testing

    Using the information from the card sort exercise, I made some paper prototypes of a new navigational system that organized ship it based on the groupings that the engineers had come up with. I tested these prototypes with engineers, and took their feedback.

  4. Implementation

    After a few rounds of iteration, I worked with our infrastructure team to implement the updated designs

Three Avvo engineers engaging in a card sort activity.

Three Avvo engineers engaging in a card sort activity.

Card sort results grouped by relationship

Card sort results grouped by relationship

A clickable prototype that I used to test the shipping flow with engineers.

A clickable prototype that I used to test the shipping flow with engineers.

Results

In addition to the navigation rework and improvements to information hierarchy, I also worked on a new system for monitoring the status of various processes, added some much needed descriptions and help text to some of the more confusing parts of the app, and redesigned the “Create a Release” flow. Overall the response to this project was extremely positive, especially among newer employees.





Project Gallery