Innovating how institutions can share information

The Institute of Environmental and Marine Sciences (IEMS) is a scholarly department dedicated to the studies of wildlife, fauna, and critters. With a vision of becoming "a global leader in environmental and marine research and education”.

In this project, my responsibility entailed leading a team to design and implement an innovative online solution, aligning with the organization's intent of facilitating seamless accessibility of the acquired data and college information through a digital platform.

Silliman University's Institute of Marine and Environmental Sciences (IEMS) faced challenges with paper-based records and limited access to expedition reports due to current organization system alone. Thus, Visitors must be physically present to access the data; and with limited staff, retrieval of information has led to be time-consuming and inefficient, hindering research. Another issue was the accessibility of college info in terms enrollment processes, facilities available, courses offered and etc. resulting in a massive volume of similar inquiries landing in the institute's email address which the institute can't simply keep up.

To address these ongoing issues, I worked with the dean, faculty, staff and students of the institute to find and create the best bridges to fill the gaps that they're experiencing. The web application Linus was developed to compile and exhibit wildlife data, thesis papers, and journal articles online. The application also provides information about the college, allowing users to access IEMS information without having to contact the institute directly.

Before starting out the project, it's always best to start out with the gameplan. In this project, we decided to use Sommerville's Modified Waterfall Model which is a developmental model that divides the project into phases allowing the team to finish each phase before proceeding to the next, all the while being accommodating to any iterations on earlier phases necessary as the development ensues.

In this phase of the software development model, both stakeholders which are the IEMS and the developers, came to an agreement regarding all the requirements, features, and functionalities that are to be included in the web application. An application is only as useful as how its used by its user. After interviewing and getting to know the faculty and staff, I was able to create a user persona that represents the majority of individuals who will be using and maintaining the finished application. This allowed me to shape, plan, and design the various interfaces in a way that accommodates the persona, with the goal of providing a satisfying experience when interacting with the application.

My main role in this phase was to design the User Interface, visualizing what the finished product would look like on all applicable devices.

Before I could start designing the UI, its imperative to note that the features that'll be implemented are in line as to how the different functions in the application works and interacts with each other. Below is a cohesive diagram that illustrates what different user types can do and how it affects the platform as a whole

For readability purposes, a simplified version for the developed Faculty users-type path is advertised.

With reference to all the identified requirements in the previous phase, I continued to enumerate what the user can do as ell as all the sections, and elements that are to be included in its respective dashboard.

To further elaborate and identify the various modules of the application, the last step before I do get to the "fun stuff" is mapping out the different processes and data stores of the application, making sure that all the elements are being placed efficiently.

This step now brings upon testing out different layouts and components. Since the various information architecture diagrams were already developed and documented, creating the wireframes and its prototype was a breeze. Focusing on the bread and butter of the application which is the Linus Online Catalog section, the idea is to create a layouts that would show/hide and trigger different elements and prompts depending on the user type. Maintaining a consistent structure to ensure a familiar user experience across the system, while also streamlining the site's content to improve load times.

The first step is creating the Low fidelity wireframes for the project.

Before I could move on to creating the high fidelity wireframes, I had to decide what Colors and Fonts were suited best to be used for the project.

For the Colors, the solution focuses around a Celestial Blue which is derived from the Institution's logo.

This particular shade of Blue was chosen as it evokes a sense of responsibility, calmness, and confidence. The color is also associated with the seas and protection which highly aligns the objectives of the college of discovering and safeguarding our waters and it's ecosystem with honesty and integrity. This is accompanied by light shades of white with small tints of blue for the backgrounds to enhance overall aesthetic and contrast, creating a pleasing design and coherent user experience all the while passing WCAG standards.

And to bring everything together the Fonts I selected for this project are "Playfair Display" and "Poppins" for the heading and paragraph texts respectively.

It was crucial selecting "Poppins" as the body font as it accommodates the school's diverse international audience, it offers multilingual support while conveying a sense of fun in learning without sacrificing cleanliness. When paired up with "Playfair Display", a certain level of classiness and legitimacy is added to the totality of the design which "cherry-tops" it all together.

Now that everything is set, it was time to turn create the High fidelity wireframes using the elements that I've prepared for this step.

Afterwards I then turned the wireframes into an interactive digital prototype and discussed it with the team and stakeholders to incorporate feedback and assess the feasibility of coding the different elements.

Adjusted any and all comments, it was off to the development team (I included) to turn everything into a functioning and usable application.

After all the modules were fully integrated, using test data, the team and I administered a system testing to recheck if all the objectives and requirements were met. Along with this, a system testing together with the faculty members and students from IEMS and guests was also conducted to observe all performance issues or bugs that needed to be fixed.

I then used a card sorting activity to identify recurring patterns in the participants' responses.

Based on the test results, we conclude that the application is functional, accessible, and is efficient in providing any needed information from the college. The application also proved that the application is accessible in any device may it be on a PC or mobile device through any browser available.

I incorporated three significant changes during the development of the project and after the user testing phase. I carefully considered the user's input and recommendations, striving to integrate them in a manner that enhances the overall user experience .

My objective was to develop a product that is intuitive, effective, and engaging. To accomplish this, I closely heeded the user feedback and made adjustments accordingly.

When the project "Linus" was initially proposed, it solely contained the online catalog only, which was intended to showcase the institution's data on various species and museum items. However, during the subsequent meeting with the stakeholders, we had to devise a solution to integrate the entire system into a website due to client demand. At that point, the database was already established, and the app development was 40% complete. Despite this, I successfully managed to pivot, and found a way to incorporate the new elements, resulting in a successful outcome.

Many users indicated that in their field, and for the people who would use their data, elements such as a critter's scientific were more important than its common counterpart. As a result, multiple changes were made to the organization of details, what should be included, and how they should be presented. These changes also extends to other areas of the application, including journal articles, thesis papers, announcements, faculty details, and similar components.

Originally, the application featured a monochromatic color palette of green and black. The Green was intended to represent concepts such as "nature", "the environment", and "peace", While the Black for a sleeker and edgy look. However, after gaining a better understanding of the true character and personality of the institution and its people ( and maybe the university's office of publications), the Celestial Blue truly embodied the spirit of IEMS which was used to the final product.

The application has significantly reduced the number of emails flooding the college's inbox by almost 70%. This was achieved by streamlining processes through the website which filtered inquiries to focus on content related to the online exhibit and more specific topics. The site easily accommodated the faculty, allowing them to engage with the platform seamlessly. They were able to make full use of the system's features, as evidenced by the high 96% adoption rate during user testing.

The web application was able to run one whole semester but had to halt due to insufficient funding. As of writing, the Institute is only waiting for the budget from the university and are planning to host the website once again.

During my time on working this project, one of the big things I learned was knowing the team's capabilities and making the most of the cards being dealt. There were various design components, features, and backend functionalities that had to change in consideration to the dev team's abilities and the time it would consume to its development. Communication also played a huge roll into the project's success as I had to coordinate these changes with the stakeholders and find solutions that would be feasible and be OVERWHELMINGLY satisfactory to the final product.

I would also emphasize the importance of understanding the project's users' needs to fully satisfy the client's requirements while maximizing accessibility and usability for sustainability to deter any major changes and curveballs that would heavily affect the project's development midway.