The following are the various screens we have so far for our reference. I don't have a private repo to host this on but this is relatively inconspicious, no proprietary information and won't be found as a page so I'm fine hosting it here for now.

Before Logging In

  • Color shades in use :
    • Background colors : #2c3e50 for the header, white for the body
    • Text Colors : white for the header , #18bc9c on hover, #2c3e50 for the body
  • Buttons :
    • Sign Up : Title: Sign Up. Details requested - Username(mandatory), First Name, Last Name, Email Address(Mandatory), Password, Captcha
    • Log In : Title: Sign In (?). Username, password. Standard stuff.
    • Continue : Takes you to the Log In page and redirects to the Signed in page.
  • 3 columns :
    • Ingest Data : Should we say “Any Volume” or provide realistic SLAs?
    • Run Models : Sounds fine. (Preset instead of BuiltIn?)
    • Deliver : -

After Logging In :

  • Can do away with the 3 columns. They already know our offerings at this point. But what else to put in its place?
  • Options on Nav Bar :
    • Execution : 5 sub-items
      • Execution Status (Is this paginated? How much history do we allow? Should this be informed? )
      • Adhoc Commands
      • Application Log (Same questions as in Execution Status)
      • Activity Log (Can we call it User Activity Log?)
      • Data Exports (Data export activity? We don’t allow exporting data in this view)
    • Status: 4 sub-items
      • Health
      • License
      • Data Sources
      • Resource Monitor
    • Developer : 2 sub-items
      • API
      • SDK(Experimental)
    • Resources : 6 sub-items (Length of list is slowly increasing :D )
      • Operations
      • Security
      • News
      • FAQ
      • About
      • Help
    • Logged In User’s name : 3 sub-items
      • Profile
      • Invite Colleagues
      • Logout
    • Admin (To be ideally displayed only if the user is the admin)

Design notes

From the sites I’ve gone through and talking to my friends, this is what I’ve picked up so far. And these seem intuitive but they’re easily missed. Ideally, a website, even a B2B page should tell a story.

  • If I press the Continue button, I get the organizational view. Can we replace this with that information directly if this screen is superfluous post-login?
  • What is my priority/order of checking in terms of the various tabs on the Nav-Bar when I log in? E.g. - Considering something as rudimentary as Sublime Text or its inferior cousin, Notepad - File comes first and then comes Edit. These are things I will use all the time and eventually resort to hotkeys. (Are hotkeys too far-fetched in our application?)
  • Anything that is static information that is unlikely to change over iterations should be shunted to the end - for e.g. - License, About, Help.
  • Many friendly websites also have a pop-over the first time they’re used, displaying the various options that can be used. For e.g - GMail, Evernote, Dropbox. Granted, these are B2C, but even the users who use a B2B product such as ours will probably appreciate it. Asana, for example is both B2B and B2C, and it has animated tips that flit over in turn.

  • What if there are features that are offered over and above their current paying slab? They should be aware of it so they can avail it at some point. Even if this is intended as a utilitarian site and not the main business facing website, this can be a part of the “Profile” info so they can view those features and they can request the admin if that’s a necessity (This might be overkill.)
  • Based on the role of the user, the FAQ should link to the Operations page or the current FAQ page. As an engineer, I’m more concerned about the technical operations than the offerings of the parent company.

As far as color schemes go - there are color wheels and the governing principles of color models - Monochromatic i.e. Shades, Triad, Complementary etc. There are a lot of helpful sites that we can refer to help us get the shades that are said to complement each other -

We need to zero in on what colors we, ScribbleData, as a company hold dear. The Blue and White of the existing logos are beautiful but we definitely can have two sets of colors for two different platforms.

Venkata suggested that I take a look at Sentry the other day and considering that as a rudimentary case and using the color palettes from the aforementioned sites, this is how the new UI currently looks. Obviously, the design suggestions I’ve spoken about are yet to be discussed further and implemented. But here it is as it stands -

I personally liked AdminLTE a lot. It seems…sleeker. But yes, the color scheme and layouts will depend on the content. The content depends on the utility.

All of this is very much a work in progress. I’m still learning more WRT usability, layouts, screens and docks as to how B2B percieve it. I will add to this.

PS - I’ll put this in a mail over the weekend for our reference. I hope this format is okay for now.