securly_product_filter short.png

Securly Filter is a cloud-based online web filter for school IT admin to manage students’ online activities at school.  

filter.png
The team
team.png

It's me!

Why this Redesign project happened
free.png
paid.png

Dashboard, the core part of Securly Filter Redesign

As part of redesigning Securly Filter product, redesigning a more excellent user-friendly enterprise version dashboard with enriched features helps the early adopters move from a free early model to a paid product.

The mission is to

Improve the information presenting accuracy and efficiency of the dashboard for offloading IT Admin’s operation burden. 

Mission.png
Problem of dashboard
chart.png

11.3%

images.jpg

users never reviewed the dashboard

The information displayed on the dashboard was not very helpful.

Our backend data showed most of the users actually did not actively browser the dashboard as expected. Even 11.3% users said they never reviewed the dashboard. The user gave feedback that the information displayed on the dashboard was not very helpful.

Feedback from the customers
Old UI
Old UI
Old UI
Old UI

Why do I need to review system report?

Is that important? 

How can I select a time range?

Only two trending data? I want to see more. 

SchoolIT.png

How might we

Light_Bumb 1.png

Explored designing a user-task-focus dashboard that provides comprehensive, aggregated information to help users complete tasks efficiently and improve productivity.  

How to approach

dashboard 1.png
Clarify user tasks and what dashboard can help
present.png
Screening what information to be displayed
execution.png
Design how to present and execution
Deep dive into user context
SchoolIT.png

School IT admin's daily life

Based on the user's interview, I noticed that managing online content and permissions was a small part of a school IT admins' daily routine. They were pulled in other duties like maintaining the school's IT devices, network service, educational electronic devices, etc. They felt frustrated when spending too much time on operating tedious filters for managing web content.

Clarify user tasks and what dashboard can help

From the user interview, I found the top 3 tasks that are most common in IT admins’ daily routine:

1

Identify and handle high-risk information in a timely manner.

User task

The  Securly Filter marks sensitivity information and the account associated with it as Flagged. This so-called high-risk information includes suicide, school violence, school shooting, etc. IT Admin’s perspectives determine if the flagged event and account is an emergent and need to inform responsible teacher to take care of immediately.

dashboardIcon.png

Dashboard can highlight the top recent ‘Flagged’ event along with the account associated. It reminders IT Admin and provide an entry point to browser the details directly.

Screen Shot 2022-02-09 at 10.42.46 AM.png

2

Add/Remove policy

BlockedSearches.png

As an advanced feature, policy management is achieved via policy editor though, a dashboard is a good place centralized presenting policy enabled/disabled status.

dashboardIcon.png

In a free early version, advanced policies feature will be additionally charged. It is valuable to show the policy status in the dashboard so that IT Admin could avoid hitting the limit. I decided to retain this design in order to keep the consistency of user habits.

3

Modify policy

Review the content in each policy to add what should be blocked but missing in the policy.

Old UI

emm,, the poker.com need to be blocked

SchoolIT.png
dashboardIcon.png

Dashboard is good for presenting statistical and sumaried information in this case.

Screening what information to be displayed

Based on what was achieved about user tasks and dashboard work, I categorized display information into four groups.

I called up PMs, researchers, and content writers together to discuss the priority details for each of the pieces of information. 

Flagged information

The dashboard of Filter needs to provides real-time monitoring of key indicators, displaying the status, and guiding users to locate problems. Flagged data including flagged students/ activities/ locations directly show the danager that students are facing.

Trending information

Top rate data including top blocked/allowed/video/top blocked & allowed search help school admin to track the most important online activity from students.

Aggregated information

Flagged activities traffic would show the frequency and time of the flagged activities. The policy used traffic could track the usage of the policy

Functional information

There are 3 core functions that the dashboard needs. They are "select time" "Select policy" and system report

Rate.png

Design execution

Establish design principles

Consistency

DesignPriciple.png

Keep visual consistency for all elements including fonts, buttons, components, etc. Consistency is also required for all functions like all popups of clicking read-more should aline with the same interaction.

Clarity

Clear navigation can drive users to destinations smoothly. Remove confusing instructions to increases the learnability of the dashboard.

Efficiency

Reduce redundant, unnecessary, and unrelating presenting information, focus on the most important ones for effective viewing. 

top bar_5.png

I optimized the system status presenting format by hiding all runtime information into the top bar and identifying status by Green/Red colors. 

Redesign system report 

Present information on dashboard

Dashboard layout

Product manager suggested to use toggle button for switching blocked or allowed of sites and searches cards, in order to save some spaces for other information. I hold my objective position on this. I believed it didn’t align with the Clarity principle as it caused user’s confusion if the switch-toggle operation result was not what he/she expected. It also broke the consistency principle since the toggle button was applied for enable/disable switch in other functions of the product. 

At prototype started with a clean design of 3 columns, it was found that had not shown information effectively but wasted spaces on a large screen. Thus, I moved to a four-column design

Prototype

From wireframe to hi-fi prototype

The design system is the key to keeping visual elements consistent. Check more details about the Nucleus design system

Flagged information from wireframe to final

Since flagged is the most important information that the user needs to review, it was crowded to show the flagged site, account name, and date in a vertical card. Thus I tried the horizontal layout and listed all the information horizontally. 

Final design

Dashboard_Final.png

Design Kid's Profile for
Online Protecting App

Home app.png

Build Nucleus Design System

Design System.png