


Oryzapp: Centralized Rice Storage for Rice Data at CLSU Research Office
Oryzapp: Centralized Rice Storage for Rice Data at CLSU Research Office
Oryzapp: Centralized Rice Storage for Rice Data at CLSU Research Office
💡 Extracted from my Senior Capstone Project ORYZAPP: QR-Code Integrated System for Special Purpose Rice at CLSU Research Office
💡 Extracted from my Senior Capstone Project ORYZAPP: QR-Code Integrated System for Special Purpose Rice at CLSU Research Office
💡 Extracted from my Senior Capstone Project ORYZAPP: QR-Code Integrated System for Special Purpose Rice at CLSU Research Office
💼Role: UX/UI Designer
💼Role: UX/UI Designer
💼Role: UX/UI Designer
📏Tool: Figma
📏Tool: Figma
📏Tool: Figma
📆 Duration: 12 Weeks
📆 Duration: 12 Weeks
📆 Duration: 12 Weeks
What's Oryzapp
What's Oryzapp
What's Oryzapp
Oryzapp is a Progressive Web Application that serves as a database for Special Purpose Rice Crop data gathered by the researchers at Central Luzon State University Research Office.
The application integrates QR-Code for secure and quick retrieval of data and provides storage to store confidential research data that is essential for innovating rice crops.
Oryzapp is a Progressive Web Application that serves as a database for Special Purpose Rice Crop data gathered by the researchers at Central Luzon State University Research Office.
The application integrates QR-Code for secure and quick retrieval of data and provides storage to store confidential research data that is essential for innovating rice crops.
Oryzapp is a Progressive Web Application that serves as a database for Special Purpose Rice Crop data gathered by the researchers at Central Luzon State University Research Office.
The application integrates QR-Code for secure and quick retrieval of data and provides storage to store confidential research data that is essential for innovating rice crops.
Problem
Problem
Problem
The Research Office compiles data on various crops, each necessitating a centralized database for access.
However, prior rice crop researchers stored data in books, leaving the current team without vital information for the new program's launch.
Despite focusing on special purpose rice (SPR) and other crops, past research wasn't shared, hindering new researchers.
Data was collected from scratch by one researcher in the field. Data is in Excel due to Mac incompatibility with Access.
While Excel is handy, it can create redundancy and complex file sharing. SPR data confidentiality is crucial, with only Project Leaders accessing and modifying it.
The Research Office compiles data on various crops, each necessitating a centralized database for access.
However, prior rice crop researchers stored data in books, leaving the current team without vital information for the new program's launch.
Despite focusing on special purpose rice (SPR) and other crops, past research wasn't shared, hindering new researchers.
Data was collected from scratch by one researcher in the field. Data is in Excel due to Mac incompatibility with Access.
While Excel is handy, it can create redundancy and complex file sharing. SPR data confidentiality is crucial, with only Project Leaders accessing and modifying it.
The Research Office compiles data on various crops, each necessitating a centralized database for access.
However, prior rice crop researchers stored data in books, leaving the current team without vital information for the new program's launch.
Despite focusing on special purpose rice (SPR) and other crops, past research wasn't shared, hindering new researchers.
Data was collected from scratch by one researcher in the field. Data is in Excel due to Mac incompatibility with Access.
While Excel is handy, it can create redundancy and complex file sharing. SPR data confidentiality is crucial, with only Project Leaders accessing and modifying it.
Project Goal
Project Goal
Project Goal
To create a streamlined and centralized database storage system for special purpose rice (SPR) crop research data, prioritizing convenient data storage and retrieval while maintaining confidentiality.
The system will be accessible across devices and operating systems, featuring QR Code generation for user logins, SPR details, and data classification tools.
Additionally, the system will enable researchers to generate reports effortlessly.
To create a streamlined and centralized database storage system for special purpose rice (SPR) crop research data, prioritizing convenient data storage and retrieval while maintaining confidentiality.
The system will be accessible across devices and operating systems, featuring QR Code generation for user logins, SPR details, and data classification tools.
Additionally, the system will enable researchers to generate reports effortlessly.
To create a streamlined and centralized database storage system for special purpose rice (SPR) crop research data, prioritizing convenient data storage and retrieval while maintaining confidentiality.
The system will be accessible across devices and operating systems, featuring QR Code generation for user logins, SPR details, and data classification tools.
Additionally, the system will enable researchers to generate reports effortlessly.
Design Process
Design Process
Design Process
💡 I was new to UX/UI Design and less familiar with the proper process in this senior project.
We used the SDLC waterfall model, and due to time limits and our limited understanding, we skipped phases like prototyping.
I aligned the following with the User-Centered Design Process from the project.
💡 I was new to UX/UI Design and less familiar with the proper process in this senior project.
We used the SDLC waterfall model, and due to time limits and our limited understanding, we skipped phases like prototyping.
I aligned the following with the User-Centered Design Process from the project.
💡 I was new to UX/UI Design and less familiar with the proper process in this senior project.
We used the SDLC waterfall model, and due to time limits and our limited understanding, we skipped phases like prototyping.
I aligned the following with the User-Centered Design Process from the project.




