SwaggerHub API Editor

Starting Point

SwaggerHub is an online development community for APIs, built around the Swagger framework. The API editor was live and working at the time I was brought in, but the UI was far from ideal, so my job was to improve usability as well as make improvements to the look/feel.

This is how the tool looked when I arrived, including a few annotations of things we wanted to change. Requirements gathering was a highly collaborative process...I'm not an API developer, so I was dependent on feedback from the product manager and several engineers working on (and with) the product to determine what would be helpful.

A few items:

• The header was taking up too much vertical space. These days, many developers are moving to smaller devices (like the Macbook Air), so the actual development section of the tool is critical real estate.
• Features seemed to be randomly placed under a series of seven drop-down menus.
• The tool's hierarchy did not support a typical workflow...seldom used items were given dedicated screen real estate, while other commonly-accessed functions were buried under drop-downs.

Wireframe

Wireframe which led to the final design at the top of the page. Some specific improvements:

• The only function that requires constant use is "Sync" (later re-labeled "Save"). All other functions moved to appropriate menus.
• Drop-down menus re-organized:
  • Account - top right, includes global navigation (e.g. a list of the member's APIs) and administration (creation of new API, account setting, etc.).
  • Configure - Gear icon, includes tasks that tend to be done at the beginning of an API lifecycle (editing API name, setting permissions for collaborators, etc.)
  • Download - Download icon, no significant changes besides size/position of button.
  • Settings - Elipse icon, includes functions that tend to be used midstream and at the end of a development cycle (publish, fork, etc.).
• Indicators were added (e.g. Public/Private) to reduce confusion that previously stemmed from multi-state buttons.
• Redundant messaging of API title and description (it appears by default as part of the Swagger documentation) was removed.
• These changes, plus a bit of subtle tightening, allowed us to increase the size of the API edit window by almost 100 pixels.

Final Design

Overall, the client was happy with the redesign. Although subtle, noticable usability improvements were made, and the project was finished on schedule.