Define the problems of old UI

Old dashboard

1. Based on the customer feedback and competitors’ analysis,  we found only showing “Top allowed” and “Top blocked” were not enough. Users wanted to see the summary and important information on the first screen like top flagged users, recent flagged activities, policy usage etc. 

2. Status is too big on the dashboard.

Policy Editor

The workflow was complex and confusing. Admin had to finish setting with the support's help. 

Reports

1. Combine reports and Flagged together and rename it as “Activity”. This new tab provided all activities review and download by categories, policies, time and user ID. Admin would have one PDF report for all activities(including flagged activities) instead of separated pieces. 

2. Users didn’t know if schedule reports succeed or not. 

Sketch for new UI

Final plan

Policy Editor

Activities

Wireframe

Dashboard

Policy Editor 

Activities

Design system

Typography

Grid system

Total width: 1440px

Page width: 1320px

Number of colums: 12

Gutter width: 24px

Margin width: 36px

Column width: 82px

Primary colors

Secondary colors

Componets

New UI