Improving UI of the dashboard: Case study

APIMatic is a Developer Experience Platform for Public/Private/Internal APIs.

Dashboard is the place where you can create/import an API and further perform a number of tasks ranging from single SDK generation to generation of a complete developer portal.

So we recently decided to give the dashboard a fresher look and feel 🎨.

Basic thing that we noted that it had a lot of grey/bland feel. Secondly the cards had too much information which added a lot of weight.

So our aim was to give the page a cleaner and more friendly feel. To achieve that we needed to lessen the overall weight.

API Group Card (before revamp)

We recently added the functionality to publish packages over different repositories. So, we needed space for package publishing info 📦. We noticed that the logo/image was taking a lot of space and could be shrink. Thus we took some space from the API group logo and gave it to package publishing info.

Secondly the API group name seemed like a clickable link. Blue color and the dominating font size gave the impression of containing something. To neutralize that we gave it a charcoal shade.

Package Name Added, API group name neutralized

If you look at the “Published” tag, bluntly speaking, looks pretty old and ugly 👴 👺. So we gave it a modern feel and placed it in the corner to balance the card.

👇🏼

“Published” tag revamped

Let’s talk about card weight. Strokes play important role in UI design weight. Although they serve as good separators but they add weight at the same time so one has to be very careful.

To reduce card weight we remove the outline and replaced that with a subtle shadow. It not only reduced the weight but also gave the card a cleaner and modern feel.

Outline replaced with shadow

If you look at the bottom section of the card it appears to be pretty bulky. We decided to make use of the negative space as separators. Base and icons were given a fresher color. You can see the result below.

Bottom section was given a cleaner/modern feel

Now time for a brave decision. Primary blue color was too dark for a slick UI. We decided to go for a brighter color 🔵.

Along with that “Edit” had blue color, we replaced that with a charcoal one.

Primary action color changed

Major elements got the make over. Going onto minor elements.

Add icon revamped

“ ➕” icon looked pretty bulky. We decided to lower down it’s weight by using an outline and thinner icon instead of the filled base. Result was pretty clean.

We also gave a minor makeover to additional numbers tag (present right next to “add” icon) by changing font weight and base color.

Share with team icon revamped

“ ➕” icon was not obvious enough. I’d rather call it mystery meat. (The term “mystery meat” originates from the meat served in American public school cafeterias that were so processed that the type of animal they came from is no longer discernible.)

We replaced “ ➕” icon with more obvious icon (person with add sign). It changes back to “ ➕” once you start adding people 👱🏻 🕵 👲🏻 👳🏻 👸🏻 💂🏻 🎅🏻.

There were too many actions placed on the card. We needed to define primary and secondary actions and only place the most frequent ones on the card and somehow encapsulate the secondary ones in some element.

We decided to put secondary icons inside “more” icon. This not only lowered the overall weight but also allowed us to name the icons to make them more obvious.

Secondary actions encapsulated

Result

After these minor but significant changes result was quite satisfactory.

There were few use cases along the way which needed to be addressed and adjusted into the current view.

Designing for zero data

What if there is no description? 🤔

What if there is no package published yet? 😦

What if the API isn’t shared with anyone yet? 😐

Different UI states

Now that we were done playing with the API group card we moved onto Create.Import card. We needed a lighter version of it to compliment the remaining UI. 👇

Create/Import card makeover

This is how it all looked after the cards were placed back together.

Top level icons looked quite outdated. 👤

We gave the secondary bar a cleaner look by revamping the typography a bit and recreating the icons.

Here is the final look after revamp ❤️

• Update*
  We all do mistakes, don’t we? Realizing it and admitting it is the real deal.

So we made a mistake by putting “more” icon on left.

Human eye scans from left to right and for obvious reasons “Generate” needed to be the first action item, “Edit” be second and “more” be the right most icon.

Waiting for claps 👏🏿