🧠Understand
🧠Understand
🧠Understand
Interview
Interview
Interview
To grasp their needs, we conducted an interview aiming to identify their gaps and requirements.
Here are some questions that were designed to inform the system-building process.
To grasp their needs, we conducted an interview aiming to identify their gaps and requirements.
Here are some questions that were designed to inform the system-building process.
To grasp their needs, we conducted an interview aiming to identify their gaps and requirements.
Here are some questions that were designed to inform the system-building process.
Reference Data
Reference Data
Reference Data
The researchers shared a confidential research data sheet. We analyzed the frequently used data for potential system input.
During the research, we acquired international rice descriptors, aligning them with our Excel findings to guide our input decisions.
The researchers shared a confidential research data sheet. We analyzed the frequently used data for potential system input.
During the research, we acquired international rice descriptors, aligning them with our Excel findings to guide our input decisions.
The researchers shared a confidential research data sheet. We analyzed the frequently used data for potential system input.
During the research, we acquired international rice descriptors, aligning them with our Excel findings to guide our input decisions.
Rice Descriptors
Rice Descriptors
Rice Descriptors
The "Rice Descriptor" is a detailed set of characteristics used by the International Rice Research Institute (IRRI) to describe different aspects of rice plants, aiding researchers and breeders in classifying rice varieties.
The "Rice Descriptor" is a detailed set of characteristics used by the International Rice Research Institute (IRRI) to describe different aspects of rice plants, aiding researchers and breeders in classifying rice varieties.
The "Rice Descriptor" is a detailed set of characteristics used by the International Rice Research Institute (IRRI) to describe different aspects of rice plants, aiding researchers and breeders in classifying rice varieties.




📌Specify
📌Specify
📌Specify
Pain Points
Pain Points
Pain Points
The researchers shared a confidential research data sheet. We analyzed the frequently used data for potential system input. During the research, we acquired international rice descriptors, aligning them with our Excel findings to guide our input decisions.
The researchers shared a confidential research data sheet. We analyzed the frequently used data for potential system input. During the research, we acquired international rice descriptors, aligning them with our Excel findings to guide our input decisions.
The researchers shared a confidential research data sheet. We analyzed the frequently used data for potential system input. During the research, we acquired international rice descriptors, aligning them with our Excel findings to guide our input decisions.















Requirements
Requirements
Requirements
From the interview responses, we've successfully distilled, identified, and structured the necessary requirements to direct the application's design.
From the interview responses, we've successfully distilled, identified, and structured the necessary requirements to direct the application's design.
From the interview responses, we've successfully distilled, identified, and structured the necessary requirements to direct the application's design.
Storage
Storage
Storage
They seek a streamlined way to store, access, view, and export data. They prefer an organized system over messy Excel sheets, with preset fields for easy input.
They seek a streamlined way to store, access, view, and export data. They prefer an organized system over messy Excel sheets, with preset fields for easy input.
They seek a streamlined way to store, access, view, and export data. They prefer an organized system over messy Excel sheets, with preset fields for easy input.






