Need UI design for our report

Industry: Internet/Software
Num. of web pages: 1
Description of every page: Need UI design for our report



We have a small report designer that outputs a straight forward HTML statement report. I need a better design of this output report.



We use dotNet and Bootstrap framework – so it needs to be consistent with those. It is responsive design so the app is available on phone and tablet too.


Most of the needs here are very standard and simple.



Report format needs the following:
It needs to look very modern and current

It needs to look clean and easy to read

It should have a nice sense of coloring that is also modern

It should sort, group, in an attractive and clear way.

Group headers and footers across many levels should be clear and meaningful

Page header and page footer has to be designed well

Report header and report footer has to be designer well.
Font, font size, coloring of different types of data should all be designed for attractiveness

Proper Indentation should be designed

Positioning for a standard 1366x768 resolution should be designed

But it should work well on one smaller and one larger resolution too.
It should work well on phone and tablet

Field value may choose word wrap. So design should accommodate well.

First field can have drill-through

Find a value in the report

Navigation and open and close button should be designed

Criteria selection and modification should be designed




Some specifics:
A small space to the rop-right of number fields to show a three character currency code ( e.g. USD) in light color. Tiny font. Maybe 6.
Logo is necessary in top right.



Nice to have:

We plan to add in future – if you have time show us how it would fit.

Drill through from any field

Collapse and expand groups (rows) and hide and display details – inside the report itself

Collapse and expand columns and hide and display those values

Filter data by field values – consistent with MS Excel filtering
Action to be associated with any detail record showing in the report. Maybe a small action icon like a gear.

Change colors of data based on conditions similar to MS Excel Conditional Formatting.
Ideas for the visual style: Responsive and Business Styles and colors
Urls to draw inspiration from: https://airtable.com
Extra notes: * We are also requiring the report design to support Material Design in mobile devices.
* Output should be one html page with css, jquery files and images.