NewsCatcher, Dashboard

My data engineer friends at NewsCatcherAPI needed a way for their users to try out the API, track usage, and upgrade to a paid plan.

NewsCatcher is like a Google for the news part of the web, which you can access as a source of data.”

They also need it to be extremely simple both UX and tech-wise so that they can scale it using what they know—Python.

So I designed a few screens, took Bootstrap, Jinja, with Artem's help connected it all to Flask and ChargeBee. We got it all running in about 3 days.

Quickstart

For better experience, it would definitely be beneficial to show the get started right here in the first dashboard screen.

But we needed something quick, and plus, documentation always changes. It was easier just to point users to the single source rather than duplicating instructions in two places.

NewsCatcher dashboard layout.
First page user sees after signing up.

Account

Basic account information with the key regeneration in a separated section. Better be careful with that one.

User account area.
User account area.

Upgrade plans presented in a familiar layout.

NewsCatcher plan upgrade layout.
Plan upgrade layout. Details may be outdated.

Authorization

Explains why user would need an account to connect to the API. And most importantly—how fast can they get access to it.