Apigee Developer Portal - Monetization User Interface & Experience, How to make it better ? Find out here

Hello Everyone,

Recently, I have started exploring Apigee Edge Monetization & Developer Portal. One thing that caught my attention is the Developer Portal Monetization User Interface & Experience. You might have experienced already or see why in below article. Also, Find out how to make it better.

Issue 1 :

  • Manage Companies / Company Landing Page link

5141-mp1.png

Issues with above UI & Interface ,

  • It displays in all the pages including home page. Ideally, It should be in the Nav Bar.
  • Manage Companies link too should be under either monetization link or in the menu nav bar for better accessibiity.

How to make it better ?

  • Have a link in Monetization Dropdown in main menu that says "Manage Companies" or Make Monetization link in main menu a page with pointers to relevant sections.

How to do it ?

  • Login as Administrator
  • Navigate to "admin/structure/menu/manage/main-menu/add"
  • Add new link called Manage Companies, See settings below.

5159-screen-shot-2017-06-22-at-115707-am.png

Issue 2 :


  • Misaligned forms & Empty spaces between text just like below forms,

5161-missue2.png

5162-alpha-bank-monetization.png

How to make it better ?

  • You can override the default css & make them look better, For example,
  • Create a monetization.css file inside your theme css folder, copy below css,
body.not-front .page-content {
  padding-top: 0px;
}

#devconnect-monetization-download-prepaid-report-form .form-type-select {
    float: left;
    width: 20%;
    margin-right: 10px
}

#devconnect-monetization-download-prepaid-report-form #download_previous_prepaid_statements_anchor {
    float: left;
    margin-top: 22px;
}

#devconnect-monetization-download-prepaid-report-form #download_previous_prepaid_statements_anchor:after {
    clear: both;
}

.tabs--secondary.pagination {
    margin-top: 0px;
}

#devconnect-monetization-billing-document-form .form-item-billing-month {
    margin-left:0px;
    width: 320px;
    float: left;
}

#devconnect-monetization-billing-document-form .form-item-billing-month label {
    float:left;
    margin-right: 10px;
}


#devconnect-monetization-billing-document-form .form-item-billing-month select {
    float:left;
    width: 200px;
}

#devconnect-monetization-billing-document-form .form-item-search-billing-doc {
    margin-left:0px;
    width: 300px;
    margin-right: 20px;
    float: left;
}
  • Add above css file reference to your theme .info file,
stylesheets[all][] = css/apicatalog.css

Clear all caches, You should see improved UI.

Similarly, You can use above css file to make stylesheets modifications. Hope above tips will help someone working with Developer Portal & Monetization screens.

Have a feedback / Feels like something is not great with respect to Monetization UI / UX in Developer Portal ? Feel free comment below.

Comments

Awesome! I'm big on UX and one thing that has bothered me is the fact that a tab called "Monetization" is added as default. This is great for initially setting up the portal but for end users (developers), "Monetization" as a nav menu item doesn't make much sense. For an optimal user experience what do you think works best? Creating new sub menu options under the user account tab for "billing and reports" and moving company setup to somewhere in user settings. The only menu item on the nav bar should be for the catalogue and plans in my opinion. Thoughts?

anilsr
Staff

Great Suggestions @David MacDonald ,

Totally Agree, For example,

  • You can navigate to "admin/structure/menu/manage/main-menu" & Click on the edit link next to monetization to change the link label to something else.
  • You can quickly drag & drop "catalog & plans" to root element in the menu tree & disable monetization link totally.
  • Displaying the "billing and reports" link & "Manage Companies" link under user dropdown needs change in page.tpl.php template inside the theme. But, I don't see any reason why we can't make it as a configuration similar to above main menu settings.

Any developer with Drupal Experience can make above changes within a matter of minutes.

Version history
Last update:
‎06-19-2017 11:52 PM
Updated by: