DEV Community

Shrijith Venkatramana
Shrijith Venkatramana

Posted on

A UI Audit of LiveAPI Create Docs Page - Part 2

In the previous post we did some analysis of the "create API docs" page in LiveAPI. Do read through it to get a deeper context on the problem we are solving.

The (Sub) Problem

So, at the top - we have two options:

  1. Add Public Repository
  2. Add Private Repository

And under Public Repository, there is not much to do - it just has to goto a relevant page.

Whereas, under Add Private Repository we must show some relevant links within neatly organized groups.

To recap - this is what I had at the end of the previous post:

The Recap UI Design

While the diagram has direction, there are still some details missing - such as how is the "add public repo" going to look, and what those interactions are going to lead to.

Adding more details to the UI

More Detailed Add Docs Page

In the new design - we try to standardize adding new git providers.

For each provider - we show the following:

  1. Familiar Icon for quick recognition
  2. Textual representation of the provider
  3. Connect button to add an account for the given provider
  4. A column for already connected accounts
  5. A delete icon for removing any connections

Next Steps

  1. While the present view is logical - layout-wise I think it can be made more standardized
  2. Will a table-like layout work better? Something to be explored

Follow me @shrsv to get the next post in this series.

Top comments (1)

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

This is much better than the original cluttered UI. Nice to see how you simplified it.