Novaliches Senior High School Portal
Novaliches Senior High School
.png)
Role & Responsibilities
Solo UI/UX Designer
​
•User Research
•Prototyping/Wireframe
•Visual Design
•Usability Test
Timeframe
3 Months
Industry
Department of Education(DepEd)
Overview
I had the opportunity to work with the whole faculty, and principal of Novaliches Senior High School to build an experience that will make their platform more simplistic, and impactful for the students, and parent's to use.
​
As a contracted UX Designer, I develop high-fidelity wireframe, clickable, prototypes, and user flows for the the website to enhance user engagement and increase the user rate.
Design Process
%20(1).png)
Understand
Problem​
Students and parents find it difficult to navigate the school portal. The school aims to simplify the system by using a minimalist design, allowing users to navigate more effectively.​​​
Product Goals​​​
Parents, students, and facilitators are often overwhelmed by the amount of information related to students' needs.
​
Applying online doesn't always go as planned for them, as not everyone knows how to use or navigate devices effectively.
​
•Design a website that guides users according to their convenience and needs. For additional peace of mind, all students and parents will have personal accounts to track their progress, whether it's related to classroom activities, enrollment, or requirements.
​
•The website is accessible to both prospective and current students, with designated dates for actual enrollment.
Competitive Analysis​​​
I analyzed competitors' key objectives, including room management, enrollment modules, overall strategy, and UX.
​
Due to the lack of development in the Student Portal and issues with user navigation, I decided to research top apps from foreign countries and leading universities in our country for comparison and contrast.
​
I also examined one of the most widely used portals in the world, the Harvard Academy, which offers numerous conveniences and various ways to support remote application to the school.
User Personas
.png)
User Flow​
I took a step back and focused on user flows to make my design more user-centered and, therefore, more successful from the user's point of view. I designed user flows for Log In, Sign Up, Enrollment, Calendar, and saving student requirements.
.png)
Conclusion​
​
The results of the research phase made it clear that I was dealing with issues related to faculty availability and feedback.
​
This data helped guide the design process, prioritizing both students and faculty. I created a more visually appealing landing page with detailed information, while implementing a minimalistic feel throughout the design.
​
My goal was for students to feel confident and informed when choosing the right strand at Novaliches Senior High School.
​
The issue of availability is tricky, as professionals cannot always be instantly accessible due to their personal and professional commitments. This led me to think of ways to bypass this issue. Although meeting with faculty is the most efficient solution, their packed schedules often make this difficult.
​
Constant feedback was invaluable throughout the iterations of the user experience and interface, providing me with a broad perspective on what works best for the users.
​
The Novaliches Senior High School Portal offers students personalized accounts, access to their strand syllabus, and the ability to view the quota for each strand.
Impact
​After hosting the website on February 10, 2024! For confidentiality reasons I have omitted the actual values for these metrics.
​
The moment it went live, we immediately saw a staggering increase in users on the website for wide-range testing and received feedback about it.
.png)
Ideate
Wireframe & Prototype​
After finalizing the flow, I began sketching the core features and designing mid-fidelity wireframes.
​
These wireframes will be tested by users to identify pain points and optimize the design.
Test
Usability Test​
I conducted a usability test to assess the learnability of new users interacting with the portal for the first time. I observed and measured whether users understood the app and how to complete functions such as logging in, signing up, enrolling, managing requirements, and checking the enrollment date.
​
Thanks to the usability test, I was able to identify and resolve several issues.
Issue #1​
The login module looks cleaner and more organized after adjusting the spacing and proportions. I lightened the background color to improve the visibility of the input box. Additionally, I applied consistent styling to other input boxes and reduced the opacity of non-highlighted text for better focus.
Before
After
Issue #2​
Some participants and faculty members mentioned that the previous design was shabby and lacked images to make it more vibrant. Additionally, there were misalignments in the content.
​
After making significant revisions and assessments, I developed a cleaner design, enhancing clarity and ease of understanding. I also added logos to improve navigation as users hover over different sections of the portal.
Before
After
Visual Design
.png)
Final Design
Whole User Interface of Website
Prototyping Website
