UX visioncasting

[mattkirkland]

This issue is for @vikascripps to take some lead on a UI/UX vision for this tool. The short version:

• we're white labeling an open source tool
• but we want it to feel like BNB.

BNB makes these incredible, powerful products that run entire divisions or whole companies, but we don't do a good enough job helping the execs/clients/owners/bosses understand the value created by these tools. We're now doing a better job with updates.bnb to tell them 'look at all the work we're doing', but I'd like BNB Intel to be a tool where those people can see the work their APP is doing. Like: here's your dashboard to show how well your THING is working. Revenue, Signups, etc. These are things your tools is doing FOR YOU.

Right now the tool can make these queries and dashboards. Those are fine, I think they're basically what we need. But I'd like to have a mobile-first wrapper here that every exec/owner can refer to, to see quick stats.

I don't have a clear vision for HOW we should change this, except at minimum providing some better navigation. We've got a kind of half-implemented nav in place, but you get different navs in different screens. The mobile nav appears in some but not others. Monica worked on some of this in #17 but I don't think that was a coherent proposal.

EG:

• https://institutefsp.org/bnbintel/ does NOT have the mobile nav.
• but when you select a report like https://institutefsp.org/bnbintel/queries/49-college-credit-courses-earned-with-overall-avg you DO get the mobile nav

That mobile nav only lists the Dashboards that are created. I think that makes sense as a primary thing: let the exec user jump straight to a high-level summary. But probably we should provide the rest of the nav somehow too on mobile.

On desktop we've got a weird variable nav also - sometimes it shows up, sometimes it doesn't.

What else? I don't know! I'd like to figure out a better / more coherent vision for this, and want @vikascripps to take the lead on finding it :)

Should there be MORE context about your app? more context about BNB? I don't know.

[vikascripps]

@mattkirkland here are a couple of options for the nav. Version 1 has tabs that allow users to switch between Dashboards, Queries and Checks. Version 2 has a filter on the homepage that allows to do the same as well as 'My Dashboards' and 'My Queries' links in the top nav. Visual design on both is pretty simple but I tried to make all graphs look more BNB-like. I also added a horizontal bar chart as an option. I added horizontal scrolling for charts and tables on small screens, you can see it in the prototype here.

Let's look at these together when you have time.

[mattkirkland]

Let's look Thursday AM, these look sharp!

[vikascripps]

It's been a while but here is an update.

A quick rundown of changes:

• Last time we talked about how to combine our logo with the logo of the client, here are a few options.
• You'll see the Index View for dashboards as an example of an index page. I added a pin icon for a dashboard to indicate that user selected that dashboard as their homepage. I haven't built out the 'edit' or 'create new' page for dashboards but I imagine those pages having a "Pin as my homepage" button there.
• I added a "Download" button to the header of the Dashboard interface. Also added down pointing arrows to each summary 'widget' so users can click on it and be taken to the relevant table/graph.
• I made a quick prototype of what the mobile nav would look like.

@mattkirkland let me know what you think.