mockup a landing page for BNBintel so we've got something to send to clients

[mattkirkland]

This is a MOCKUP request only, we're not going to build anything on this gem, I just want a page on BNB.com where I can point people.

We're pitching the BNBintel service to other clients, but/and we don't have anything to show people as a document. I can pull up screenshots and mockups, or demo them how it works for Institute. But would be nice to have a one-page that shows the features and benefits, and make it LOOK like a SaaS product a little bit.

BNBintel is a forked version of https://github.com/ankane/blazer which lists some features/benefits. But that's maybe not a great start.

But thinking through what it should actually communicate:

WHAT: BNBintel is a lightweight business intelligence (BI) platform that sits alongside your app. Admins can use it to peek at their app's data without having to formalize a report. It's fast and dynamic, and it's admin only.

SHOW: screenshots showing that it can do cute things like: make simple graphs, use a time selector, etc.

I think we can use the kind of 'every SaaS ever' template like https://helloquery.com - we don't need a revolutionary design pattern.

[mattkirkland]

Couple of screenshots from institute examples:

[mattkirkland]

This is all probably a writing task first (the primary material a UX designer works with is WORDS!). But I'm open to just copying the structure / outline of a similar project, we don't need to generate this from scratch.

[vikascripps]

@mattkirkland I think the structure would be similar to the website you linked above.

Here is what I came up with in words. Let me know of this alignes with what you are thinking.

Get data about your product at your fingertips

BNBintel provides instant access to your app's real-time data without the hassle of formal reports. Quickly check key metrics like revenue and signups, and stay informed about your app's performance at all times.

[Screenshot of a dashboard]

Build queries and reports

Easily create custom queries and insightful reports, whether you prefer a hands-on approach or delegate to our expert team. Analyze user behavior, feature performance, and market trends effortlessly, without the need for specialized expertise.

[A short video/gif of writing a query / saving a query and seeing the result / video of creating a report]

Customize your dashboard

Tailor your monitoring experience with BNBintel's dynamic dashboard. Curate a comprehensive view of your app's performance metrics, from revenue trends to user engagement, to track progress and identify growth opportunities.

[Short video of adding graphs to dashboard]

View reports on the go

I know our current mobile interface doesn’t look great. But when it does, it would be nice to include this part.
Stay connected to your app's performance with BNBintel's mobile-friendly design. Access critical reports and real-time insights anytime, anywhere, ensuring you're always informed, whether in the office or on the move.

[Screenshot/screen recording of the mobile interface]

Edit and export
Take control of your data with our editing and export capabilities. Fine-tune reports on the fly and export data with ease whenever you need. Seamlessly share insights with stakeholders and team members and integrate data into other platforms for effective collaboration.

[Short video of exporting a report]

[mattkirkland]

I think this is a great start. Let's take this and mock it up in the same format we use for case studies: eg
https://brandnewbox.com/case-studies/neumz/

That uses full-width image stuff, but we aren't limited to that - we can do text-next-to-image, etc. We've got the same grid to work with we use anywhere else on that site.

[vikascripps]

@mattkirkland here is a quick mockup of the page for BNBIntel.
I need help taking better screenshots or screen recordings since I don't know how some of the functions work.

[mattkirkland]

These seem fine, and it's OK to use placeholder screenshots for now. But let's make this a little more interesting? We could mix up the layout, show mobile versions (mocked up on a phone, etc), add some additional visual interest.

[mattkirkland]

Threw some notes onto Landing Page 2, Page 1. Let's rework that into a final proposal. I added some copyedit notes and rearranged section ideas.