In late 2022, the Vice Provost for Academic Affairs at the Naval Postgraduate School tasked my team with building an online learning portal for NPS. This effort involved several different areas:

• A new website
• A branding package
• A significant amount of video content
• A complete overhaul of our learning management system (LMS)

The first component we worked on was mine: the website. From December 2022 to March 2023, I built a database-driven overlay on top of our standard content management system. This allows for much easier maintenance and management of the website’s content. After launch, I maintained and updated the NPS Online website, and expanded its features to improve usability and engagement.

The effort overall has proven to be widely successful. As of August 2023, at the end of my development cycle, NPS Online was the best-performing public-facing site within NPS.edu based on real-time analytics. Students and faculty were pleased with the clean, usable design, and user traffic continues to increase steadily.

NPS Online has since gone through iterative revisions in the capable hands of the design team maintaining it for the long term. These changes have improved readability and usability, and further enhance the unique visual identity of NPS Online.

Technologies used

• HTML & CSS
• JavaScript
• Bootstrap
• Liferay
• Freemarker

The homepage, while not the most difficult page to build from a technical perspective, went through the most design revisions over the course of NPS Online’s development. Several components that were there in the initially approved concept were later removed with the goal of trimming down homepage content to just the essentials.

The banner at the top is fully responsive, and scales smoothly across all screen sizes. Having the whole website work on every possible device was a high priority; I had a small fleet of smartphones and tablets of various models to do real-world testing on the most common devices seen in NPS.edu’s Google Analytics dashboard.

The Featured Offerings section was a bit tricky; we chose to go with a mouseover effect to reveal the text summary and details for each featured offering. On mobile, I removed the hover effect and had it displayed by default.

The search and filter section directs users to a pre-filtered All Offerings page, and the Program Areas tiles below that do the same for each program area.

NPS Online leadership selects which offerings are featured in the Innovation Offerings and Lecture Series sections.

The majority of my development hours went to this page. I tried several options for ways to filter, sort, categories, and organize our offering catalog, including every option available within the currently-in-use version of NPS’s CMS. However, I quickly ran out of features and the ones built-in to the CMS didn’t fit the client’s request.

After going back to the drawing board, I decided to build a custom solution as an overlay on top of the CMS. This involved:

• Bypassing the normal CMS web content functions entirely to directly access the database in XML format.
• Parsing the XML data into a (very large) JSON object containing all valid offerings eligible to display in the All Offerings catalog.
• Referencing and operating on that JSON object to filter and sort the results based on user-entered parameters. These filters stack, meaning if filter A and filter B both have a parameter set, the page only displays offerings that meet both criteria.
• Dynamically updating the “Showing all offerings” text at the top of the page to reflect the currently active filters.
• Building a custom pagination feature, since the CMS’s built-in pagination didn’t work with the custom filter and sort interface.

As I built each piece of this experience sequentially, I did so in a sandbox page so that users on the public-facing All Offerings page wouldn’t have to deal with glitches, bugs, or errors while I developed each feature.

These are template-driven pages that pull content directly from the database. Each offering is editable as a web content piece, and the template serves the offering’s data fields (title, curriculum number, image, courses, etc.) to the user based on the display template.

There’s also a fair amount of dynamic code involved in the template:

• Web content managers enter and edit the “Courses required” table by typing course numbers into a set of form fields, formatted with custom syntax. A script then takes that and parses it into human-readable output to allow for a wide variety of options for how to format and organize the course table.
• The image displayed is either an image provided by the point-of-contact for that offering, or selected from a pseudo-randomized pool of images. The template sorts this image pool into program areas to make the image options somewhat more relevant; it selects images from a calculation performed on the unique ID of the offering in the database.
• Headings and relevant content only display when that offering has content in the corresponding data fields.
• A script that scans the course table and, on course pages, a list of degrees that course is part of. This script matches each course or degree number to its corresponding catalog entry, and inserts the title of the course and its URL into the page.

The Distance Learning program at NPS had a Quick Start Guide in PDF format that my team had maintained and updated for several years. This was easy to distribute to students, but came with several downsides:

• Updating the Quick Start Guide was tedious, unreliable, and often didn’t work as expected due to cached older versions
• We couldn’t control distribution effectively, once the Guide was sent to students
• Older versions with incorrect and out-of-date information often led to confusion

We chose to convert the Quick Start Guide into a page within NPS Online so that it’s easier to maintain and in one central location. Much of the content was outdated, so we refined, reorganized, and updated where necessary to produce a concise and easy-to-navigate web guide.

• Steps are now sequentially ordered, with sub-steps as needed, and links to each relevant system
• Steps are clarified and updated, for example “Zoom or Teams” rather than “VTC”
• Resources section is now more robust, with links to commonly used NPS systems referenced in the guide.

Page Not Found

I created a custom graphic for the custom 404 Page Not Found experience, one that should speak to NPS Online’s military audience. I also included links to search or browse NPS Online so that users don’t simply leave the site.

Maintenance Mode

I took a picture of a mechanic working on a Prowler and customized it to work for this page. The Maintenance Mode page is used when the site is taken offline temporarily for any back-end maintenance.