Security
Security
Security
In case data sharing occurs, maintaining control over what is shared is crucial. Only authorized users should have access to the system.
In case data sharing occurs, maintaining control over what is shared is crucial. Only authorized users should have access to the system.
In case data sharing occurs, maintaining control over what is shared is crucial. Only authorized users should have access to the system.
Accessibility
Accessibility
Accessibility
The aim is to ensure accessibility across different devices, including Mac OS, Windows, and others.
The aim is to ensure accessibility across different devices, including Mac OS, Windows, and others.
The aim is to ensure accessibility across different devices, including Mac OS, Windows, and others.






QR-Code Integration
QR-Code Integration
Adding to our project's requirements, the professors recommended integrating QR codes.
Adding to our project's requirements, the professors recommended integrating QR codes.
Adding to our project's requirements, the professors recommended integrating QR codes.

📐Design
📐Design
📐Design
Wireframe
Wireframe
Wireframe
1st Version Highlights
1st Version Highlights
1st Version Highlights
See Sketch and Wireframes
See Sketch and Wireframes
See Sketch and Wireframes
In this version of the app, rice descriptors were not known. We began with a confidential Excel sheet as a foundation.
In this version of the app, rice descriptors were not known. We began with a confidential Excel sheet as a foundation.
In this version of the app, rice descriptors were not known. We began with a confidential Excel sheet as a foundation.

❗Field requirements were unclear.
🎉We designed the system to allow users to add tables and forms where they can adjust fields and attributes.
❗Field requirements were unclear.
🎉We designed the system to allow users to add tables and forms where they can adjust fields and attributes.
❗Field requirements were unclear.
🎉We designed the system to allow users to add tables and forms where they can adjust fields and attributes.







❓How to control what data is inputted and viewed?
🎉Administer the forms and lists accessible to non-administrator users.
❓How to control what data is inputted and viewed?
🎉Administer the forms and lists accessible to non-administrator users.
❓How to control what data is inputted and viewed?
🎉Administer the forms and lists accessible to non-administrator users.

❓How to let devices running in any OS access the system?
🎉Make it accessible through web browsers
💡This version's desktop optimized, no plans for desktop yet
❓How to let devices running in any OS access the system?
🎉Make it accessible through web browsers
💡This version's desktop optimized, no plans for desktop yet
❓How to let devices running in any OS access the system?
🎉Make it accessible through web browsers
💡This version's desktop optimized, no plans for desktop yet







❓How to integrate QR-Code?
💡Still exploring potential application of QR-Codes beyond just the login process
❓How to integrate QR-Code?
💡Still exploring potential application of QR-Codes beyond just the login process
❓How to integrate QR-Code?
💡Still exploring potential application of QR-Codes beyond just the login process
2nd Version Highlights
2nd Version Highlights
2nd Version Highlights
See Sketch and Wireframes
See Sketch and Wireframes
See Sketch and Wireframes
In the second version, we incorporated the analyzed descriptors and the researcher's new well-organized field requirements. This enabled us to pinpoint necessary inputs, eliminating the need for custom forms and tables.
In the second version, we incorporated the analyzed descriptors and the researcher's new well-organized field requirements. This enabled us to pinpoint necessary inputs, eliminating the need for custom forms and tables.
In the second version, we incorporated the analyzed descriptors and the researcher's new well-organized field requirements. This enabled us to pinpoint necessary inputs, eliminating the need for custom forms and tables.

❗Dev : difficulty in organizing Database in Firebase
❓How to fetch and store the data easier through the help of design?
🎉Split Rice Accession ID Input from Agronomic Traits: Season, Year, and Four Stages per Accession.
❗Dev : difficulty in organizing Database in Firebase
❓How to fetch and store the data easier through the help of design?
🎉Split Rice Accession ID Input from Agronomic Traits: Season, Year, and Four Stages per Accession.
❗Dev : difficulty in organizing Database in Firebase
❓How to fetch and store the data easier through the help of design?
🎉Split Rice Accession ID Input from Agronomic Traits: Season, Year, and Four Stages per Accession.







