Student Portal Dashboard | Secondary School
UX/UI case study and concept development
What is the Customer Portal Dashboard?
According to helpshift.com, a customer portal is designed to give current customers access to services and information they need. It’s usually private and secure, requiring log-on. It may contain account information, payment information, case information, account history, downloadable digital files, access to support mechanisms, and the means for customers to upload data. Essentially, a customer portal is a digital sharing mechanism and information center between a company or organization and its customers.
Why are Portal Dashboards important for secondary schools?
School Portal Dashboards are "schoolyards" where active communication happens between school/teachers and students. It is critical that the information presented in these portals is easy to find, understand and react to. The students' life isn't limited only by the list of classes and marks, and there should be space for interests, resources, help, etc.
Problems
Today, about 75% of interactive school/teacher/student/parent web portals have outdated visual design, complex user flows, and hard-to-use interfaces. These applications, in most cases, aren't customizable, have lots of undiscoverable functionalities, and in many cases missing features.
My Role
In this project, I took the initiative to research and study the current situation with school portal dashboards and create an example of how it could potentially look like if the UX design is taken to the next level and a new, fresh UI is implemented.
In my role, I've covered:
• research through existing dashboards
• user interviews (qualitative research);
• creation of user persona;
• working on user flows;
• building the information architecture;
• wireframes and mockups;
• usability testing;
• learning feedback, and outcomes.
Design Thinking Approach
User Interviews (Qualitative Research)
Qualitative research relies on data obtained during the research event from first-hand observation, interviews, questionnaires (on which participants write descriptively), focus groups, participant-observation, recordings made in natural settings, documents, and artifacts.
For the Student Portal Dashboard, I've interviewed four high school students and two teachers. During these conversations, I understood the user mental model for two potential target groups, discovered their main pain points, and learned the best experience if a new design were applied.
Interview questions:
• Tell me about yourself?
• Usually how do you organize your digital calendar/events/chores?
• How often do you need to log in to School Portal Dashboard?
• Who else logged in to your Dashboard?
• Could you name the three most important things you think should be presented first in the Dashboard?
• What other topics would you like to see in the Dashboard except for classes, progress, and marks?
• How often do you require help through Portal?
• How often do you send messages to others?
• Would you be interested if Portal will be available on mobile devices as well?
• Usually how do you organize your digital calendar/events/chores?
• How often do you need to log in to School Portal Dashboard?
• Who else logged in to your Dashboard?
• Could you name the three most important things you think should be presented first in the Dashboard?
• What other topics would you like to see in the Dashboard except for classes, progress, and marks?
• How often do you require help through Portal?
• How often do you send messages to others?
• Would you be interested if Portal will be available on mobile devices as well?
Persona
User Flow
The user flow exercise is essential for the UX study case. This thinking process helps build the user's journey and discover pain points, broken logical paths, or simply missing functions.
Below, I'm presenting a fragment of one of the sections responsible for the Student tab dashboard and related information.
Wireframes
I made a quick sketch for a general understanding of the dashboard layout. In this example, the wireframe can help to get an idea of the future element distribution.
Design System
When the project moves from wireframes to the visual appearance, I need to set the elements used in the Portal Dashboard design. I create the file that will combine all the essential elements, starting with color style and defining the typography, iconography, buttons, text fields, and other components.
Mockup
Detailed and precise mockups help to realize the visual issues with accessibility and perception of the UI components. Additionally, it allows verifying if any details have been missed during the wire-framing process. This stage is the one before the actual usability testing, and it is crucial to create a real-live experience for the target group as close as possible.
Usability Testing and Feedback
During the usability testing, 3 participants had to complete a set of requirements, concentrated on general visual perception, discoverability of specific features, gathering educational information. The users' comments, behavior, and ability to complete the tasks have been marked and saved for the next design interaction.
Outcomes & Learnings
The Student Portal Dashboard UX Study case showed the importance of new modifications that have to happen to this type of service. The users who could try the new dashboard expressed their excitement regarding the portal's new fresh look and feel. They mentioned that it became easy to navigate through and find the necessary information. The visual appearance of some of the data, like student's marks and progress bars, helped faster understand the current state. The logical architecture allowed the users to get support and send messages quickly.
There are quite a few things that would be interesting to explore in the next interaction:
• integration of the email system;
• customization of the widgets;
• student's profile;
• parent's portal that will combine more than one student in one dashboard;
• adaptation of different charts and graphs.
This project was a great experience that gave new opportunities to improve areas that previously didn't get worthy attention from many professional UX designers and UX-oriented companies.
Tools
Figma
Persona Image Credit
@Kamiz Ferreira
https://www.pexels.com/@kamisama
https://www.pexels.com/@kamisama
