Securly Filter is a cloud-based online web filter for school IT admin to manage students’ online activities at school.
The team
It's me!
Why this Redesign project happened
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.
Problem of dashboard
11.3%
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
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.
How might we
Explored designing a user-task-focus dashboard that provides comprehensive, aggregated information to help users complete tasks efficiently and improve productivity.
How to approach
Clarify user tasks and what dashboard can help
Screening what information to be displayed
Design how to present and execution
Deep dive into user context
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.
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.
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.
2
Add/Remove policy
As an advanced feature, policy management is achieved via policy editor though, a dashboard is a good place centralized presenting policy enabled/disabled status.
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.
emm,, the poker.com need to be blocked
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
Design execution
Establish design principles
Consistency
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.
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