❗Non-administrator users should only view information
❓How can data remain confidential yet shareable when necessary?
🎉Differentiate roles: Administrator and Guests. Guests can sign up and log in. Admin can manage roles and access user info.
❗Non-administrator users should only view information
❓How can data remain confidential yet shareable when necessary?
🎉Differentiate roles: Administrator and Guests. Guests can sign up and log in. Admin can manage roles and access user info.
❗Non-administrator users should only view information
❓How can data remain confidential yet shareable when necessary?
🎉Differentiate roles: Administrator and Guests. Guests can sign up and log in. Admin can manage roles and access user info.

❓How to let devices running in any OS access the system?
🎉Make it accessible through web browsers
💡This version's optimized for mobile devices
❓How to let devices running in any OS access the system?
🎉Make it accessible through web browsers
💡This version's optimized for mobile devices
❓How to let devices running in any OS access the system?
🎉Make it accessible through web browsers
💡This version's optimized for mobile devices







❓Where to make use of QR-Code?
🎉Streamlined login and quick access to rice information.
❓Where to make use of QR-Code?
🎉Streamlined login and quick access to rice information.
❓Where to make use of QR-Code?
🎉Streamlined login and quick access to rice information.

📝Evaluate
📝Evaluate
📝Evaluate
Once the application was developed, we shared a link to the site and the evaluation with the researchers. Additionally, we sought feedback from 5 IT professionals using an evaluation tool based on ISO 25010 standards.
Their feedback prompted us to enter an iterative process, where we incorporated their suggestions and applied necessary changes to align with the requirements, ultimately leading to the final version.
Once the application was developed, we shared a link to the site and the evaluation with the researchers. Additionally, we sought feedback from 5 IT professionals using an evaluation tool based on ISO 25010 standards.
Their feedback prompted us to enter an iterative process, where we incorporated their suggestions and applied necessary changes to align with the requirements, ultimately leading to the final version.
Once the application was developed, we shared a link to the site and the evaluation with the researchers. Additionally, we sought feedback from 5 IT professionals using an evaluation tool based on ISO 25010 standards.
Their feedback prompted us to enter an iterative process, where we incorporated their suggestions and applied necessary changes to align with the requirements, ultimately leading to the final version.
Final Version
Final Version
Final Version



Oryzapp
Oryzapp
Oryzapp
See in Detail
See in Detail
See in Detail
The user requirements were satisfied, although enhancements are still possible. Users can perform fundamental tasks that facilitate storing and retrieving data within a centralized and secure system, ensuring confidential information remains inaccessible to unauthorized users.
The user requirements were satisfied, although enhancements are still possible. Users can perform fundamental tasks that facilitate storing and retrieving data within a centralized and secure system, ensuring confidential information remains inaccessible to unauthorized users.
The user requirements were satisfied, although enhancements are still possible. Users can perform fundamental tasks that facilitate storing and retrieving data within a centralized and secure system, ensuring confidential information remains inaccessible to unauthorized users.
Final Version Highlights
Final Version Highlights
Final Version Highlights
🗃️ Storage
🗃️ Storage
🗃️ Storage
✔️Quick Search
✔️Quick Search
✔️Quick Search
✔️Rice Organization
✔️Rice Organization
✔️Rice Organization
✔️Filter by Season and Year
✔️Filter by Season and Year
✔️Filter by Season and Year
✔️Export as Excel Sheet
✔️Export as Excel Sheet
✔️Export as Excel Sheet



🔒 Security
🔒 Security
🔒 Security
✔️Administrator and Guest Roles
✔️Administrator and Guest Roles
✔️Administrator and Guest Roles
✔️Disable or assign Guest Users
✔️Disable or assign Guest Users
✔️Disable or assign Guest Users
✔️Limited data shared to Guests
✔️Limited data shared to Guests
✔️Limited data shared to Guests



