Overview

Cybersec is an international online platform that trains cyber security professionals. Different colleges and organizations around the world allow students to partake in quizzes, challenges and the ever-evolving professional jargon. The platform is ever growing and ever evolving. Resulting in the need to rebuild the dashboard to be more user friendly, more flexible for uses of different platforms and users in different countries. The dashboard allows users to access data according to their authorization levels.

Tools

Role

Year

Team

The Problem:

The current system has suffered from shortages and adaptation to users enables what has caused sensitive information spells, critical errors in personnel management, and monitoring of personal, class, and institutional progress.
Also, since society is evolving to international dimensions it has had to be re-characterized to suit institutions all over the world and their needs.

The Solution:

If we create a user-friendly system that includes a clear division between the various users and their needs, we will be able to help our end users get the data they need in one place, thus creating a feeling for every user that the system is especially characterized for him. All of these will help users make fast data-based decisions and thus increase their efficiency.

Emphasize

Requirements gthering

Research

We started by analyzing previous data and screenshots of the product provided to us by the Cybersec team, then we looked for companies that used similar systems of managing global institutions. We were unable to find a direct competitor with a product similar to that of Cybersec.

Requirements gathering

Interviews & Insights

The project managers gave us full access to all the groups and the information to which they are exposed. Thus, we could create an orderly division and question each group individually, extract the information about its work processes, the tools it uses, how each group uses these tools, and of course how it makes decisions and what motivates it to make them. Once we understood this we could “wrinkle” this information to the exact needs of the user.

 

Through our research on best practices for Dashboards we have discovered important points that we have implemented in our interface:

Using clear infographics can
help save more space while
conveying information in a
clear and accessible way.

Alerts help draw attention to
the most pressing matter.

Dashboards that are
considered effective do
not consist of written
content alone.

Users need to be able to
see the most important thing
and be able to act by it.

Micro-animation and
credentials help communicate
with users that their tasks have
been completed or warn them.

There is no need to display
everything on one page.
Items can be sorted less
frequently in the various
menus.

Requirements gathering

KPIs

Most of the users we met could not tell us straight away what they needed (usually because they did not know they could just ask for it) but once we understood what their agenda looked like and what actions they performed in their work, it was easy for us to identify the metrics (KPIs) they needed. it is important to understand the role of the end-user and the organization’s expectations at the beginning of the project.
we compiled a questionnaire made up of very general questions whose purpose was to extract information about the user’s work processes, the tools he uses, and how he uses them.

Requirements gathering

User Personas

We synthesize our findings into two personas, which helps us keep our end users in mind during our design process.

After completing the questionnaire and creating personas we were able to target the information to the clear needs of our users. Anyone who might use our Dashboard should be able to:

Ideation

Ideation

User flow

The user flow helped me organize the structure and how particular task will be done by the user from their entry point through a set of steps towards successful outcome final action.

Ideation

Wireframing

I created low fidelity mock-ups to ensure that the designs aligned with intended functionality before delving into UI details.

Design

Design

Style Guide

Design

How it works?

Sign in

The login screen allows you easily to establish a quick connection to the system.
After completion of the details, the user is directed to the dashboard where he enters his personal details (his position, geographical location, and his institutional affiliation).This information allows the system to create a user profile according to which the relevant permissions will be determined.

Header

The Header – defined as “1” – is affecting the whole components of the dashboard and will constantly appear on the screen. The company name is appearing on the left side, while the most common operations , which should be the most accessible (alerts, search, and the access to the personal profile), will appear on the right side.

Side Menu

The side menu is defined as “2” is affected by “1” The Header, and hierarchically affecting everything below it. After registration, the system will create the proper permissions according the known user’s role and will display his required relevant information Principals will have the option of getting whatever information they need (college, grade, and student personal information), teachers will be exposed to pertinent information about their class. Students will have permission to access their personal information, progress graphs, syllabuses, learning material and various assignments.

Organizations

This screen shows the maximum permission to which the highest degree of authority is exposed.
Here we can see information about the institute – number of colleges, number of classes and number of students.
Also, under the infographics, neat and detailed information will appear in the table.

Students Usage

Student screens are the most interesting and complex. Unlike principals and teachers’ use of the dashboard, students may track their progress in the study and will have the option to check and perform a “follow-up” procedure after their assignments are accomplished. The system is structured in such a way that pushes the student to practice and learn. To achieve this goal we use different methods: infographics that show progress and success, pushing messages that call the user to practice, and a rating scheme that encourages competition among students.

Wisewine – Winery App

Gyme – Trainers App

Super Camper – Coming Soon