💻 Accessibility
💻 Accessibility
💻 Accessibility
✔️ Accessible in any computer or mobile device.
✔️ Accessible in any computer or mobile device.
✔️ Accessible in any computer or mobile device.




QR-Code Integration
QR-Code Integration
QR-Code Integration
✔️ Login using QR-Code
✔️ Login using QR-Code
✔️ Login using QR-Code
✔️ Download and scan Rice QR Code for Information
✔️ Download and scan Rice QR Code for Information
✔️ Download and scan Rice QR Code for Information



Typography
Typography
Typography
We selected Poppins for its modern and versatile appeal. With its clean and bold aesthetics, it instills a sense of confidence and assurance in the design.
We selected Poppins for its modern and versatile appeal. With its clean and bold aesthetics, it instills a sense of confidence and assurance in the design.
We selected Poppins for its modern and versatile appeal. With its clean and bold aesthetics, it instills a sense of confidence and assurance in the design.






For font sizing, we followed the guidelines of Tailwind CSS Font Sizing, as our system's frontend was built using Tailwind CSS. We established hierarchy by blending font weight and size.
For font sizing, we followed the guidelines of Tailwind CSS Font Sizing, as our system's frontend was built using Tailwind CSS. We established hierarchy by blending font weight and size.
For font sizing, we followed the guidelines of Tailwind CSS Font Sizing, as our system's frontend was built using Tailwind CSS. We established hierarchy by blending font weight and size.
Colors
Colors
Colors
We opted for colors that harmonize with rice fields, aligning with our university's agricultural emphasis. Considering this, we selected yellow-green as the primary color, reflecting the agricultural context.
We opted for colors that harmonize with rice fields, aligning with our university's agricultural emphasis. Considering this, we selected yellow-green as the primary color, reflecting the agricultural context.
We opted for colors that harmonize with rice fields, aligning with our university's agricultural emphasis. Considering this, we selected yellow-green as the primary color, reflecting the agricultural context.



Logo
Logo
Logo



The aim was to design a logo depicting a rice data database. The logo is straightforward, featuring rice grains and leaves, representing the contents of the database.
The aim was to design a logo depicting a rice data database. The logo is straightforward, featuring rice grains and leaves, representing the contents of the database.
The aim was to design a logo depicting a rice data database. The logo is straightforward, featuring rice grains and leaves, representing the contents of the database.
Lesson Learned
Lesson Learned
Lesson Learned
Here are a few valuable lessons I've learned in connection to design through our project:
Here are a few valuable lessons I've learned in connection to design through our project:
Here are a few valuable lessons I've learned in connection to design through our project:

Make things clear
Make things clear
Make things clear
When gathering information, ensure clear communication with the user. It's better to ask again than to forget.
When gathering information, ensure clear communication with the user. It's better to ask again than to forget.
When gathering information, ensure clear communication with the user. It's better to ask again than to forget.

Planning saves
Planning saves
Planning saves
Though we skipped prototyping due to constraints, remember its time-saving benefits, especially for client changes and major design shifts.
Though we skipped prototyping due to constraints, remember its time-saving benefits, especially for client changes and major design shifts.
Though we skipped prototyping due to constraints, remember its time-saving benefits, especially for client changes and major design shifts.

Design first for Efficiency
Design first for Efficiency
Design first for Efficiency
After the interview, we struggled to begin and started coding without a clear plan, relying on Google images as reference on what we can do.
After the interview, we struggled to begin and started coding without a clear plan, relying on Google images as reference on what we can do.
After the interview, we struggled to begin and started coding without a clear plan, relying on Google images as reference on what we can do.

Not all ideas come to life
Not all ideas come to life
Not all ideas come to life
Ideas may face constraints and limitations. As developers, our project encountered knowledge limitations during development.
Ideas may face constraints and limitations. As developers, our project encountered knowledge limitations during development.
Ideas may face constraints and limitations. As developers, our project encountered knowledge limitations during development.